jQuery와 AJAX의 등장으로 클라이언트가 점점 더 많은 일을 처리하기 시작했고, React와 Vue 같은 SPA 프레임워크와 라이브러리들이 대세가 되면서 서버는 단순히 API 서버 역할로 후퇴하게 되었다. 그런데 다시 Next.js, Nuxt.js 같은 프레임워크들이 서버 사이드 렌더링을 외치고 있다. 심지어 React에는 서버 컴포넌트라는 개념까지 등장했다.
# 전통적인 서버 사이드 렌더링
초기 웹은 서버가 완성된 HTML을 만들어 브라우저에 전달하는 방식이였다. JSP, ASP 같은 서버 사이드 기술들이 데이터 베이스에서 데이터를 가져와 HTML에 삽입한 후 완성된 페이지를 클라이언트에게 보내 주었다. JSP 하나의 파일에 JAVA 코드, JS 코드 그리고 HTML 태그들이 하나의 파일에 어우러져 있었던 기억이 있다..
•장점 : SEO 최적화 , 빠른 초기 로딩 속도 ( 브라우저가 콘텐츠를 표시하는 속도 )
•단점 : 페이지 이동할 때마다 전체 새로고침, 서버 부하
# 클라이언트 사이드 렌더링의 부상
jQuery와 AJAX의 등장으로 상황이 바뀌기 시작했다. 서버에서 JSON 데이터만 받아와서 Javascript로 동적으로 화면을 구성하는 방식이 인기를 얻었고, React, Vue 같은 SPA 프레임워크가 이를 완성했다. CSR이란? •장점 : 매끄러운 사용자 경험, 서버 부하 감소, 서버 관리 포인트 줄음
•단점: 초기 로딩 느림, SEO 문제, JS 의존성
# CSR의 한계
왜 다시 서버로 돌아가려고 하는걸까?
Google이나 Naver와 같은 검색 엔진은 웹사이트의 정보를 수집하기 위해 크롤링 봇을 사용한다. 이 크롤링 봇은 웹 페이지를 탐색하면서 HTML 문서를 읽고, 그 내용을 바탕으로 검색 결과의 노출 순서를 결정한다. 하지만 CSR 방식의 웹사이트는 서버에서 최소한의 HTML만 전달하고, 나머지 콘텐츠는 클라이언트에서 동적으로 렌더링 된다. 이 때문에 크롤러가 웹페이지에 접근했을 때, 아직 콘텐츠가 렌더링 되지 않은 빈 페이지만 보게 되는 경우가 많았다. 결과적으로 CSR 기반의 웹사이트는 검색 엔진에 제대로 노출되지 않아 SEO에 불리하다라는 단점이 있다.
또한, 초기 로능 성능에 낮다는 점이다. Javascript로 거의 대부분의 콘텐츠를 렌더링하기 때문에 번들링된 JS 파일이라고 하더라도 이 파일의 용량은 엄청 클 것이다. 이 파일을 서버로 부터 클라이언트가 전달 받는데는 많은 시간이 필요하다. 코드 스플리팅을 하더라도 웹페이지의 볼륨이 크다면 이는 무시하지 못할 것이다. 결국 사용자 입장에서는 초기 화면이 늦게 보이거나 하얀 화면에서 기다리는 시간이 길어지게 되며, 이는 사용자 경험과 전환율 모두에 악영향을 줄수 있다.
# 하이브리드 접근법의 등장
현대의 프레임워크들은 CSR의 장점은 유지하면서 단점을 보완하는 방식을 채택했다.
SSR ( Server-side Rendering )
클라이언트가 페이지를 요청하면 서버가 해당 페이지를 미리 HTML 형태로 렌더링해 클라이언트에 전달하는 방식이다. 브라우저는 이 완성된 HTML을 받아 곧바로 콘텐츠를 보여줄 수 있으므로 빠른 초기 렌더링이 가능하고 검색 엔진에도 더 잘 노출된다. 또한 데이터에 따라 동적으로 변경되야하는 콘텐츠는 또 Javascript로 렌더링을 하므로 사용자에게 즉각적인 상호작용이 가능하게 해준다.
•장점 : SEO에 유리, 빠른 초기 렌더링, 메타데이터 정보전달, 즉각적인 상호작용
•단점 : 서버 부하 증가 ( 일방적인 서버 렌더링 책임은 아님 ), 구현 복잡성 증가
SSG ( Static Site Generation)
말 그대로 빌드 시 HTML을 미리 정적으로 생성해두는 방식이다. 빌드 시점 데이터를 기반으로 모든 페이지를 HTML로 생성하고, 요청이 들어올 때는 미리 만들어진 HTML 파일로 즉시 응답한다.
사용자의 요청과 관계 없이 빌드 타임에 모든 HTML 파일을 생성 한다. 이후 서버는 단순히 정적 파일 ( HTML, CSS , JS )을 서버에서 동적으로 처리할 필요 없이 단순 파일을 전달한다.
•장점 : 매우 빠른 응답 속도, 서버 비용 절감( CDN에서 정적 파일 서빙 ), SEO에 유리, 높은 안정성
•단점 : 데이터가 자주 바뀌는 페이지에 부적합, 빌드 시간 증가, 동적 요청 처리 난이도 증가