SSR

SSR이란 무엇인가?

그 전에 렌더링이란 무엇인가?

내용을 브라우저 화면에 표시하는 것이다.

사용자가 웹페이지에 접근하기 위해선, 서버에 페이지에 대한 요청을 해야한다.

렌더링 방식이란 결국 화면에 그려지는 HTML을 누가 하느냐 주체에 따라서 CSR, SSR을 가르는 것이다.

브라우저는 서버가 보내준 HTML 파일을 파싱해서 문서 DOM트리를 만든다. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다.

SSR 방식의 렌더링 과정

1. 브라우저에서 URL을 입력해서 서버에 HTTP Request를 보낸다.

2. 서버가 이 요청을 받아허 해당 페이지를 만들기 시작한다. 이 때 필요한 Data Fetching을 미리 해서, 빈 페이지가 아닌 초기 콘텐츠가 로딩된 페이지를 만들어준다.
   브라우저가 이 HTML 페이지를 받아 페이지를 DOM에 그린다.

3. 브라우저가 페이지를 그리면서 동시에 태그 등을 통해 JS, CSS파일 등을 로딩한다.

4. 로딩된 JS를 실행한다.

5. Interactive한 페이지 구성이 완료된다.

SSR의 장점은 서버에서 한번에 완성된 페이지를 받아오기 때문에 초기 로딩속도가 빠르다. 그리고 서버에서 한 번에 웹 정보를 HTML로 받아오기 때문에 자바스크립트 엔진이 없는 검색로봇이 페이지를 크롤링하기 때문에 검색엔진 최적화가 가능하다는 것(????????)

SEO는 홈페이지 혹은 컨텐츠를 검색 결과의 상단에 위치시키는 작업이다.

검색 엔진은 '크롤링'(웹 크롤러로 웹사이트 관련 데이터를 가져오는 과정)'과 '인덱싱' (크롤링을 통해 얻은 정보를 검색 색인에 저장하는 과정)을 통해 정볼르 카테고리화 한다.

반면, 단점은 html의 링크 태그에 href를 통해 이동하고 해당 리로스를 서버에 요청하기 때문에 새로운 페이지로 이동할 때마다 화면이 새로고침되어 사용자 경험을 저하시킴. 또한 매 페이지마다 서버에서 전송할 데이터 저장해야 하며 부하가 발생할 수 있다. 초기 로딩속도는 빠르지만 js 파일이 로드되기 전까지는 인터랙션이 안된다.

CSR은 어플리케이션 생명 주기 중에서단 한번만 리소스를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신한다.

서버는 JSON 파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다.

첫 요청시 딱 한페이지만 불러오고 페이지 변경 시 기존 페이지의 내부를 수정해서 보여주는 방식이다.

이를 사용자 관점에서 다시 말하자면, 최초 페이지를 로딩한 시점부터 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신한다.
필요한 부분만 갱신하기 때문에, 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있다.

리액트 CSR방식의 렌더링 과정

1. 브라우저에서 URL을 입력하면, 서버에 HTTP request를 통해 HTML을 다운로드한다.

2. 맨 처음 다운로드한 HTML 파일은 아무것도 그려져 있지 않다. 다마 ㄴ여러 js, css 파일을 불러올 수 있는 링크들이 있으며, 이 링크를 통해 다운로드한다.

3. 브라우저가 js코드를 실행한다. 이 js코드 안에서 react가 구동되며, 이 react가 virtualDOM에 콘텐츠를 렌더링한다.

4. virtualDOM 구성이 완료되면, 이를 브라우저의 DOM에 붙인다.

5. 브라우저가 렌더 트리 구성, 페인트, 플로우 등의 과정을 거쳐 페이지에 그린다.

6. 브라우저에 페이지가 나타난다.

CSR방식은 중복된 리소스 요청없이 정확히 필요한 요청만 하기 때문에 대부분의 경우 퍼포먼스상의 이득이 있다.
사용자에서 네이티브 앱과 비슷한 수준의 향상된 사용자 경ㅎ머을 제공할 수 있어서 SPA가 대세가 되었다.
하지만, 초기 구동속도가 느리며, 검색엔진 최적화가 어렵다는 단점이 있다. 자바스크립트로 짠 프로젝트는 자바스크립트 엔진이 내장된 검색엔진 크롤러가 아닌 경우 로봇이 데이터 수집하지 못한다.

SPA장점
자연스러운 사용자 경험
필요한 리소스만 부분적으로 로딩
서버의 템플릿 연산을 클라이언트로 분산
컴포넌트 별 개발 용이
모바일 앱 개발을 염두에 둔다면 동일한 api를 사용하도록 설계 가능

단점
javascript파일을 번들링해서 한 번에 받으므로 초기 구동느림
검색엔진 최적화 어려움
보안 이슈

이를 보완하는 SSR + CSR이 대세

next.js -> ssr을 도입

next.js 작동

1. 사용자가 처음 페이지를 접속을 요청 했을때, next.js 서버는 사용자에게 렌더링될 html을 응답 값으로 보내준다.

2. 그 후 브라우저는 추가적인 자바스크립트 번들을 다운로드 받아 실행한다.

3. 사용자가 해당 페이지에서 다른 페이지로 이동할때는 next.js에 서버가 아닌 브라우저에서 처리하여 이동하게 한다.

서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식

JSP/Servlet의 아키텍처에서 이 방식 사용

SSR은 서버를 이용하기 때문에 클라이언트를 이용하는 CSR보다 당장 보이는 양은 차이가 날 수 있다.

그러나 한번에 매핑되서 결과값이 나오기 때문에 사실상 완성된 결과값은 SSR이 더 빠르다