렌더링 전략이란 웹 페이지 또는 웹 애플리케이션을 웹 브라우저에 제공하는 방법을 의미합니다. Gatsby와 같은 프레임워크는 정적으로 생성한 페이지를 제공하기에 알맞은 프레임워크죠.
Next.js는 어떤 페이지를 빌드 시점에 정적으로 생성하고 어떤 페이지를 실행 시점에 동적으로 제공할 것인지 쉽게 정할 수 있습니다. 애플리케이션의 특정 페이지에 대한 요청이 있을 때마다 페이지를 다시 생성할 수도 있습니다. 또한 반드시 클라이언트에서 렌더링해야 할 컴포넌트도 지정할 수 있어서 개발이 훨씬 쉽습니다.
이 장에서는 아래와 같은 내용을 다룹니다.
- 서버 사이드 렌더링을 사용해서 각 요청별로 페이지를 동적으로 렌더링하는 방법
- 특정 컴포넌트를 클라이언트에서만 렌더링하는 방법
- 빌드 시점에 정적 페이지를 생성하는 방법
- 증분 정적 재생성으로 정적 페이지를 재생성하는 방법
SSR(Server Side Rendering)
서버 사이드 렌더링은 웹 페이지를 제공하는 가장 흔한방법입니다. PHP, 루비, 파이썬과 같은 언어의 경우에는 HTML을 웹 브라우저로 전송하기 전에 서버에서 전부 렌더링합니다. 그리고 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링합니다.
Next.js도 마찬가지로 각 요청에 따라 서버에서 HTML 페이지를 동적으로 렌더링하고 웹 브라우저로 전송할 수 있습니다. 또한 서버에서 렌더링한 페이지에 스크립트 코드를 집어넣어서 나중에 웹 페이지를 동적으로 처리할 수 있는데 이를 하이드레이션이라고 합니다.
하이드레이션은 화학 용어로 수화 작용, 즉 어떤 물질이 물을 흡수하거나 물에 어떤 물질이 녹아서 마치 하나의 분자 상태처럼 바뀌는 현상을 의미합니다. 리액트에서의 하이드레이션은 서버 측에서 생성한 HTML 페이지에 클라이언트 측에서 실행하는 자바스크립트 코드를 추가해서 애플리케이션 상태를 관리하고 렌더링하는 기법을 의미합니다. 즉, 서버 측에서 생성한 HTML 페이지를 구성하는 각각의 DOM 객체에 필요한 자바스크립트 코드를 추가해서 클라이언트가 동적으로 렌더링할 수 있는 것입니다. 서버 측에서 렌더링한 DOM과 클라이언트가 렌더링한 DOM이 한데 섞여 싱글 페이지 애플리케이션
블로그 사이트 만들어서 어떤 사람이 작성한 모든 글을 한 페이지에서 렌더링한다고 생각해보십시다. 이런 페이지야말로 SSR을 적용하기 좋습니다. 사용자가 페이지에 접근하면 서버는 페이지를 렌더링해서 결과로 생성한 HTML 페이지를 클라이언트로 전송합니다. 그러고 브라우저는 페이지에서 요청한 모든 스크립트를 다운로드한 다음 DOM 위에 각 스크립트 코드를 하이드레이션합니다.