🌳 고급 인프라
서버 사이드 렌더링(SSR)이란?
쉽게 이해하기
레스토랑에서 주문하면 주방에서 완성된 요리를 가져다주는 것처럼, SSR은 서버에서 완성된 HTML 페이지를 만들어서 브라우저에 보내줘요. 손님(브라우저)은 조리 과정을 기다릴 필요 없이 바로 먹을 수 있죠. 반대로 클라이언트 사이드 렌더링(CSR)은 재료만 받아서 직접 조리하는 것과 비슷해요.
핵심 정리
서버에서 HTML을 완성해서 보내주는 방식으로, 첫 화면을 빠르게 보여줄 수 있어요.
자세히 알아보기
SSR은 서버에서 HTML을 완성해서 브라우저에 보내주는 방식이에요. 사용자가 페이지를 요청하면 서버가 데이터를 가져와서 HTML로 렌더링한 뒤 완성된 페이지를 전송해요. 브라우저는 받은 HTML을 바로 화면에 표시하기 때문에 첫 화면이 빠르게 나타나고, 검색엔진도 내용을 쉽게 읽을 수 있어요.
SSR의 가장 큰 장점은 초기 로딩 속도와 SEO(검색 최적화)예요. 블로그나 쇼핑몰처럼 검색 노출이 중요한 사이트는 SSR을 많이 써요. Next.js나 Nuxt.js 같은 프레임워크가 SSR을 쉽게 구현할 수 있도록 도와줘요. 예를 들어 뉴스 사이트는 기사가 검색에 잘 노출되어야 하니까 SSR을 쓰는 게 유리하죠.
하지만 서버가 매번 HTML을 만들어야 하니까 서버 부하가 생길 수 있어요. 그래서 자주 바뀌지 않는 페이지는 미리 만들어두는 정적 생성(Static Generation)을 쓰기도 해요. 요즘은 SSR과 CSR을 섞어서 쓰는 하이브리드 방식이 많이 쓰여요.
실무에서는 메인 페이지나 상품 상세 페이지처럼 SEO가 중요한 곳은 SSR을 쓰고, 로그인 후 대시보드처럼 개인화된 화면은 CSR을 쓰는 식으로 섞어서 써요. 이렇게 하면 각 방식의 장점을 모두 살릴 수 있어요.