CSR과 SSR

CSR = REACT / SSR = NEXT

 

1. 클라이언트 사이드 렌더링 (CSR)
CSR은 웹 애플리케이션의 렌더링이 클라이언트(브라우저)에서 이루어지는 방식입니다. 사용자가 페이지를 요청하면, 서버는 빈 HTML 문서와 자바스크립트 파일을 전송합니다. 이후 브라우저에서 자바스크립트가 실행되어 필요한 데이터를 API를 통해 가져오고, 이 데이터를 기반으로 동적으로 HTML을 생성하여 화면에 표시합니다.

장점:
빠른 사용자 경험: 초기 로딩 후 페이지 전환이 빠르며, 사용자 상호작용에 대한 반응성이 좋습니다.
서버 부하 감소: 서버는 HTML을 생성하는 대신 정적 파일을 제공하므로 서버의 부하가 줄어듭니다.
SPA(싱글 페이지 애플리케이션) 구현 용이: CSR은 SPA 구조에 적합하여, 페이지 간 전환이 매끄럽고 사용자 경험을 향상시킵니다.

단점:
SEO 문제: 초기 로딩 시 빈 HTML이 제공되므로, 검색 엔진 크롤러가 페이지 내용을 제대로 인덱싱하지 못할 수 있습니다.
느린 초기 로딩: 자바스크립트가 실행되고 데이터를 가져오는 과정이 필요하므로, 초기 로딩 시간이 길어질 수 있습니다.
브라우저 호환성: 자바스크립트를 지원하지 않는 브라우저에서는 제대로 작동하지 않을 수 있습니다.

2. 서버 사이드 렌더링 (SSR)
SSR은 웹 애플리케이션의 렌더링이 서버에서 이루어지는 방식입니다. 사용자가 페이지를 요청하면, 서버는 자바스크립트를 실행하여 완성된 HTML을 생성하고 이를 클라이언트에 전송합니다. 클라이언트는 이 HTML을 받아 즉시 화면에 표시할 수 있습니다.

장점:
SEO 최적화: 서버에서 렌더링된 HTML이 검색 엔진에 제공되므로, 검색 엔진이 페이지 내용을 쉽게 인덱싱할 수 있습니다.
빠른 초기 로딩: 사용자가 페이지를 요청할 때 이미 렌더링된 HTML이 제공되므로, 초기 로딩 시간이 짧습니다.
브라우저 호환성: 서버에서 HTML을 생성하므로, 자바스크립트를 지원하지 않는 브라우저에서도 페이지가 정상적으로 표시됩니다.

단점:
서버 부하 증가: 서버에서 모든 요청에 대해 HTML을 생성해야 하므로, 서버의 부하가 증가할 수 있습니다.
느린 페이지 전환: 페이지 간 전환 시 매번 서버에 요청을 해야 하므로, 사용자 경험이 다소 느려질 수 있습니다.
복잡한 상태 관리: 클라이언트와 서버 간의 상태 관리가 복잡해질 수 있으며, 데이터 동기화 문제를 처리해야 할 수 있습니다.

결론
CSR과 SSR은 각각의 장단점이 있으며, 애플리케이션의 요구 사항에 따라 적절한 방식을 선택하는 것이 중요합니다. 예를 들어, SEO가 중요한 콘텐츠 중심의 웹사이트는 SSR을 사용하는 것이 좋고, 사용자 상호작용이 많은 대시보드와 같은 애플리케이션은 CSR이 더 적합할 수 있습니다. 최근에는 CSR과 SSR의 장점을 결합한 하이브리드 방식도 많이 사용되고 있습니다.

 

 

 

CSR 사용 사이트 -  사용자 상호작용이 많은 대시보드 애플리케이션

프로젝트 관리 도구 / 데이터 시각화 대시보드 / 소셜 미디어 플랫폼 / 온라인 게임

 

SSR 사용 사이트 - SEO가 중요한 콘텐츠 중심의 웹사이트 

뉴스 사이트 / 블로그 / 위키 사이트 / 전자상거래 사이트

 

 

 

스트리밍 사이트  SSR이 유용한 이유
SEO 최적화: 스트리밍 서비스가 검색 엔진에서 더 잘 노출되기를 원한다면 SSR이 도움이 될 수 있습니다. 예를 들어, 특정 영화나 TV 프로그램의 정보를 검색 엔진에 잘 노출시키기 위해 SSR을 사용할 수 있습니다.

초기 로딩 속도: SSR은 초기 페이지 로딩 시 서버에서 완전한 HTML을 제공하므로, 사용자가 첫 페이지를 로드할 때 더 빠르게 콘텐츠를 볼 수 있습니다. 이는 특히 사용자가 처음 방문할 때 중요한 요소입니다.