<aside> 🧑🏻‍🏫 랜더링 방식은 크게 정적생성(Static Generation), SSR, **CSR**로 나뉘며, 우리가 Next.js에서 기대하는 렌더링은 정적생성과 SSR입니다. 물론 CSR을 해야할 때도 있습니다.

pages폴더 밑에 있는 모든 컴포넌트는 빌드시 HTML을 정적으로 생성하거나 요청이 올 때마다 서버측에서 HTML을 생성하는 SSR 렌더링을 합니다.

우리가 Next.js의 메서드를 어떻게 활용하느냐에 따라 빌드시점에 세가지 방식의 렌더링 중 하나로 결정됩니다.

</aside>

정적생성(Static Generation)

• 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML파일을 모두 갖고 있는 상태입니다.
• 페이지를 요청할 때 서버에서 갖고 있던 해당 페이지의 HTML을 응답합니다.
• Next.js에서 권장하는 렌더링 방식이며, 한 번 응답한 후에는 CDN(content delivery network)이 파일을 기억(캐쉬, cache)하여 응답하기 때문에 화면을 그리는 속도가 굉장히 빨라지고 불필요한 서버 요청이 줄어듭니다.
• 정적생성을 하기 위해서는 getStaticProps, getStaticPaths 메서드를 사용하여 데이터를 가져오거나, 데이터를 가져오는 메서드 없이 컴포넌트를 만들면 됩니다.
• 하지만 Static이 가능한 페이지는 따로 있죠.

SSR(Server Side Rendering)

• 정적생성은 데이터까지 포함된 완성된 HTML 파일이 이미 존재하여 페이지 요청이 있을 때 해당 페이지를 바로 응답합니다. SSR은 페이지 요청이 있으면 server side에서 api를 호출하고 데이터를 응답받아서 서버측에서 HTML을 완성시키고 클라이언트에 전달합니다.
  • 요청을 할 때마다 서버측에서 HTML을 만들 시간이 필요하기 때문에 HTML을 응답하는 시간이 오래걸릴 수 있다는 단점이 있습니다.
• 페이지를 요청할 때마다 SSR을 하고 싶은 경우는 **getInitialProps**나 **getServerSideProps**메서드를 사용해야합니다.

CSR(Client Side Rendering)

• Next.js로 프로젝트를 만들면서도 CSR이 필요한 경우는 분명 있습니다. CSR은 일단 빈 html을 응답하고, 그 후에 브라우저에서 데이터를 호출하여 자바스크립트에서 DOM을 조작하여 마저 HTML을 완성합니다.
• SEO가 필요없는 마이페이지, 관리자페이지 등은 클라이언트 측에서 데이터를 호출해도 됩니다. 이 때는 Next.js 메서드가 아닌 react에서 componentDidMount 라이프사이클이나 useEffect 훅에서 데이터를 요청합니다.