너무 간단해서 어디서 랜더링을 하느냐에 따라 CSR과 SSR로 나뉘는 건 알고 있었지만, 계속 공부하기 위해 자세히 공부하고 싶고 두 방법의 정의와 그 속성을 정리했습니다.
CSR(클라이언트 측 렌더링)
이 방법은 서버에서 HTML 및 JS를 받은 후 클라이언트 측에서 렌더링을 시작합니다.
특정 URL로 웹 페이지를 요청할 때 HTML 및 JS 파일을 허용합니다.
사용자는 HTML 및 JS 파일이 모두 수신될 때까지 브라우저에 아무 것도 표시되지 않습니다.
JS를 가져온 후 렌더링이 완료되면 API를 호출하여 데이터를 가져오고 페이지와 상호 작용할 수 있습니다.
서버측 렌더링(SSR)
서버 측에서 렌더링 준비 상태로 클라이언트에 전달하는 방법입니다.
특정 URL로 웹 페이지를 요청할 때 서버는 이 URL에 대해 HTML 파일을 만들어 클라이언트에 제출합니다.
HTML은 이미 렌더링할 준비가 되었기 때문에 클라이언트 측에서 즉시 렌더링되고 브라우저에서 볼 수 있습니다.
그러나 JS 파일을 받기 전까지는 사이트를 운영할 수 없습니다.
클라이언트가 JS를 받은 후 JS를 실행하고 거기에서 페이지와 상호 작용할 수 있습니다.
CSR 대 SSR
1. 웹사이트 로딩 시간
CSR의 경우 HTML, CSS 및 JS가 동시에 로드됩니다.
그러나 SSR을 사용하면 필요한 HTML, CSS 및 JS 파일만 로드됩니다.
그래서 첫 페이지 로딩 시간의 경우 SSR이 상대적으로 빠릅니다.
그러나 첫 페이지를 로드한 후 다른 위치로 전환하면 CSR이 더 빨리 로드됩니다.
CSR의 경우 최초 로드 시 모든 파일이 로드되지만 SSR은 페이지가 이동할 때마다 최초 로드를 반복하기 때문에 속도가 느립니다.
2.SEO
초기 HTML 파일이 비어 있기 때문에 CSR은 SEO에 좋지 않습니다.
SSR의 경우 서버 측에서 렌더링할 준비가 된 HTML을 제공하므로 SEO에 상대적으로 유리합니다.
3. 서버 자원 사용
SSR은 각 페이지 요청에 대해 서버에 요청해야 하기 때문에 더 많은 서버 리소스를 사용합니다.
CSR은 초기 로드 시 모든 데이터를 가져온 후 특정 이벤트에 대해서만 API 요청을 통해 서버에 데이터를 요청하므로 서버의 로드가 상대적으로 적습니다.
참조
(기술연구) SSR과 CSR의 차이점
자강두천
velog.io
(개발 지식) 클라이언트 측 렌더링과 서버 측 렌더링의 차이점을 알고 계십니까?
CSR vs. SSR 보통 React는 CSR이기 때문에 SEO에 좋지 않습니다.
Next.Js는 SSR을 지원하므로 SEO에 좋습니다.
그런 얘기를 하면서 CSR과 SSR을 이야기합니다.
나는 지금 그것에 대해 조금 알고 있습니다
중현수.tistory.com