일반적으로 웹의 렌더링 방식에 대해 알아보면 이를 크게 CSR(Client Side Rendering)과 SSR(Server Side Rendering)으로 나누고 이는 페이지를 클라이언트 사이드에서 그리는지, 서버에서 그리는지에 따라 정해진다. 하지만, Next.js의 렌더링 방식에 대해 학습을 하다보면 렌더링방식을 단순히 CSR과 SSR 두 가지 방식으로만 나누는 것이 아니라, 프로젝트에서 코드를 어떻게 짜는지에 따라 좀 더 세부적으로 나누어서 설명한다. 특히, SSR과 관련된 부분이 그러한데, App router 방식을 기준으로 Next.js에서 렌더링 방식이 어떻게 구분되고 어떻게 사용되는지, 이에 더하여 이 렌더링 방식에 따라 데이터 fetching이나 배포 전략을 어떻게 구성할 수 있을지에 대해 학습하고 고민해보려한다.
*이 포스트의 내용은 대부분 App router를 기준으로 한다. 다만, Page router의 내용과 관련이 있는 부분만은 가볍게 짚고 넘어갈 예정.
기본적으로, Next.js에서는 각 페이지마다 다른 렌더링 방식을 적용하는게 가능하다. 코드를 어떻게 작성하는지에 따라 달라지게 된다. (이 각 페이지라는 것은 각 route의 segment(ex /about, /project) 혹은 컴포넌트 단위로 렌더링이 적용되는 것으로 보인다.)
Next.js는 기본값으로 Server Component를 사용한다. 서버 컴포넌트란 작성한 컴포넌트가 서버측에서 만들어지며 이와 관련된 코드들 또한 서버측에서 실행된다는 뜻이다. 이 서버 컴포넌트의 렌더링 방식은 3가지로 나뉜다.
일반적인 방식으로 Next.js에서 코드를 작성했을 때의 기본값으로 Next.js는 Static Rendering을 한다. 이 말은, 각 route들 혹은 컴포넌트가 build시에 렌더링된다는 뜻이다. 이는 Page router에서 렌더링 방식을 설명하기 위해 자주 쓰인 pre-rendering과 같은 뜻이다. 빌드시에 만들어진 컴포넌트의 렌더링 결과는 캐시되며, 원할시에 CDN으로 푸쉬될 수 있다.