웹 페이지 렌더링 방식: CSR, SSR, SSG 이해하기

들어가며

웹 개발에 있어서 렌더링은 웹 페이지의 HTML, CSS, JavaScript 등을 해석하여 사용자가 보는 최종적인 화면을 생성하는 과정을 의미합니다.

 

이번 글에서는 CSR(Client Side Rendering), SSR(Server Side Rendering), 그리고 SSG(Static Site Generation)라는 세 가지 주요 렌더링 방식에 대해 알아보겠습니다.

 

---

CSR (Client Side Rendering)

CSR은 클라이언트(브라우저)에서 자바스크립트를 이용해 동적으로 페이지를 렌더링하는 방식입니다.

 

 

작동 방식

 

1. 사용자가 웹 페이지에 접속하면 서버로부터 최소한의 HTML과 모든 자바스크립트 파일을 받아옵니다.
2. 브라우저에서 자바스크립트가 실행되며 필요한 데이터를 API를 통해 받아와 동적으로 페이지를 렌더링합니다.
3. 브라우저에 표시합니다.

 

장점

 

1. 한 번 페이지가 로드된 후에는 페이지 간 전환이 빠릅니다.
2. 사용자의 상호작용에 따라 필요한 부분만 즉시 렌더링할 수 있습니다.
3. 서버 부하를 줄일 수 있습니다.
4. 페이지 일부를 더 빠르게 보여줄 수 있습니다.

 

단점

 

1. 초기 페이지 로딩 속도가 상대적으로 느립니다. 번들링이 완료된 모든 자바스크립트 파일이 다운로드되고 실행될 때까지 사용자는 빈 화면만 볼 수 있습니다.
2. 초기 HTML 파일이 비어있어 SEO에 불리합니다.
3. 클라이언트의 성능이 웹 애플리케이션의 성능에 큰 영향을 미칩니다.

 

CSR은 SEO에 크게 구애받지 않고, 복잡한 상호작용이 많은 경우에 적합합니다.

 

예시

• 실시간으로 데이터가 업데이트되는 대시보드
• 사용자의 입력에 따라 내용이 바뀌는 웹 애플리케이션
• 복잡한 상호작용을 가진 웹 게임

 

SSR (Server Side Rendering)

SSR은 서버에서 HTML을 완전히 렌더링 한 후 클라이언트에 전달하는 방식입니다. 사용자가 웹 페이지에 접속하면 서버에서 이미 완성된 페이지를 받아 바로 보여줄 수 있습니다.

 

 

작동 방식

 

1. 사용자가 웹 페이지에 접속하면 서버로부터 완전히 렌더링 된 정적 HTML 파일을 받아옵니다.
2. 브라우저에 표시합니다.
3. 동시에 서버로부터 필요한 자바스크립트를 받아 정적 HTML에 동적인 기능을 추가합니다. 이를 '하이드레이션 Hydration'이라 합니다.

 

장점

 

1. 초기 페이지 로딩 속도가 CSR 방식에 비해 빠릅니다.
2. SEO에 유리합니다.
3. 클라이언트의 부담이 덜합니다.

 

단점

 

1. 페이지를 이동할 때마다 서버에서 새 HTML을 전달해야 하므로 페이지 간 전환이 느립니다.
2. 사용자의 요청이 많으면 서버에 부하가 가해질 수 있습니다.

 

SSR은 데이터가 자주 변경되고, SEO가 필요한 경우에 적합합니다.

 

예시

• 포털 사이트
• 이커머스 사이트

 

SSG (Static Site Generation)

SSG는 일반적으로 빌드 시점에 서버에서 HTML을 렌더링 하여 정적 파일을 생성하는 방식입니다. 이렇게 생성된 정적 파일들은 미리 서버에 저장되어, 사용자 요청 시 즉시 전달됩니다.

 

작동 방식

 

1. 서버에서 HTML을 렌더링 하여 정적 파일을 생성합니다.
2. 사용자가 웹 페이지에 접속하면 서버로부터 미리 생성된 HTML 파일을 받아옵니다.
3. 브라우저에 표시합니다.

 

장점

 

1. 매우 빠른 페이지 로딩 속도를 제공합니다.
2. SEO에 유리합니다.

 

단점

 

1. 기존 방식에서는 사이트의 내용이 변경될 때마다 전체 사이트를 다시 빌드해야 합니다.
2. 동적 라우팅이 필요한 경우 제한적일 수 있습니다.
3. 실시간 업데이트가 제한적입니다.

 

단, 최근의 일부 프레임워크에서는 이러한 단점을 극복하기 위한 기능을 제공하고 있습니다. 예를 들어, Next.js는 On-Demand Revalidation(ODR) 기능을 제공하여, 전체 사이트를 다시 빌드하지 않고도 특정 페이지를 업데이트할 수 있게 합니다. 또 런타임에 동적 라우팅이 필요한 페이지를 발견한 경우 해당 페이지를 생성하도록 할 수 있습니다.

SSG는 정적인 콘텐츠를 다루는 웹 사이트에 적합합니다. 동시에, ODR 같은 기능을 이용하면 동적인 업데이트가 필요한 경우에도 유용하게 활용할 수 있습니다.

 

예시

• 블로그
• 기업 홈페이지
• 문서 페이지

 

정리

• CSR(Client Side Rendering): SEO에 크게 구애받지 않고, 복잡한 상호작용이 필요한 웹 애플리케이션에 적합합니다. 
• SSR(Server Side Rendering): 데이터가 자주 변경되고, SEO가 필요한 웹 애플리이션에 적합합니다.
• SSG(Static Site Generation): 정적인 콘텐츠를 다루는 웹 사이트에 적합합니다.

 

---

마치며

웹 페이지의 렌더링 방식은 사용자 경험은 물론 성능을 결정짓는 중요한 요소입니다. 해당 페이지의 요구 사항에 따라 적절한 방식을 선택하는 게 좋습니다.

 

잘못된 내용이 있다면 지적 부탁드립니다.

감사합니다 :D