[240203] CSR, SSG, SSR

용어 알기

✅ 하이드레이션(hydration)
1. JS 코드가 실행되어 2. JS로직과 HTML이 연결 후 3. 유저 상호작용이 가능하도록 하는 것
✅ 요청
페이지 요청을 의미

✅ TTFB(Time To First Byte) ⏩️ 데이터가 브라우저에 도달
✅ FCP(First Contentful Paint) ⏩️ 유저가 컨텐츠를 볼 수 있음
✅ LCP(Largest Contentful Paint) ⏩️ 유저가 주요 컨텐츠를 볼 수 있음
✅ TTI(Time To Interactive) ⏩️ 유저와 상호작용 가능

 

---

CSR (Client Side Rendering)

데이터 페칭 이후에 렌더링.

1. User Request
2. CDN이 JS로 접근할 수 있는 링크와 HTML 파일을 서빙
3. 브라우저는 HTML 다운로드 (빈 화면 보여짐), JS 다운로드 시작
4. JS 다운로드 이후 렌더링
5. 유저가 화면 볼 수 있음 && 유저 상호작용 가능

 

---

SSG (Static Site Generation)

데이터 페칭 이전에 렌더링.

1. User Request
2. CDN은 빌드 시 렌더링된 HTML 서빙
3. 브라우저는 CDN 서버에서 데이터를 가져와 HTML 즉시 렌더링, JS 다운로드 시작
4. 유저가 화면 볼 수 있음
5. JS 다운로드 이후 하이드레이션
6. 유저 상호작용 가능

 

---

SSR (Server Side Rendering)

데이터 페칭 이전에 렌더링.

모든 Request에 대해 HTML, JS 새롭게 생성 > 하이드레이션?

1. User Request
2. HTML을 서버에서 렌더링
3. 브라우저는 서버에서 데이터를 가져와 HTML 즉시 렌더링, JS 다운로드 시작
4. 유저가 화면 볼 수 있음
5. JS 다운로드 이후 하이드레이션
6. 유저 상호작용 가능

 

---

어떨 때 CSR, SSG, SSR을 쓸까?

	SSR	SSG	CSR
	사용자 요청시마다 서버에서 렌더링	빌드 시 렌더링	사용자 최초 요청 시 브라우저에서 렌더링
	👍 요청에 필요한 리소스만 다운로드 >> 초기 로딩 속도 빠름 👍 FCP 빠름 >> 무언가를 볼 수 있다 👍 서버에서 렌더링 >> SEO 유리 👍 보안성 높음	👍 TTFB 빠름 👍 페이지 리프레시 없이 네비게이션 가능 👍 정적 파일로 구성 >> CDN 캐싱 가능 👍 FCP 빠름 >> 무언가를 볼 수 있다 👍 빌드 시 렌더링 >> SEO 유리 👍 보안성 높음	👍 TTFB 빠름 👍 페이지 리프레시 없이 네비게이션 가능 👍 정적 파일로 구성 >> CDN 캐싱 가능
	👎 TTFB 느림 👎 페이지 이동 속도 느림 👎 캐싱 불가	👎 사용자별 정보 제공 어려움	👎 전체 리소스만 다운로드 >> 초기 로딩 속도 느림 👎 FCP 느림 >> 빈 화면 보게 된다 👎 초기 빈 화면 >> SEO 불리 👎 보안성 낮음
	✅ 최초 로딩이 빨라야 하는 서비스 ✅ SEO 필요 서비스 ✅ 네트워크 느릴 때	✅ 사용자 요청과 화면이 관련없을 때 (서비스 소개 페이지 등)	✅ 상호작용 요소가 많은 서비스 (아예 렌더링 막기) ✅ 네트워크 빠를 때

 

---

Next.js 🟰 SSR ?

Pre-Rendering 이긴 하지만 기본적으로 SSR은 아니다.

Page Router

Next 13 이전의 page router 에서는 getServerSideProps으로 데이터를 받으면 SSR이 가능하다.

export default function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}

⏩️ 페이지 단위로 정적인 리소스 생성

App Router (Next 13+)

⏩️ 컴포넌트 단위로 정적인 리소스 생성

 

---

참고자료

The future of rendering in React

 

Rendering: Server-side Rendering (SSR) | Next.js