웹 렌더링의 모든 것: 클라이언트 사이드 vs 서버 사이드 vs 사전 렌더링

웹 개발을 하다 보면 클라이언트 사이드 렌더링, 서버 사이드 렌더링, 그리고 사전 렌더링이라는 용어를 자주 접하게 됩니다. 하지만 이들이 정확히 무엇을 의미하고, 어떤 상황에서 어떤 방식을 선택해야 하는지 혼란스러우실 수 있습니다. 이번 블로그에서는 이 세 가지 렌더링 방식의 특징과 동작 원리, 그리고 각각의 장점과 제한 사항에 대해 자세히 알아보겠습니다.

---

클라이언트 사이드 렌더링 (CSR)

특징 및 동작 방식

클라이언트 사이드 렌더링은 말 그대로 클라이언트(브라우저)가 렌더링을 담당하는 방식입니다. 서버는 최소한의 HTML 파일과 필요한 JavaScript 파일을 클라이언트에게 전송하고, 브라우저는 이 JavaScript를 실행하여 동적으로 페이지를 구성합니다.

예시: React로 개발된 싱글 페이지 애플리케이션(SPA)을 생각해봅시다. 사용자가 웹사이트에 접속하면 서버는 index.html 파일과 함께 번들링된 JavaScript 파일을 전송합니다. 브라우저는 이 파일들을 받아와 React 앱을 실행하고, 가상 DOM을 통해 실제 화면에 콘텐츠를 렌더링합니다.

FCP(First Contentful Paint) 개념 설명 및 제약 사항

**FCP(First Contentful Paint)**는 브라우저가 첫 번째로 내용이 있는 요소(텍스트, 이미지 등)를 화면에 렌더링하는 시점을 의미합니다. 이는 사용자가 페이지 로딩을 인지하는 데 중요한 지표로 작용합니다.

CSR 방식에서는 초기 HTML이 거의 비어 있거나 최소한의 구조만을 가지고 있고, 실제 콘텐츠는 JavaScript가 실행된 후에야 렌더링됩니다. 따라서 JavaScript 파일의 로딩과 실행이 완료될 때까지 FCP가 지연되는 제약 사항이 있습니다. 이는 초기 로딩 속도가 느려져 사용자가 빈 화면을 보거나 로딩 스피너를 보는 시간이 길어질 수 있음을 의미합니다.

장점

• 부드러운 사용자 경험: 페이지 이동 시 전체를 새로고침하지 않고 필요한 부분만 업데이트하므로, 앱 같은 부드러운 경험을 제공합니다.
• 서버 부하 감소: 초기 로딩 이후에는 서버와의 통신이 최소화되어 서버 자원의 소모가 적습니다.
• 빠른 인터랙션: 사용자 입력에 대한 반응이 빠르며, 실시간 데이터 업데이트에 유리합니다.

---

반응형

서버 사이드 렌더링 (SSR)

특징 및 동작 방식

서버 사이드 렌더링은 서버에서 완전히 렌더링된 HTML 페이지를 생성하여 클라이언트에게 전송하는 방식입니다. 브라우저는 전달받은 HTML을 그대로 표시하므로, 초기 로딩 속도가 빠릅니다.

예시: 전통적인 웹사이트나 Next.js 같은 프레임워크를 사용하는 경우입니다. 사용자가 페이지를 요청하면 서버는 해당 페이지에 필요한 데이터를 가져와 HTML을 생성하고, 이를 클라이언트에게 전송합니다. 브라우저는 이 HTML을 파싱하여 즉시 화면에 표시합니다.

장점

• 빠른 초기 로딩 속도: 완성된 HTML을 전달받기 때문에 첫 화면이 빠르게 표시됩니다.
• SEO 친화적: 검색 엔진 크롤러가 페이지 내용을 쉽게 수집할 수 있어 검색 결과에 유리합니다.
• 저사양 기기 지원: 클라이언트의 연산 부담이 적어, 성능이 낮은 기기에서도 원활하게 동작합니다.

---

사전 렌더링 (Pre-Rendering)

특징 및 동작 방식

사전 렌더링은 빌드 시점에 미리 HTML 파일을 생성하여 서버에 배포하는 방식입니다. 이는 정적 사이트 생성기(SSG)를 통해 구현되며, 콘텐츠 변경이 빈번하지 않은 페이지에 적합합니다.

예시: 블로그나 문서 사이트를 Gatsby.js나 Next.js의 SSG 기능을 이용해 제작하는 경우입니다. 빌드 시 모든 페이지의 HTML 파일이 생성되고, 사용자가 요청하면 서버는 해당 HTML 파일을 그대로 전송합니다.

TTI(Time To Interactive) 개념 설명

**TTI(Time To Interactive)**는 사용자가 페이지와 상호작용할 수 있게 되기까지 걸리는 시간을 의미합니다. 사전 렌더링은 초기 로딩 시 완성된 HTML을 제공하므로 **FCP(First Contentful Paint)**는 빠르지만, 동적인 기능을 위해 필요한 JavaScript 파일의 로딩과 실행까지 시간이 걸릴 수 있습니다. 따라서 TTI가 지연될 수 있는 제약 사항이 있습니다. 사용자는 페이지의 콘텐츠를 빠르게 볼 수 있지만, 버튼 클릭이나 폼 입력 같은 상호작용은 JavaScript가 완전히 로드될 때까지 지연될 수 있습니다.

이를 최소화하기 위해 코드 스플리팅이나 지연 로딩 같은 최적화 기법을 활용하여 JavaScript 로딩 시간을 단축시키는 것이 중요합니다.

장점

• 최고의 로딩 속도: 미리 생성된 정적 파일을 제공하므로, 서버 응답 시간이 매우 빠릅니다.
• SEO 최적화: SSR과 마찬가지로 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있습니다.
• 보안 및 안정성: 동적인 서버 로직이 없으므로 보안 이슈가 적고, 서버 부하가 낮습니다.

728x90

---

 

• 서버 사이드 렌더링
  • 장점: 빠른 초기 로딩 속도, SEO 최적화, 저사양 기기 지원
  • 제약 사항: 서버 부하 증가, 페이지 전환 시 전체 새로고침으로 인한 사용자 경험 저하
  • 적합한 경우: SEO가 중요하고, 초기 로딩 속도가 핵심인 웹사이트
• 사전 렌더링
  • 장점: 최고의 로딩 속도, SEO 최적화, 보안 및 안정성
  • 제약 사항: 콘텐츠가 자주 변경되는 경우 실시간 업데이트 어려움, TTI 지연 가능성
  • 적합한 경우: 블로그, 문서 사이트 등 콘텐츠 변경이 빈번하지 않은 경우

각 렌더링 방식은 저마다의 특징과 장단점이 있어, 프로젝트의 성격과 요구사항에 따라 적절한 방식을 선택하는 것이 중요합니다. 최근에는 Next.js 같은 프레임워크를 통해 CSR과 SSR, 사전 렌더링을 혼합하여 사용하는 등 다양한 방법으로 웹 앱을 최적화하고 있습니다.