CSR (Client Side Rendering)
- 설명: React 앱에서 CSR은 브라우저가 모든 JavaScript 파일을 다운로드하고 실행한 후에 UI가 렌더링되는 방식입니다.
- 렌더링 과정:
- 첫 요청: 사용자가 웹사이트에 접근하면 브라우저는 기본적인 HTML 파일(대부분 빈
<div>로 이루어진)과 JavaScript 파일을 다운로드합니다. - JavaScript 실행: React의 JavaScript 코드가 실행되면서 컴포넌트들이 브라우저에서 렌더링되고, 최종적으로 화면이 보이게 됩니다.
- 첫 요청: 사용자가 웹사이트에 접근하면 브라우저는 기본적인 HTML 파일(대부분 빈
- 장점:
- 빠른 개발: CSR 방식은 개발 속도가 빠르고 상태 기반의 SPA(Single Page Application)를 쉽게 만들 수 있습니다.
- 유저 상호작용 강화: JavaScript로 UI 업데이트가 더 쉽고 빠르게 이루어집니다.
- 단점:
- 빈 화면 문제: 사용자가 사이트에 도착한 순간에는 브라우저가 JavaScript를 다운로드하고 실행하기 전까지 빈 화면을 보게 됩니다.
- SEO 문제: 검색 엔진 크롤러는 페이지에서 주로 HTML을 읽기 때문에, JavaScript 기반의 콘텐츠는 잘 인덱싱되지 않을 수 있습니다. 이로 인해 SEO 최적화가 어려워질 수 있습니다.
SSR (Server Side Rendering) - Next.js
- 설명: Next.js와 같은 프레임워크는 SSR 방식을 지원합니다. 서버에서 React 컴포넌트를 실행하여 미리 HTML을 생성한 후, 브라우저에 해당 HTML을 전달합니다.
- 렌더링 과정:
- 서버에서 HTML 생성: 사용자가 페이지를 요청하면 서버에서 React 코드를 실행하여 완전한 HTML을 생성합니다.
- 브라우저에 전달: 서버에서 생성된 HTML이 사용자에게 즉시 전달되기 때문에 사용자는 완성된 페이지를 바로 볼 수 있습니다.
- JavaScript 하이드레이션: 브라우저에서 JavaScript가 로드되면서 페이지의 인터랙티브 기능들이 활성화됩니다.
- 장점:
- 빠른 초기 로딩: 사용자가 페이지를 요청하면 완성된 HTML을 제공받기 때문에 빈 화면 없이 페이지 콘텐츠를 즉시 볼 수 있습니다.
- SEO 친화적: 서버에서 HTML을 미리 생성해 주기 때문에 검색 엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있어 SEO 최적화가 용이합니다.
- JavaScript 없이도 작동 가능: 서버에서 미리 HTML을 생성하기 때문에 JavaScript를 사용할 수 없는 환경에서도 페이지의 기본 콘텐츠가 표시됩니다.
- 단점:
- 서버 부하: 매 요청마다 서버에서 HTML을 생성해야 하기 때문에 서버에 부하가 생길 수 있습니다. 특히 트래픽이 많을 경우 서버 리소스 관리가 중요해집니다.
- 구현의 복잡성: SSR은 CSR보다 구현이 복잡할 수 있습니다. 상태 관리나 비동기 데이터 요청 등을 다룰 때 추가적인 관리가 필요합니다.
Next.js의 동작 방식 - 추가 내용
-
Mixed Rendering:
- Next.js는 CSR과 SSR을 동시에 사용할 수 있습니다.
- 페이지나 컴포넌트별로 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 혼합해서 사용할 수 있는 유연한 구조를 가집니다.
- 특정 컴포넌트는 서버에서 미리 렌더링하고, 나머지 부분은 브라우저에서 CSR을 통해 렌더링하는 방식이 가능합니다.
-
Static Site Generation (SSG):
- Next.js는 Static Site Generation도 지원합니다. 이는 빌드 타임에 HTML을 생성하여 CDN에 배포하는 방식으로, 요청 시마다 서버에서 렌더링할 필요가 없기 때문에 빠른 응답과 저렴한 비용을 가집니다.
-
Incremental Static Regeneration (ISR):
- Next.js의 ISR 기능을 통해 정적 페이지를 빌드 타임에 생성하면서도, 정해진 주기에 따라 최신화된 데이터를 반영할 수 있습니다. SSR의 유연성과 SSG의 성능을 모두 갖춘 방식이라고 할 수 있습니다.
보충 설명
- Hydration: SSR에서 서버에서 생성한 HTML이 브라우저에서 JavaScript와 결합되어 상호작용 가능한 SPA로 변화하는 과정입니다.
- "use client": Next.js에서 컴포넌트를 클라이언트 사이드에서만 실행하도록 지정할 수 있습니다. 이는 SSR과 CSR을 조합하여 최적화된 결과를 제공하기 위한 방식입니다.
최종 정리
- CSR: JavaScript로 모든 렌더링을 클라이언트에서 처리하는 방식. 초기 빈 화면 문제와 SEO 문제를 가질 수 있음.
- SSR (Next.js): 서버에서 미리 HTML을 렌더링하여 브라우저에 전달. 초기 로딩이 빠르고 SEO에 유리하지만 서버 부하가 높음.
- Next.js의 Mixed Rendering: SSR, CSR, SSG, ISR을 혼합하여 사용할 수 있는 유연성과 다양한 최적화 방법을 제공함.
YOLO