브라우저에서 실제로 우리가 보는 화면을 최종적으로 어디서 만들어서 보여주느냐, 어떻게 개발하느냐에 따라서 CSR, SSR로 나뉜다.
SSR (Server Side Rendering)
: SSR이란 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식이다
- 주로 정적인 화면에 사용한다
- 관련 기술: JSP, 타임리프
- SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능
작동원리
- 웹 브라우저에서 서버로 html 요청을 보낸다
- 서버는 데이터베이스에서 관련 요청을 조회한다
- 서버에서는 동적으로 html을 생성후 브라우저에 전송한다
장점
- 검색엔진최적화(SEO) 가능하다
- 초기로딩속도가 줄어서 성능을 개선할 수 있다
- 자바스크립트에 대한 의존도가 낮다
- 초기 화면 로딩이 빠르다
단점
- 잦은 서버 요청
- 전체적으로 클라이언트 사이드 렌더링보다 페이지 렌더링이 느리다
- 모든 페이지를 새로고침한다
- 사이트간 상호작용이 부족하다
CSR (Client Side Rendering)
: CSR 이란 클라이언트 사이드 렌더링의 약자로, 처음에 브라우저가 서버로부터 HTML과 static 파일
을 받아오고 나면, 사용자의 요청에 따라 js를 통해 view를 동적으로 렌더링하는 방식이다.
- 주로 동적인 화면에 사용하며, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있다
- ex) 구글지도, Gmail, 구글 캘린더
- 관련 기술: React, Vue.js
작동원리
- 웹 브라우저에서 서버로 html 요청을 보낸다
- 서버는 다시 html을 보내는 데 내용이 없으며 자바스크립트 링크또한 같이 전송한다
- 웹 브라우저가 자바스크립트를 서버에 요청한다
- 응답으로 클라이언트 로직이나 HTML 렌더링 코드가 들어있는 자바스크립트를 전송한다
- 웹 브라우저가 HTTP API로 서버에 데이터를 요청한다
- 서버는 데이터베이스에서 정보 조회후에 JSON 형식으로 응답해준다
- 웹브라우저는 자바스크립트로 HTML 결과를 렌더링한다.
장점
- 사이트 상호작용이 활발하다
- 초기로딩 이후 웹사이트 렌더링이 빠르다
- 웹 애플리케이션에 좋다
- 자바스크립트의 다양한 라이브러리를 사용할 수 있다
단점
- 제대로 구현하지 않으면 검색엔진최적화가 취약하다
- 초기 로딩이 오래걸린다
- 추가적인 라이브러리가 필요하다
Universal Rendering
Next.js라는 프레임워크를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색엔진최적화의 문제점을 해결하고, 그 다음 페이지에서부터는 CSR 방식을 사용해 필요한 데이터 부분만 갱신해 서버의 부하도 줄일 수 있다!
백엔드 개발자 입장
서버 사이드 렌더링 기술
→화면이 정적이고, 복잡하지 않을 때 사용한다
→ 서버 사이드 렌더링 기술 학습은 필수적이다!!
클라이언트 사이드 렌더링 기술
→ 복잡하고 동적인 UI에 사용한다
→웹 프론트엔드 개발자의 전문 분야지만 백엔드 개발자의 프론트엔드 기술 학습은 선택이다
