SSR이란?

SSR과 CSR의 차이

CSR(Client-Side Rendering)은 서버가 거의 빈 HTML과 자바스크립트 파일을 보내고, 브라우저가 자바스크립트를 실행해 화면을 만드는 방식입니다. 리액트나 뷰로 만든 단일 페이지 애플리케이션(SPA)이 대표적입니다. SSR은 서버가 데이터를 채운 완성된 HTML을 보내므로, 자바스크립트를 실행하기 전에도 본문과 링크가 들어 있습니다.

검색엔진 입장에서 이 차이는 큽니다. 구글은 자바스크립트를 실행할 수 있지만 렌더링에 시간과 자원이 들고, 자바스크립트를 실행하지 않는 크롤러도 많습니다. SSR은 어떤 크롤러에게도 같은 내용을 보여주므로 크롤러빌리티가 안정적입니다.

SSR을 도입할 때 함께 볼 것

• 비슷한 방식으로 정적 생성(SSG)이 있습니다. 빌드할 때 HTML을 미리 만들어 두는 방식으로 자주 바뀌지 않는 페이지에 적합하며, 검색엔진 입장에서는 SSR과 마찬가지로 완성된 HTML을 받습니다.
• Next.js, Nuxt 같은 오픈소스 프레임워크는 SSR과 정적 생성을 기본으로 지원합니다.
• HTML이 일찍 도착하므로 LCP 같은 초기 표시 속도 지표에도 유리한 경우가 많습니다. 다만 서버 응답이 느리면 이점이 줄어듭니다.
• 크롤러에게만 다른 HTML을 보내는 동적 렌더링보다 구조가 단순해 유지보수가 쉽습니다.