CSR, SSG, ISR, SSR, 하이브리드

Rendering: Server Components

Rendering: Server Components

Learn how you can use React Server Components to render parts of your application on the server.

CSR (Client Side Rendering)

개념

1. 아무것도 없는 페이지를 먼저 띄우고,

2. 렌더링을 위한 자바스크립트 코드들을 다 받은 후에,

3. 브라우저에서 그리기 시작함.

장점

• 서버의 부하가 적다. (data fetching, rendering 등 다 client에서 하므로)
• SSR은 매 요청마다 서버에서 렌더링해야 하므로 서버 비용이 증가

• 사용자 인터랙션에 대해 더 자연스럽고 빠르게 대응
• client 에서 모든 상태를 관리하므로, 즉각적인 변화를 바로 그려줄 수 있음.

단점

• 빈 html 페이지 이므로 SEO 가 어려움. (블로그, 커머스 등에서 불리)

<div id="root"></div>

• 페이지별 CDN 캐싱 등록 불가하여 CDN의 이점을 최대한 활용할 수 없음.

• TTV(Time to View)가 느리다. (빈 html로 오고, js를 받고 나서 렌더링을 하므로)

• 필요한 데이터를 client 측에서 요청해야 하는데, 따라서 api 요청에 필요한 key도 client 측에 같이 포함되어 전송되어야 하고, 주요 key 등이 노출될 수 있음.

SSG (Static Site Generation)

개념

장점

• 완성된 html을 CDN에 캐싱

• TTV가 매우 빠름.

• 자바스크립트 필요 없음.

• SEO 최적화에 매우 좋음.

단점

• 데이터가 정적임.

• 사용자별 정보 제공이 어려움.

• 내용이 업데이트 되지 않음. (업데이트 하려면 새로 빌드 해야함)

ISR (Incremental Static Regeneration)

개념

장점

• SSG의 모든 장점 그대로

• + 데이터가 주기적으로 업데이트 됨

단점

• 실시간 데이터는 아님.

• 사용자별 정보 제공은 어려움.

SSR (Server Side Rendering)

개념

• 실시간 데이터를 참조해야 하거나,

• 유저 맞춤 콘텐츠 라던가,

• 요청하는 순간에만 알 수 있는 내용

장점

• 서버 사이드 렌더링의 장점

• + 실시간 데이터를 사용

• + 사용자별 필요한 데이터 사용 가능

단점

• 요청할 때마다 렌더링을 시작하기 때문에 SSG, ISR 보단 느림.

• 요청할 때마다 서버에서 렌더링을 수행하므로 서버의 부하를 고려해야 함.

• 요청 시마다 서버에서 HTML을 생성하므로, CDN 캐싱이 어렵고, 성능 최적화를 위해 별도의 캐싱 전략(예: Edge caching)이 필요할 수 있음

하이브리드

• 한 페이지 내에서도 CSR과 SSR이 공존할 수 있고 (app route 에서)

• 전체 프로덕트 내에서도 페이지 별로 전략을 다르게 가져갈 수 있다.