소개
React 기반 프로젝트에서, 페이지 렌더링 방식에 대해 결정을 내려야 하는 경우가 종종 있다. 이 포스트에서 클라이언트 사이드 라우팅(CSR), 서버 사이드 렌더링(SSR), 그리고 정적 사이트 생성(SSG)의 개념과 각각의 장단점에 대해 알아보겠다.
1. 클라이언트 사이드 렌더링 (CSR)
클라이언트 사이드 렌더링은 React 애플리케이션이 초기 로드 후에 페이지 전환을 처리하는 방식이다. 사용자가 다른 페이지로 이동할 때 서버에 새로운 HTML을 요청하지 않는다. 대신, 브라우저에서 JavaScript를 사용하여 필요한 데이터를 가져와 화면을 업데이트한다.
CSR은 단일 페이지 애플리케이션(SPA)의 핵심 개념이며, 빠른 페이지 전환과 상호작용성을 제공하지만, 초기 로드 속도가 느리고, 검색 엔진 최적화(SEO)에 문제가 있다.
2. 서버 사이드 렌더링 (SSR)
서버 사이드 렌더링은 React 컴포넌트를 서버에서 렌더링하여 클라이언트에게 완성된 HTML을 제공하는 방식이다. 사용자가 애플리케이션에 접속할 때마다 서버는 요청에 따라 적절한 컴포넌트를 렌더링하고 초기 상태를 로드하여 클라이언트에게 전달한다.
SSR은 초기 로드 속도가 빠르고 SEO에 이점을 제공하는데, 서버에서 렌더링하다보니, 동적인 콘텐츠가 많은 페이지에서 성능 이슈가 발생할 수 있다.
3. 정적 사이트 생성 (SSG)
정적 사이트 생성은 사전에 빌드된 정적 파일을 생성하여 서버에서 제공하는 방식이다. React 애플리케이션은 빌드 시간에 모든 페이지를 사전에 렌더링하고, 각 페이지에 필요한 데이터를 포함한 정적 파일을 생성한다. 이후에는 서버가 단순히 정적 파일을 제공하기 때문에 빠른 로딩 속도와 안정성을 제공한다.
정적 사이트 생성은 정적 콘텐츠에 적합하며, 콘텐츠에 수정이 있는 경우, 업데이트를 위해 재빌드해야 합니다.
CSR, SSR, SSG 비교
| 초기 로드 속도 | SEO | 성능 | |
|---|---|---|---|
| CSR | 느림 | 문제 있음 | 빠름 |
| SSR | 빠름 | 좋음 | 동적 페이지에서 느림 |
| SSG | 빠름 | 좋음 | 빠름 |
결론
각각의 접근 방식에는 고유한 장단점이 있으며, 프로젝트 요구사항과 우선순위에 따라 선택해야 한다. 클라이언트 사이드 렌더링은 대화형 웹 애플리케이션에 적합하며, 초기 로드 속도에 민감하지 않은 경우 유용하다. 서버 사이드 렌더링은 SEO와 초기 로드 속도가 중요한 경우에 추천된다. 정적 사이트 생성은 콘텐츠가 상대적으로 정적이며 빠른 성능을 요구하는 경우에 이상적이다.
React에서는 Next.js와 Gatsby와 같은 프레임워크와 라이브러리가 CSR, SSR, SSG를 구현하는 데 도움을 주고 있다. 프로젝트 요구사항과 목표에 따라 적절한 도구를 선택하여 React 개발 경험을 최적화할 수 있다.