[Next.js] 어떤 렌더링 방식을 사용해야 할까?

CSR, SSR, SSG 등을 구현하고자 할때, 각각의 렌더링 방식에 대한 특징을 파악하고 구현하는 것이 중요하겠다는 생각이 들었다. 어떤 방식이 무조건 뛰어나거나 혹은 좋지 않은 것이 아니기때문이다. 내가 만들 서비스에 따라, 표시되는 정보의 특징에 따라 효율적인 렌더링 방식을 선택하기로 했다.

렌더링 방식

CSR

• SEO가 필요 없을 때
• 페이지에 자주 업데이트 되는 정보가 포함되어 있을 때
• Pre-render가 필요없을 때

CSR + Pre-rendering

• 첫 data의 정보는 SSR을 통해 가져오고, 이후에 fetching된 data를 render 해야 할 때

SSR

• SEO가 필요할 때
• Pre-render가 필요할 때
• Build 후에도 변동하는 data가 있을 때

SSG

• SEO가 필요할 때
• Pre-render가 필요할 때
• Build 후에도 변동하는 data가 없을 때 (build 이후, 값 변경 불가)
• 아주 빠른 첫 로딩속도를 구현하고자 할 때 (CDN에 캐싱됨)

ISR