SSR(Server Side Rendering)

SSR(Server Side Rendering) 방식은 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식이다. 클라이언트 측에서는 해당 HTML을 파싱하여 화면을 그리는 방식이다. 반면, CSR(Client Side Rendering) 방식은 브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 실행하여 동적으로 콘텐츠를 채우는 방식이다.

Next.js에서는 SSR 방식으로 정적인 HTML을 내려주어 초기 화면을 빠르게 렌더링한 이후, hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환하는 방식을 사용한다.

SSR의 장점

• SEO(검색 엔진 최적화)에 유리하다: SSR은 크롤러가 완성된 HTML을 쉽게 인식할 수 있어 검색 엔진에서 상위에 노출될 가능성이 높다.
• 빠른 초기 로딩 속도를 제공한다: SSR은 클라이언트가 자바스크립트를 다운로드하고 실행하기 전에 이미 렌더링된 화면을 제공하므로 사용자 경험이 개선된다.
• 저사양 디바이스를 지원하기 좋다: 클라이언트가 처리해야 할 로직이 적어 저사양 디바이스에서도 원활히 작동한다.

SSR의 단점

• 클라이언트 사이드 라우팅이 제한된다: 전통적인 SSR 방식에서는 빠르고 매끄러운 페이지 전환 경험을 제공하기 어렵다.
• 서버 비용이 증가한다: 요청 시마다 페이지를 동적으로 구성해야 하므로 서버 리소스 소모가 늘어나고, 트래픽이 많으면 서버 부하가 커질 수 있다.
• Hydration 지연 문제가 발생할 수 있다: Next.js와 같은 현대적인 SSR 구현에서도 hydration 과정에서 초기 상호작용이 느려질 수 있다. 이로 인해 페이지가 표시되더라도 사용자가 버튼 클릭 등 상호작용에 즉각 응답하지 않을 수 있다.
• 구현 복잡도가 높다: SSR과 CSR을 혼합하여 사용하는 경우 클라이언트와 서버 로직을 분리해야 하므로 개발 복잡도가 높아진다.

상황에 따른 활용

SSR은 SEO가 중요한 블로그, 커머스 웹사이트, 초기 로딩 속도가 중요한 대시보드 등에 적합하다. 반면, 상호작용이 많은 애플리케이션에서는 CSR 또는 하이브리드 접근법이 더 적합할 수 있다.