[코드잇 풀스택 1기] - 웹 페이지 CSR, SSR, SSG

취업 준비 !

minsugar 2024. 8. 2. 10:30

웹 페이지 CSR, SSR, SSG

일단 웹 렌더링이란 ? 실시간으로 웹사이트가 그려지는 과정을 의미합니다.

웹 렌더링에는 여러 가지 방식이 존재 합니다.

- 클라이언트 사이드 렌더링 (Client Side Rendering, SCR)

- 서버 사이드 렌더링 (Server Side Rendering, SSR)

- 정적 사이트 생성 (Static Site Generation, SSG)

각 렌더링 방식에는 특징과 사용 상황이 있습니다.

🌟특징 :

1. 클라이언트 중심 처리 : CSR은 웹 페이지 클라이언트에서 렌더링 하는 방식, 초기 로드 시 HTML 파일과 함께 JS파일이 전송되고, JS가 실행되면서 페이지가 동적으로 생성

2. 빠른 인터랙션 : 최초 로드 후에는 페이지 일부만 갱신되므로 사용자 인터페이스의 인터랙션이 빠름

3. 초기 로드 시간 : 초기 로드 시 전체 JS파일을 다운로드 해야하므로 로드 시간이 길어질 수 있음

👍 상황 :

1. 동적 페이지가 많은 애플리케이션 :SPA(Single Page Application)처럼 사용자가 많이 상호작용하고, 데이터가 자주 변경되는 애플리케이션에 적합

2. 사용자 인터페이스가 중요한 경우 : 사용자 경험이 중요한 웹 애플리케이션에 적합

🌟 특징 :

1. 서버 중심 처리 : SSR은 웹페이지를 서버에서 렌더링하여 클라이언트에 HTML을 전송, 초기 요청 시 서버에서 모든 HTML을 생성하고 브라우저를 보냅니다.

2. 빠른 초기 로드 : 초기 로드 시 완전한 HTML이 전송되기 때문에 사용자가 더 빠르게 내용을 볼 수있습니다.

SEO 친화적 : 검색 엔진 크롤러가 완성된 HTML을 받아들이기 때문에 SEO에 유리합니다.

- SEO : 검색 엔진 최적화 이전 포스팅 내용에 작성했던걸로 기억합니다.

👍 상황 :

1. SEO가 중요한 웹사이트 : 검색 엔진 최적화가 중요한 사이트에 적합하다.

2. 빠른 초기 응답이 필요한 경우 : 초기 로드 시간이 중요한 서비스에 적합합니다.

🌟 특징 :

1. 정적 페이지 생성 : SSG는 빌드 타임에 정적 HTML 파일을 생성하여 서버에 배포하는 방식, 사용자가 페이지를 요청할 때 미리 생성된 HTML 파일을 제공하므로 서버 부담이 적습니다.

2. 안정적인 성능 : 정적 페이지를 제공하므로 서버 부하가 적고, 빠르고 안정적인 성능을 제공합니다.

3. SEO 친화적 : SSR과 마찬가지로 SEO에 유리합니다.

👍 상황 :

1. 콘텐츠가 자주 변경되지 않는 사이트 : 블로그, 문서 사이트 등 정적 콘텐츠가 주로 사용되는 경우 적합합니다.

2. 높은 트래픽을 처리해야 하는 경우 : 트래픽 급증 상황에서도 안정적인 성능을 제공합니다.

내용 처럼 각 렌더링 방식은 사용자가 원하는 웹 애플리케이션의 성격과 요구 사항에 맞춰 선택이 가능합니다.

SCR은 사용자 인터페이스 동적 요소가 많은 경우 SSR은 SEO가 중요한 경우, SSG는 정적 콘텐츠를 제공하는 경우 효과적

공부를 하다가 ISR (증분 정적 재생성) 방식도 있고

SSG와 SSR의 단점을 보완하고 장점을 결합한 Next.js 프레임워크에서 도입한 렌더링 방식도 있습니다.

이 내용은 기회가 된다면 공부해서 다시 찾아오겠습니다.!!