CSR과 SSR에 대해 알아보기
CSR (Client-Side Rendering)란?
▶ 클라이언트 사이드 렌더링(CSR)은 클라이언트 측에서 JavaScript를 사용하여 콘텐츠를 렌더링하는 방식입니다. 브라우저는 초기 HTML과 JavaScript 파일을 받아오고, JavaScript가 실행되어 콘텐츠를 동적으로 생성하고 DOM에 삽입합니다.
CSR의 특징
초기 로드 시간: 초기 HTML은 최소한의 마크업과 JavaScript 파일만 포함하고 있어, 초기 로드 시간이 짧습니다. 그러나 JavaScript가 로드되고 실행될 때까지 사용자에게 빈 페이지가 표시될 수 있습니다.
네비게이션 속도: 초기 로드 후, 페이지 간 네비게이션은 매우 빠릅니다. 이는 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 가져와서 업데이트하기 때문입니다.
복잡한 상호작용: 클라이언트 측에서 동적으로 콘텐츠를 생성하고 업데이트할 수 있어, 복잡한 사용자 인터페이스와 상호작용을 쉽게 구현할 수 있습니다.
CSR의 장단점
장점
- 빠른 사용자 인터페이스: 초기 로드 이후의 네비게이션이 빠르며, 사용자와의 상호작용이 원활합니다.
- 개발 용이성: 서버와 클라이언트의 역할이 명확하게 분리되어, 클라이언트 측 개발이 간편합니다.
- 유연성: 클라이언트 측에서 다양한 기능을 동적으로 구현할 수 있습니다.
단점
- SEO: 초기 로드 시 빈 HTML이 제공되므로, 검색 엔진이 콘텐츠를 인덱싱하기 어려울 수 있습니다.
- 초기 로드 성능: JavaScript 파일이 로드되고 실행될 때까지 사용자는 빈 페이지를 보게 되므로, 초기 로드 성능이 저하될 수 있습니다.
- 첫 번째 렌더링 지연: 초기 페이지 로드가 완료될 때까지 사용자가 콘텐츠를 볼 수 없으므로 사용자 경험이 저하될 수 있습니다.
SSR (Server-Side Rendering)란?
▶ 서버 사이드 렌더링(SSR)은 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식입니다. 브라우저는 서버로부터 완전한 HTML 페이지를 받아와서 표시하며, JavaScript가 로드되고 실행된 후 클라이언트 측에서 상호작용이 가능합니다.
SSR의 특징
초기 로드 시간: 서버에서 완전한 HTML을 제공하므로, 초기 로드 시 사용자에게 즉시 콘텐츠를 표시할 수 있습니다. 이는 SEO에도 유리합니다.
네비게이션 속도: 페이지 간 네비게이션 시, 서버에 요청하여 새로운 HTML 페이지를 받아와야 하므로 클라이언트 사이드 렌더링보다 느릴 수 있습니다.
SEO: 서버에서 렌더링된 완전한 HTML을 제공하므로, 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있습니다.
SSR의 장단점
장점
- SEO: 완전한 HTML을 제공하므로, 검색 엔진 최적화(SEO)에 유리합니다.
- 초기 로드 성능: 초기 로드 시 완전한 HTML이 제공되어, 사용자에게 즉시 콘텐츠를 표시할 수 있습니다.
- 첫 번째 렌더링 속도: 초기 페이지 로드 시 사용자에게 콘텐츠를 빠르게 제공할 수 있어 사용자 경험이 향상됩니다.
단점
- 복잡성: 서버와 클라이언트의 역할이 혼합되어 개발이 복잡할 수 있습니다.
- 네비게이션 성능: 페이지 간 네비게이션 시 서버 요청이 필요하므로, 클라이언트 사이드 렌더링보다 느릴 수 있습니다.
- 서버 부하: 모든 요청에 대해 서버에서 HTML을 렌더링해야 하므로, 서버 부하가 증가할 수 있습니다.
CSR과 SSR의 비교
| 특성 | CSR (Client-Side Rendering) | SSR (Server-Side Rendering) |
|---|---|---|
| 초기 로드 시간 | JavaScript 실행 후 콘텐츠 표시 | 즉시 콘텐츠 표시 |
| 네비게이션 속도 | 빠름 | 느림 |
| SEO | 낮음 | 높음 |
| 개발 용이성 | 용이 | 복잡 |
| 첫 번째 렌더링 지연 | 있음 | 없음 |
| 서버 부하 | 낮음 | 높음 |
React에서 CSR과 SSR 구현
CSR 구현
- React 애플리케이션에서 기본적으로 Create React App을 사용하여 CSR을 구현할 수 있습니다.
1
2
3
npx create-react-app my-app
cd my-app
npm start
SSR 구현
- Next.js는 React 기반의 SSR을 쉽게 구현할 수 있는 프레임워크입니다. Next.js를 사용하면 서버 사이드 렌더링을 쉽게 설정할 수 있습니다.
1
2
3
npx create-next-app my-ssr-app
cd my-ssr-app
npm run dev
결론
▶ CSR과 SSR은 각각의 장단점이 있으며, 애플리케이션의 요구 사항에 따라 적절히 선택하여 사용할 수 있습니다.
CSR은 복잡한 사용자 인터페이스와 빠른 네비게이션이 필요한 경우 유용하며, SSR은 SEO가 중요하거나 초기 로드 성능을 향상시키고자 할 때 유리합니다. 두 방식을 적절히 조합하면, 사용자 경험과 성능을 모두 최적화할 수 있습니다.
이렇게 오늘은 React의 CSR과 SSR에 대해 알아봤는데요,
각 방식의 특성과 장단점을 잘 이해하고 활용하면, 더 나은 React 애플리케이션을 개발할 수 있을 것입니다. 그렇다면 저는 다음에 또 다른 유익한 내용을 들고 오도록 하겠습니다 😁!