cheolung.dev

CSR | SSR | SSG | ISR

Web
2024년 4월 5일
/thumbnail/default.jpeg

목차

CSR (Client Side Rendering)

브라우저에서 JavaScript를 실행해 모든 DOM을 렌더링한다.

  • SPA로 동작
  • 서버 요청 부담이 적음
  • SEO 불리, 초기 로딩속도 느림, 클라이언트에서 API 요청을 하기 때문에 보안에 취약

동작 방식

영상으로 보기
  1. 첫 페이지 로드 시 클라이언트는 CDN에서 script, style 태그만이 포함된 HTML 페이지를 로드 받는다. (유저 입장에서는 빈 페이지가 보이게 된다.)
  2. 로드된 HTML 페이지의 script 태그 내용 기반으로 JavaScript 번들을 불러온다.
  3. 불러온 번들을 브라우저에서 실행해 컨텐츠가 로드된다.
  4. 데이터 fetch 또한 브라우저에서 실행된다.
  5. 유저가 새로운 페이지로 이동하면 새로운 레이아웃이 바로 렌더링된다. (2번 과정에서 모든 JavaScript 번들을 불러왔기 때문에)

ex) React, Vue, Angular의 기본 동작

SSR (Server Side Rendering)

유저가 페이지를 요청할 때마다 HTML 문서가 생성되는 방식

  • MPA로 동작
  • SEO 유리, 서버에서 API를 요청하기 때문에 보안이 좋음, 초기 로딩속도 빠름
  • 서버 요청 부담이 커짐

동작 방식

영상으로 보기
  1. 클라이언트가 서버에 첫 번째 페이지를 요청한다.
  2. 서버에서 필요한 데이터를 fetch 후, 컨텐츠를 렌더링한다.
  3. 클라이언트에서는 컨텐츠가 모두 렌더링된 정적 HTML을 전달받는다.
  4. 유저가 새로운 페이지로 이동하면 1-3번까지의 과정을 다시 반복한다.

ex) Next.js(no-store), Nuxt.js

Universal Rendering

유저의 첫 요청시에만 SSR을 수행하고, Hydration 과정을 거친 후엔 CSR 처럼 동작한다.

  • Hydration : 미리 렌더링된 HTML에 자바스크립트를 결합하여서 이벤트가 동작할 수 있도록 만드는 과정 (SSR에서 만들어진 매마른 페이지에 동적 이벤트라는 수분 공급을 해주는 과정! )
  • CSR과 SSR 의 단점을 해소하고 장점만 챙긴 전략
  • hydration과정 전까지는 페이지와 상호작용할 수 없다는 단점이 존재

동작 방식

영상으로 보기
  1. SSR 동작 방식의 1~3 진행, 대신 초기에 모든 페이지를 서버에서 가져온다.
  2. 추가적으로, JavaScript 번들을 fetch해 hydration 과정을 거친다. (이 과정을 거치기 전까진, UI 만 보일뿐 상호작용을 할 수 없다.)
  3. hydration 이후, 유저는 페이지와 상호작용할 수 있으며 앱은 SPA처럼 동작한다.
  4. 새로운 페이지로 이동하면 새로운 레이아웃이 바로 렌더링된다.

SSG (Static Site Generation)

빌드 시점에 페이지 컨텐츠를 미리 생성해놓는 전략

  • SEO 매우 유리, 빠른 렌더링 속도

동작 방식

영상으로 보기
  1. 빌드 시점에 렌더링 및 데이터 fetch를 모두 완료해 모든 페이지가 정적인 상태로 존재한다
  2. 그 후에는 CDN으로 캐시가 되어지고 요청마다 HTML을 재사용한다. (클라이언트에서 전송)

ex) Gatsby, Next.js(generateStaticParams, force-cache)

ISR (Incremental Static Regeneration)

SSG의 기본 동작과 동일하지만, 설정한 시간마다 데이터를 다시 fetch(페이지를 새로 렌더링) 한다.

  • SSG와 SSR의 하이브리드 솔루션

ex) Next.js(revalidate)

⭐️ 상황마다 적절한 렌더링 방식 사용하기

  • SEO 적용이 크게 중요하지 않거나 유저 상호작용이 많다면  CSR (관리자 대시보드)
  • SEO가 필요하고 업데이트가 빈번한 페이지  SSR
  • 정적 문서로 충분한 화면이면서 빠른 HTML 문서 반환이 필요하다면 SSG (개발 블로그, 랜딩 페이지)
  • 컨텐츠가 동적이지만 자주 변경되지 않는 경우 ISR

참고 자료