[Next.js ] 2) SSR 그리고 CSR, Next.js 구동 방식

Next.js 를 설명하는 글들을 찾아보면, Next.js 에서 어떻게 페이지 이동을 하는 지의 대한 튜토리얼이 꼭 들어가 있다.

왜 그러한 튜토리얼이 들어가 있는 지 알아보기 위해 SSR 그리고 CSR, Next.js 구동 방식에 대해 공부해보자!

 

 

SSR(Server Side Rendering, 서버 사이드 렌더링)

서버 사이드 렌더링이란, 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고,

서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식을 말한다.

이를 통해 사용자는 바로 렌더링되는 화면을 보기 때문에 사용자 경험이 높아진다.

장점

1. 검색 엔진 최적화 가능

2. 한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다.

단점

1. 페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에 서버 부하가 CSR보다 많다.

2. 페이지 이동 시 흰색 화면이 보인다. 

3. React 에서 SSR을 구현할 경우 Router 와 Redux 를 함께 사용해야 하기 때문에 복잡해진다.

 

 

CSR(Client Side Rendering, 클라이언트 사이드 렌더링)

클라이언트 사이드 렌더링이란, 자바스크립트 파일을 브라우저에서 해석해 렌더링하는 방식이다.

비어있는 HTML 문서 위에 사용자의 요청에 따라 그때그때 페이지를 구성하여 보여주는 방식.

React, Angular, Vue 등 SPA(Single Page Application) 들이 이에 해당됩니다.

장점

1. 사용자는 필요한 부분만 읽어들이기 때문에 빠른 인터랙션이 가능하고, 필요한 부분만 갱신이 가능하다.

단점

1. 검색 엔진 최적화에서 불리함

 

 

SPA(Single Page Application) 이란?

👉🏻단일 페이지 애플리케이션으로 현재 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션이다.

연속되는 페이지 간의 사용자 경험을 향상시키고 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와준다.

 

그렇다면, a 링크로 페이지 이동은 어떤 방식일까?

a 링크를 클릭하게 되면 리소스의 경로가 URL의 Path에 저장되고, 서버는 해당 HTML을 클라이언트(브라우저)에 응답한다.

페이지 이동 시 서버에서 모든 자바스크립트를 다시 받게 된다. 

👉🏻a 링크는 서버 사이드 렌더링이다. 

 

 

Next.js 구동 방식

Next.js는 React 에서 SSR(서버 사이드 렌더링)을 쉽게 구현할 수 있도록 도와주는 프레임워크이다.

기본적으로 Next.js 는 모든 페이지를 미리 렌더링한다.

Next.js를 공부하다보면 Pre-rendering (미리 렌더링)이라는 단어가 엄청나게 많이 나온다.

Next.js 는 각 페이지에 대해 미리 HTML를 생성하고, 클라이언트 측 자바스크립트에서 모든 작업을 수행한다.

생성된 각 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다.

브라우저에서 페이지를 로드하면 해당 자바스크립트 코드가 실행되고 페이지가 완전히 상호작용하게 되는데 

이러한 과정을 Hydration 이라고 한다.

 

클라이언트 측에서 자바스크립트를 작업하기 전에 미리 HTML을 생성하는 것을 Pre-Rendering 기법이라고 한다.

Next.js 에서 Pre-Rendering 하는 하는 형태는 두 가지 형태가 있다.

• Static Generation (정적 생성) *권장 하는 형태 👉🏻 빌드 시 HTML 생성
• Server Side Rendering (서버 측 렌더링) 👉🏻 각 요청에 의해 HTML 생성

페이지 정적 생성을 사용하는 경우, 페이지 HTML은 빌드 시 생성 된다. 

빌드 시 생성이란, 즉 프로덕션에서 실행할 때 페이지 HTML이 생성 된다는 말이다. 👉🏻 'next build' 

이 HTML은 각 요청에 재사용되고, CDN에 의해 캐시 될 수 있다.

 

대 부분 페이지에는 정적 생성을 사용하고, 다른 페이지에는 서버 사이드 렌더링 방식을 사용하여

하이브리드 Next.js 앱을 만들 수 있다.

 

Next.js 에서 페이지 이동 방식은?

Next.js 에서 제공하는 Link 라이브러리를 사용하여 페이지를 이동할 수 있다.

기존에 사용하던 a 태그로의 페이지 이동은 Hyper Text Link, 서버에서 모든 자바스크립트를 내려 받아야 한다면,

반면에 Link 라이브러리를 사용한 페이지 이동은 클라이언트 사이드 렌더링 방식으로 해당 페이지의 자바스크립트만 로드된다.

EX. /blog 페이지로 이동 시 blog.js 번들만 로드 된다.

Next 에서 제공하는 Link 라이브러리의 특징 :

• 스피너가 보이지 않을 정도로 페이지의 로드가 빠르다.
• Link 는 브라우저의 History API 와 동일하게 작동한다.
• Link 는 작동 중 클라이언트 사이드 렌더링 이다.
• 뒤로 가기 버튼을 누르면 브라우저는 여전히 가동 중인 index.js 를 보유하고 있기 때문에 아무것도 로드하지 않고 /index 라우터를 로드 할 준비를 한다. 👉🏻모두 자동으로! 

 

 

계속 정리중...

 

 

 

참고

velog.io/@cyranocoding/Next-js-%EA%B5%AC%EB%8F%99%EB%B0%A9%EC%8B%9D-%EA%B3%BC-getInitialProps

https://velog.io/@cyranocoding/Next-js-구동방식-과-getInitialProps

https://velog.io/@gwak2837/Next.js-페이지-렌더링-이해하기

https://medium.com/@msj9121/next-js-제대로-알고-쓰자-8727f76614c9

https://velog.io/@hyounglee/TIL-93