Next.js 렌더링 CSR SSR SSG ISR

Next.js에서는 다양한 렌더링 방식을 제공한다.
CSR, SSR, SSG, ISR 4가지 방식의 차이점과 각각 언제 사용하는지 알아보자!

CSR (Client Side Rendering)

빈 화면의 브라우저에서 빈 html과 Javascript를 다운받고, 다운로드가 완료되면 동적으로 DOM을 생성하여 화면을 그려낸다.

• CSR은 모든 로직이 담겨있는 Javascript 파일을 다운로드해야함 → 초기 로딩 느림
• 부드러운 화면 전환
• 초기에 빈 페이지를 가져오므로 검색엔진로봇이 크롤링할 수 없음
  → SEO 👎
  

---

SSR (Server Side Rendering)

웹 사이트를 요청받은 서버는 즉시 렌더링 가능한 html 파일을 만들고 viewable한 화면을 보여준다. 그 후 브라우저는 JS를 다운로드 받고 다운로드가 완료되면 interactive page가 된다.

• SSR은 필요한 부분의 파일만 서버에서 렌더링하여 가져옴 → 초기 로딩 속도가 빠른 편
• 하지만, 페이지 변경할 때마다 HTML 파일 자체를 서버에서 받아오기 때문에 화면 깜빡임 현상이 있다
• 초기에 html 렌더링된 화면이 보이므로 크롤링 가능
  → SEO 👍

---

SSG (Static Site Generation)

빌드를 하면 static 파일들(html, css, js, 이미지 등)로 구성된 폴더가 만들어진다.
해당 폴더를 유저에게 보여준다.

이미 만들어진 정적 페이지를 보여주는 것이므로

• 서버 부담이 적고, 응답 속도가 빠르다
• 이미 html 파일이 있으므로 SEO 👍
• 하지만, 페이지의 내용이 변경되면 새로 빌드하고 배포해야 한다.
  → 마케팅 페이지처럼 한번 만들고 난 후 잘 변경되지 않는 페이지에 적합

---

ISR (Incremental Static Regeneration)

빌드 시점에 페이지를 렌더링 한다는 점은 SSG와 일치하지만, 설정한 시간 마다 페이지를 새로 렌더링한다.
즉, revalidate 시간을 60으로 설정했을 떄, 변경사항이 발생하면 1분 후에 반영된다.

참고 자료

ISR 이 뭔가요? Next js 에서 구현해봅시다! | 코딩앙마 | Youtube
[Next js] SSR, SSG, ISR 이해하기 | bbaa3218 | velog