SSR(Server Side Rendering)
서버 측에서 렌더링 마친 상태로 데이터가 결합된 화면을 클라이언트에 전달하는 방식
- 새로운 페이지로 이동할 때마다 요청하기 때문에 깜박거리는 현상 존재
- SPA(Single Page Application) 기법이 대두되면서 CSR 방식이 각광
CSR(Client Side Rendering)
서버가 요청을 받으면 클라이언트에 각종 리소스를 보내주고 클라이언트가 그것을 받아 렌더링 하는 방식
- 최초 요청 시 HTML을 비롯한 CSS, JavaScript 등 각종 리소스를 받아오고 이후에는 서버에 데이터만 요청
- 자바스크립트로 뷰를 컨트롤
- 초기 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공
- 초기 페이지는 아무것도 없는 빈 페이지
SPA(Single Page Application)
최초 한번 페이지 전체를 로딩한 이후부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션
- 사용자 친화적
- 초기 렌더링 후 데이터만 받아오기 때문에, 상대적으로 서버 요청이 적음
- Virtual Dom
- 프론트 엔드와 백엔드 분리로 개발업무 분업화 및 협업이 용이
- 개발이 상대적으로 효율적
※ 렌더링 엔진(웹킷) 동작 과정
- 사용자의 요청에 대한 응답으로 해당 주소의 서버에서 HTML, CSS, JS, Image File 등을 받게 된 후 렌더링 과정
1. 렌더링 엔진이 HTML 문서를 파싱하고 DOM 트리 생성
2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱
3. 스타일 정보와 DOM 트리에 따라 렌더 트리 생성
4. 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하는 렌더 트리 정해진 순서대로 화면에 배치(Layout)
5. 형상을 만들어 내는 Painting 과정
Body 태그를 닫기 전에 Script 태그를 적어주는 이유?
HTML 처리 도중 Script 태그가 나타나면 렌더링 엔진에서는 이를 처리할 수 없기 때문에 동작을 멈추고, 브라우저의 자바스크립트 엔진에게 위임한다. 자바스크립트 동작을 끝마치면 다시 렌더링 엔진이 HTML에 대한 처리를 계속한다.
다른 곳에 있으면 비효율적이다.
SEO(Search Engine Optimization), 검색 엔진 최적화의 문제
CSR방식의 웹 사이트에서는 View를 생성하기 위해 자바스크립트를 실행시켜야 한다. 하지만 대부분의 웹 크롤러 봇들은 자바스크립트 파일을 실행시키지 못하기 때문에 HTML에서만 콘텐츠를 수집하게 되어 페이지를 빈 페이지로 인식하게 된다. (구글은 크롤러 안에 자바스크립트 엔진이 들어있어서 크게 문제 될 게 없지만, 네이버나 다음은 다르다.)
Google Bot(크롤러)은 JavaScript를 지원하기 때문에 CSR 사이트도 SEO가 잘 된다. 특히, 최신 버전의 Google Bot은 ES2015 이상의 최신 JavaScript도 지원한다. 또한 Full SSR 없이도 메타 태그들을 잘 활용하면 SEO를 잘 지원할 수 있다.
https://hyunseob.github.io/2019/05/26/google-io-2019-day-3/
이를 해결하기 위해 SSR with Hydration 기법이 나왔는데, 대표적으로 React의 Next.js와 Vue의 Nuxt.js가 위 기법을 구현한 프레임 워크다. 처음엔 SSR 방식, 그 후 다른 페이지들에선 CSR을 이용하는 방식.