1️사전 렌더링

Next.js는 React의 한계를 극복하기 위해 등장한 프레임워크입니다. 브라우저에서만 해석되는 특징으로 인해 검색엔진 최적화 등에 불리한 점을 극복하려고 했죠. 때문에 서버에서 HTML을 미리 완성해두는 사전 렌더링 기법이 발달하게 됐습니다. Next.js가 사용하는 사전 렌더링 기법을 살펴보겠습니다.

Server-side Rendering

줄여서 SSR이라고 부르는 서버 사이드 렌더링 기법은 Next.js에서 제공하는 가장 기본적인 사전 렌더링 기법입니다.

브라우저의 요청이 있을 때 서버에서 HTML을 완성해서 브라우저로 전달해줍니다. 여기서 '브라우저의 요청이 있을 때'라는 단서가 붙습니다. 이는 Next.js로 만든 프로그램이 실행되고 있는 런타임(Runtime)을 의미합니다.

Static Site Generation

SSG라고 부르는 정적 사이트 생성 기법은 블로그와 같은 정적 서비스에서 많이 사용하는 사전 렌더링 기법입니다. SSG가 블로그에서 많이 사용되는 이유는 데이터가 변경될 여지가 적기 때문입니다. 블로그 글은 작성되면 데이터는 그 후로 좀처럼 변하지 않습니다. 이처럼 변화가 적기 때문에 '정적 데이터'라고 부릅니다. 정적 데이터로 만든 서비스가 구현되면 정적 서비스, 정적 사이트가 됩니다.

데이터가 정적이라는 특성 때문에 SSR과 달리 HTML은 빌드 시점(Build time)에 완성됩니다. HTML로 변환된 글이 빌드된 결과물로 배포됩니다.

Incremental Static Regeneration

ISR이라로 부르는 증분 정적 재생성 기법은 SSG의 단점을 보완하는 사전 렌더링 기법입니다. 정적 사이트로 데이터가 변화할 여지가 적지만 완전히 정적이지만은 않은 경우에 활용합니다. 게시글의 조회수 등을 표현하기 위해 사용됩니다.

ISR은 SSG와 같이 빌드 시점에 HTML을 만들어냅니다. 이후 지정한 시간이 지나 페이지에 접근하면 서버에서 HTML을 다시 생성합니다. 덕분에 추가 배포 과정 없이도 브라우저에 새로운 HTML을 전달할 수 있게 됩니다.

Next.js에서는 Time-based revalidation, On-demand revalidation을 모두 지원합니다. 이 강의에서는 Time-based revalidation를 기준으로 설명합니다.

Partial Prerendering

PPR이라고 줄여 부르는 부분 사전 렌더링입니다. Next.js 14 버전에서 등장했습니다. 이 렌더링 기법에서는 두 가지 개념을 이해해야 합니다.

쉘(Shell)과 홀(Holes)입니다. 쉘은 정적으로 사전에 렌더링 되는 영역입니다. 빌드 시점에 미리 만들어지는 정적인 영역입니다. SSG와 같죠. 나머지 홀은 동적으로 만들어집니다. SSR과 같은 시점입니다. SSG와 SSR의 장점을 섞은 방식이죠.