[프론트엔드 개념] - 웹페이지 렌더링 방식

1. 프리렌더링(Pre-rendering)

웹페이지가 html 코드를 받아오기 이전에 하는 렌더링

프리렌더링은 서버가 페이지를 사용자가 요청하기 전에 미리 렌더링해서 준비해두는 방식입니다. 페이지를 미리 생성하여 캐싱해 두는 것이 특징입니다.

• 특징
  1. 정적 생성: 빌드할 때 렌더링
  2. 서버사이드 렌더링: 리퀘스트가 들어오면 렌더링
• 장점: 빠른 로딩 속도 (페이지가 미리 준비되어 있음), SEO에 유리
  • 프리 렌더링을 사용하면 프리페치보다 표시 시간이 빨리지고 더 많은 리소스를 필요로 하는 대신 사용자 경험이 향상됩니다.
• 단점: 동적인 컨텐츠에 대해 적용하기 어렵고, 미리 준비된 페이지만 제공 가능

프리렌더링이 적합한 경우

• 자주 변경되지 않는 콘텐츠: 예를 들어 블로그, 포트폴리오 사이트 등 자주 업데이트되지 않는 콘텐츠가 많을 때.
  • ex) 블로그, 포트폴리오 사이트
• SEO가 중요한 페이지: 검색 엔진이 크롤링할 수 있도록 HTML을 사전에 준비하는 것이 필요할 때.
  • ex) 기업의 랜딩 페이지
• 초기 로딩 속도를 높이고 싶을 때: 사용자가 즉시 콘텐츠를 볼 수 있도록 하고 싶을 때.

 

---

2. 정적 생성(Static Generation)

정적 생성 과정

정적 생성은 쉽게 말해 빌드 시점에 페이지를 HTML로 미리 만들어 두는 방식입니다. 그 결과로 모든 페이지가 정적으로 생성되며, 서버나 데이터베이스가 필요하지 않습니다.

• 특징: 빌드 시점에 정적 파일로 HTML 페이지 생성
• 장점: 성능이 매우 뛰어남, 캐시를 쉽게 사용 가능, 보안성이 높음
• 단점: 페이지가 미리 생성되기 때문에 자주 변경되는 데이터를 보여주기 힘듦

정적 생성이 적합한 경우

• 콘텐츠가 고정적이거나 자주 바뀌지 않는 경우: 데이터가 자주 변경되지 않으며, 주기적인 빌드를 통해 변경된 콘텐츠만 다시 생성할 수 있음.
  • ex) 문서화 사이트, 제품 소개 웹사이트
• 낮은 유지 비용을 원할 때: 정적 파일을 사용하므로 서버 처리나 데이터베이스 연결 없이도 빠른 페이지 제공 가능.
• 빠른 배포와 높은 성능이 요구될 때: 미리 생성된 정적 파일이므로 빠르고 보안적으로도 안전함.
  
  • ex) 마케팅 페이지

프리렌더링과 정적 생성의 차이
사실 이 두 용어는 동일한 개념으로 많이 혼용되기도 합니다.
'프리렌더링'은 단순히 미리 렌더링하는 모든 방식을 포괄하는 넓은 개념이고,
'정적 생성'은 그중 정적 HTML 파일로 미리 생성하는 것을 구체적으로 의미합니다.

 

---

3. 서버 사이드 렌더링

서버사이드 렌더링(SSR, Server-Side Rendering): 사용자가 웹 페이지를 요청할 때, 서버에서 해당 페이지의 HTML을 실시간으로 생성하고 이를 클라이언트(브라우저)에 보내는 방식입니다. 즉, 서버가 페이지를 동적으로 렌더링한 후 완성된 HTML을 클라이언트로 전송하는 것입니다.

SSR 동작 과정

SSR의 동작 방식

1. 사용자가 웹 페이지를 요청합니다.
2. 서버는 요청을 받아서 필요한 데이터를 조회하고, 해당 데이터를 기반으로 HTML 페이지를 생성합니다.
3. 서버는 완성된 HTML을 사용자에게 응답으로 전송합니다.
4. 사용자의 브라우저는 서버에서 받은 HTML을 렌더링하여 화면에 표시합니다.
5. 이후 필요에 따라 JavaScript가 로드되고 실행되어 인터랙션을 위한 클라이언트 측 동작이 추가됩니다.

SSR의 장점

