현대 웹 개발에서 성능과 사용자 경험은 매우 중요한 요소입니다. 웹 페이지가 얼마나 빠르게 로드되는지와 초기 화면이 얼마나 빠르게 보이는지는 사용자 만족도에 큰 영향을 미칩니다.
이러한 문제를 해결하기 위해 다양한 렌더링 방식이 등장했고, 특히 React와 Next.js는 각기 다른 방식으로 접근합니다. 이번 글에서는 React의 클라이언트 사이드 렌더링(CSR)과 Next.js의 사전 렌더링(Pre-rendering) 방식을 비교해보겠습니다.
🎄 클라이언트 사이드 렌더링(CSR)이란?
클라이언트 사이드 렌더링은 웹 페이지의 모든 작업을 브라우저가 클라이언트 측에서 처리하는 방식입니다. 이 방식에서는 서버가 브라우저에게 빈index.html 파일과 JavaScript 번들 파일을 전송하고, 브라우저가 이를 받아 빈화면을 렌더링한 후에 JavaScript 코드를 실행하면서 컨텐츠를 렌더링합니다.
🏀 클라이언트 사이드 렌더링 장점
- 빠른 페이지 전환
클라이언트 사이드 렌더링 방식에서는 초기에 JavaScript 번들이 로드되고 실행되면 이후 페이지 간 이동은 매우 빠르게 이루어집니다. 페이지 이동 시마다 전체 HTML을 다시 불러오는 것이 아니라, 브라우저가 이미 로드된 JavaScript를 사용하여 화면을 업데이트하기 때문입니다. 그 결과 앱과 유사한 매끄러운 사용자 경험을 제공하며, 빠른 상호작용(TTI)을 유지할 수 있습니다.
- 역동적인 UI 구성
클라이언트 사이드 렌더링 방식에서는 JavaScript 코드로 UI가 생성되고 업데이트되므로, 실시간 데이터 변경이나 다양한 상호작용이 필요한 페이지에서 유연하게 동적 콘텐츠를 렌더링할 수 있습니다. 이로 인해 사용자와 상호작용하는 애플리케이션, 대화형 UI가 필요한 프로젝트에 적합합니다.
🏐 클라이언트 사이드 렌더링 단점
- 초기 로딩 속도 저하
클라이언트 사이드 렌더링은 초기 로딩 시 서버에서 index.html이라는 빈 HTML 파일과 대용량 JavaScript 번들을 브라우저에 전송합니다. 브라우저는 이 JavaScript 파일이 모두 로드되고 실행될 때까지 실제 콘텐츠를 화면에 표시하지 못하기 때문에, 첫 콘텐츠가 표시되는 시점(FCP)이 다소 지연될 수 있습니다. 그 후에도 JavaScript가 모두 로드될 때까지 사용자가 페이지와 상호작용할 수 없어, 상호작용 가능 시점(TTI)까지 추가 시간이 걸리는 경우가 많습니다.
- SEO의 한계
클라이언트 사이드 렌더링은 브라우저가 JavaScript를 실행해 HTML을 구성하므로, 서버에서 미리 렌더링된 HTML을 제공하지 않습니다. 이로 인해 검색 엔진 크롤러가 페이지를 수집할 때 빈 HTML만 가져오게 되어 SEO에 불리할 수 있습니다. 특히 CSR 방식은 콘텐츠가 JavaScript 실행 후에만 렌더링되므로, 검색 엔진이 페이지 콘텐츠를 제대로 인식하지 못할 위험이 있습니다.
- FCP (First Contentful Paint) : 브라우저가 페이지 로딩을 시작한 시점부터 사용자에게 콘텐츠(텍스트, 이미지 등)가 처음으로 화면에 나타나는 데 걸리는 시간.
- TTI (Time to Interactive): 페이지가 완전히 로드되어 사용자가 상호작용할 수 있는 상태가 되는 데 걸리는 시간.
🎇 사전 렌더링(Pre-rendering)은?
서버에서 Javascript를 실행하여 렌더링 된 HTML을 생성하여 브라우저에게 보내는 사전 렌더링 방식은 빠른 응답과 SEO 개선을 도모합니다. Next.js는 사전 렌더링 방식으로 세 가지를 제공합니다. 서버 사이드 렌더링(SSR: Server-Side Rendering)과 정적 사이트 생성(SSG: Static Site Generation) 그리고 SSG의 확장인 증분 정적 재생성(ISR: Incremental Static Regeneration)입니다.
🎀 서버 사이드 렌더링(SSR: Server-Side Rendering)
Next.js의 가장 기본적인 사전 렌더링입니다. 서버 사이드 렌더링은 사용자가 페이지를 요청할 때 서버가 최신 데이터를 반영해 HTML 파일을 생성하여 응답합니다. 이는 서버에서 HTML을 완성한 상태로 전송하기 때문에 브라우저는 이를 그대로 화면에 표시할 수 있습니다.
🧀 서버 사이드 렌더링 장점
- SEO 최적화: 서버 사이드 렌더링은 서버에서 HTML을 완성한 후 전송하므로, 검색 엔진 크롤러가 페이지의 완전한 콘텐츠를 확인할 수 있어 SEO에 유리합니다.
- 첫 페이지 로딩 속도 향상: 브라우저가 처음부터 콘텐츠가 채워진 HTML을 받기 때문에 초기 로딩 시 사용자에게 빠른 첫 화면을 제공합니다.
🎀 정적 사이트 생성(SSG: Static Site Generation)
정적 사이트 생성은 페이지를 빌드하는 시점에 미리 HTML 파일을 생성하여 CDN(Content Delivery Network)에 배포합니다. 이후 사용자가 페이지를 요청하면, 사전에 생성된 HTML을 매우 빠르게 전송할 수 있습니다.
🧀 정적 사이트 생성
- 정적 콘텐츠에 유리: SSG는 주기적인 데이터 업데이트가 필요하지 않은 경우나 정적인 콘텐츠에 적합합니다. 한 번 생성된 HTML이 빠르게 제공되기 때문에, 초기 로딩 속도가 매우 빠르며 SEO에도 유리합니다.
CSR vs SSR vs SSG 비교
| 특징 | CSR | SSR | SSG |
|---|---|---|---|
| 렌더링 위치 | 클라이언트(브라우저) | 서버 | 빌드 시점에 생성 후 정적 배포 |
| 초기 로딩 속도 | 다소 느림 | 빠름 | 매우 빠름 |
| 페이지 전환 속도 | 빠름 | 브라우저 새로고침 발생 시 약간 느려질 수 있음 | 매우 빠름 |
| SEO 최적화 | 불리함 | 유리함 | 유리함 |
| 동적 데이터 | 가능 | 가능 | 주기적 업데이트 필요 |
| 적합한 프로젝트 | SPA(싱글 페이지 애플리케이션) | SEO와 동적 데이터가 중요한 애플리케이션 | 블로그, 마케팅 페이지 등 정적 콘텐츠 중심의 애플리케이션 |
🎊 결론
클라이언트 사이드 렌더링은 초기 로딩이 다소 느릴 수 있지만, 페이지 전환이 빠르고 동적 데이터 렌더링에 강점을 지니고 있습니다. 반면 사전 렌더링은 SEO와 초기 로딩 속도에서 장점이 있으며, 특히 서버에서 HTML을 미리 생성하여 브라우저에 전송하는 서버 사이드 렌더링, 그리고 정적 콘텐츠를 미리 생성해 빠른 성능을 제공하는 정적 사이트 생성 방식을 지원합니다. 각 방식의 특성을 고려하여 프로젝트의 요구 사항에 따라 적절한 렌더링 방식을 선택하는 것이 중요합니다.
렌더링 방식의 이해를 통해, 사용자에게 더 나은 경험을 제공하는 웹 애플리케이션을 구축할 수 있기를 바랍니다.
