SSR (Server-Side Rendering)
서버쪽에서 렌더링을 준비한 후 클라이언트에게 전달하는 방식으로, 초기 요청에 대한 응답으로 이미 렌더링된 HTML을 전송하며, 사용자의 브라우저에서 JavaScript가 실행되기 전에 화면을 표시하는 방법입니다.
(JSP나 PHP등 동적으로 변하는 사이트를 렌더링후 html을 클라이언트에 제공하는 방식)
(Nuxt와 PHP,JSP,NodeJS등을 사용한 WAS)
CSR (Client-Side Rendering)
클라이언트쪽에서 렌더링이 이루어지며, 초기 요청에 HTML과 JavaScript를 받아와서 클라이언트 측에서 화면을 동적으로 렌더링하는 방식입니다.
(빈 index.html파일과 js파일등을 클라이언트에 제공후 해당 파일로 브라우저에서 렌더링하는 방식)
(Vue,React)
SSG (Static Site Generation)
정적 사이트 생성은 미리 컴파일된 HTML, CSS, JavaScript 파일을 생성하여 서버에 배포하는 방식입니다. 사이트 내용이 변경되지 않는 한, 클라이언트 요청 시에 동적 데이터를 가져오지 않고 정적 파일만 제공합니다. 이로써 페이지 로딩 속도가 빨라지며, 보안도 강화될 수 있습니다.
(서버에 있는 이미 렌더링 끝난 html을 그냥 제공하는 형태)
(Nuxt,일반적인 정적인 웹페이지)
SSR과 CSR의 차이
웹페이지 로딩 시간: SSR은 초기 페이지 로딩 시 빠르며, CSR은 첫 페이지 로딩이 느리지만 그 후 추가 콘텐츠 로딩이 빠릅니다.
SEO 대응: SSR은 검색 엔진 최적화에 유리하며, CSR은 초기에 자바스크립트 실행이 필요해 SEO에 취약할 수 있습니다.
서버 자원 사용: SSR은 서버 자원을 더 사용하며, CSR은 클라이언트 자원을 많이 사용합니다.
요약하면, SSR은 초기 로딩 시간이 빠르고 SEO에 유리하며, CSR은 동적 상호작용이 많을 때 유용합니다. 선택은 웹 애플리케이션의 특성과 요구사항에 따라 달라집니다.
SSR은 매번 요청마다 페이지를 받아오기때문에 화면이 깜박이지만, CSR은 초기에 조금 느리게 페이지를 렌더링후 클라이언트에서 렌더링하기때문에 화면 깜박임이 없고 부드럽고 빠르다
요청의 흐름
SSR
브라우저 요청 -> 웹서버 -> WAS -> 소스코드 -> 렌더링된 html파일 -> 브라우저에 렌더링된 html파일반환
SSG
브라우저 요청 -> 웹서버 -> html파일 -> 브라우저에 html파일 반환
CSR
브라우저 요청 -> 웹서버 -> 빈 html,js파일 -> 브라우저에 빈 html,js파일 반환 -> 브라우저에서 빈 html을 js파일을 이용해서 렌더링
WAS
php-fpm (php)
tomcat (java)
express (nodejs)
각 프레임워크별로 설명
Vue는 build명령어로 생성된 파일은 빈 html파일과 js파일이다. 그걸 nginx등의 웹서버에 두면 클라이언트가 해당 파일을 받아가서 브라우저에서 렌더링한다 (CSR)
Nuxt는 build명령어로 JS소스코드를 생성한다. 해당 파일을 nodejs의 프레임워크인 express(WAS)로 렌더링한후 렌더링된 html을 브라우저에 반환한다(SSR)
Nuxt는 generate명령어로 렌더링된 html파일을 생성할수도 있다. 해당 파일을 웹서버에두면 렌더링된 html을 브라우저에 반환한다(SSG)
Laravel은 php-fpm이 동적으로 요청이오면 php파일을 렌더링된 html파일로 변환후 웹서버를 통해 브라우저에 반환한다 (SSR)
렌더링되는 타이밍 (build)
SSR : WAS에 의해서 렌더링되거나, build명령어로 렌더링되는 소스코드를 생성가능
SSG : 이미 렌더링 된 html과 css를 가진다, 혹은 generate명령어등으로 생성된다
CRS : 클라이언트의 브라우저에서 렌더링된다