1. 빠른 초기 로딩 속도: SSR은 서버에서 완전한 HTML을 생성해 보내기 때문에, 사용자는 브라우저에서 바로 콘텐츠를 볼 수 있습니다. 클라이언트 측에서 데이터를 기다리며 페이지를 렌더링하는 CSR 방식에 비해, 초기 로딩 속도가 빠릅니다.
2. SEO(검색 엔진 최적화)에 유리: 검색 엔진 크롤러는 주로 HTML 콘텐츠를 분석하므로, SSR에서 미리 렌더링된 HTML을 제공하면 검색 엔진에 잘 노출됩니다. CSR 방식처럼 JavaScript로 콘텐츠가 렌더링되면 검색 엔진이 크롤링하기 어려운 경우가 있습니다.
3. 초기 렌더링 완료 후, 클라이언트에서 추가 기능: 초기 페이지는 서버에서 렌더링되지만, 이후에 클라이언트 측에서 JavaScript가 로드되어 동적인 기능이 추가됩니다. 이를 Hydration이라고 부릅니다.

SSR의 단점

1. 서버 부하 증가: 사용자가 페이지를 요청할 때마다 서버가 실시간으로 HTML을 생성해야 하기 때문에, 서버에 부하가 많이 걸릴 수 있습니다. 특히 요청이 많아지면 서버 성능에 영향을 미칠 수 있습니다.
2. 응답 속도: 서버에서 데이터를 처리하고 HTML을 생성하는 시간이 필요하기 때문에, 복잡한 페이지일 경우 응답 시간이 늘어날 수 있습니다. 특히 서버가 느리면 사용자 경험이 저하될 수 있습니다.
3. 클라이언트-서버 간의 네트워크 지연: 서버가 사용자와 멀리 떨어져 있을 경우, 네트워크 지연으로 인해 SSR의 장점인 빠른 로딩 속도가 제한될 수 있습니다.

SSR 사용 예시

• 블로그나 뉴스 사이트: 콘텐츠가 자주 변경되지 않으면서도 SEO가 중요한 경우에 적합합니다.
• 전자 상거래 사이트: SEO가 중요하고, 제품 목록이나 상세 페이지에서 빠른 초기 렌더링이 필요한 경우에 유리합니다.

 

---

4. 클라이언트 사이드 렌더링

클라이언트 사이드 렌더링 (CSR, Client-Side Rendering): 모든 JavaScript가 클라이언트에서 실행되며, 처음에는 빈 HTML 파일을 제공하고, JavaScript가 브라우저에서 데이터를 가져와 렌더링합니다.

• 장점: 사용자 인터랙션이 많은 동적인 웹 앱에 적합, 서버 부담이 적음
• 단점: 초기 로딩 속도가 느릴 수 있음, SEO에 불리할 수 있음

CSR 이 적합한 경우

• 매우 동적인 사용자 인터랙션이 많은 애플리케이션: 예를 들어 사용자의 요청에 따라 실시간으로 UI가 변하는 웹 앱.
  
  • 대시 보드: Google Analytics
  • SNS나 메시징 앱: Facebook, Twitter
  • 주문, 배송 상태, 장바구니
  • 온라인 화상 회의 도구: Zoom, Google Meet
  • 실시간 협업 도구: Figma
• SEO가 덜 중요한 경우: SEO보다 사용자 경험이 중요한 애플리케이션에 적합.
  • 비디오 스트리밍 서비스: Netflix, YouTube
  • 온라인 게임 플랫폼: Steam, Epic Games Store
• 싱글 페이지 애플리케이션(SPA): CSR은 사용자의 네비게이션이 빈번한 SPA에서 유리함. 한 번 로드된 후에는 빠르게 페이지를 전환할 수 있음.
  • Gmail, Trello

 

---

요약

• 프리렌더링/정적 생성: 빌드 시점에 미리 HTML 생성, 빠른 로딩 속도
• 클라이언트 사이드 렌더링: 브라우저에서 JavaScript로 렌더링, 동적 콘텐츠에 적합
• 서버 사이드 렌더링: 서버에서 요청 시마다 HTML 생성, 동적 콘텐츠와 SEO에 유리

렌더링 방식	적합한 경우	사용 예시
프리렌더링	자주 변경되지 않거나 SEO가 중요한 페이지	블로그, 포트폴리오, 랜딩 페이지
정적 생성	고정적인 콘텐츠, 빠른 배포가 필요하고 유지 비용이 낮은 사이트	문서화 사이트, 제품 소개 웹사이트, 마케팅 페이지
CSR (Client-Side Rendering)	실시간 데이터 갱신, 동적인 인터랙션, SEO가 덜 중요한 페이지	대시보드, SNS, 전자 상거래 사이트의 사용자 대시보드, 프로젝트 관리 도구
SSR (Server-Side Rendering)	SEO가 중요하며, 페이지가 자주 변경되거나 동적으로 데이터를 렌더링해야 하는 경우	전자 상거래 제품 페이지, 뉴스 웹사이트, 동적으로 사용자에게 맞춤화된 페이지

💡 각 방식은 프로젝트의 성격에 따라 선택해야 합니다. 페이지가 주기적으로 바뀌지 않는다면 정적 생성이 좋고, 매우 동적인 페이지라면 CSR이나 SSR이 더 적합합니다.