0. CSR/SSR

1) 전통적인 Web Framework

1. Browser 에서 Server 로 요청을 보낸다.
2. Server 는 해당 요청을 분석해 이에 맞는 HTML 응답을 내려준다.

2) CSR

• 페이지 새로고침 최소화, 더 빠른 응답성을 위해 등장
• React.js, Angular.js 등 클라이언트에서 HTML 문서 조작하는 Javascript Framework 등장

1. Browser 에서 Server 로 요청을 보낸다.
2. Server 는 해당 요청에 대해 분석하는 과정을 거치지 않고 빈 HTML 응답을 내려준다.
3. Browser 는 빈 HTML 을 받아서 내부의 javascript 코드를 실행한다.
이때 javascript 코드가 상황에 맞게 HTML을 그려준다.

장점

• 초기 렌더링 이후에는 서버 의존 없이 클라이언트가 혼자 렌더링할 수 있기 때문에 빠른 화면 전환, 인터랙션 등의 사용자 경험(UX)이 좋다.
• 서버에 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.

단점

• 초기 렌더링 타임 이슈가 있을 수 있다.
  - 모든 스크립트 파일이 로드될 때까지 기다려야 한다.
  - 자바스크립트 렌더링이 따로 필요하기 때문에 성능이 낮은 구형 단말기에서 초기 렌더링 타임 이슈가 있을 수 있다.
  - 처음 렌더링 시 어떤 DOM을 그릴지 판단하고, 그리는 작업을 하는 동안 딜레이가 발생하게 된다.
  => 리소스를 chunk단위로 묶어서 요청할 때만 다운받게 하는 방식(코드 스플리팅)으로 완화시킬 수는 있지만 완벽히 해결할 수 없다.
• index.html 에 뼈대만 있어 검색엔진의 검색 봇이 크롤링 시 아무 내용이 없기 때문에 검색엔진 최적화(SEO: Search Engine Optimization)의 문제가 있다.

3) SSR

• CSR 의 문제를 해결하기 위해 나오게 된 기술
• = Universal Renderging
• 서버에서 첫번째 HTML 을 만들고 그 다음부터는 클라이언트가 이어나가는 방식

1. Browser 에서 Server 로 요청을 보낸다.
2. Server 는 우리가 만든 React Wep Application 을 Node.js 환경에서 구동하여, React가 제공하는 renderToString 함수로 HTML 문자열로 만든다. 만들어진 HTML 문자열과 javascript 파일을 응답으로 내려준다.
3. Browser 는 응답으로 받은 javascript 코드를 동작시켜 동일한 React App 을 브라우저 내부에 띄운다.

장점

• 초기 페이지 로딩이 빠르다.
• 모든 컨텐츠가 html 에 다 담겨있어서 SEO에 좋다.

단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험(UX)가 SPA에 비해서 좋지 않다.
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.
• javascript 파일을 다운받아 적용하는데 시간이 소요되어 interactive 한 웹사이트가 되기 위해 기다리는 시간이 발생할 수 있다.

CSR VS SSR

Next.js

React Application 의 서버 사이드 렌더링을 빌드하기 위한 Framework

Next.js LifeCycle

1. Server 에 요청이 오면 _document.jsx 를 통해 정적 리소스를 생성한다.
2. getInitialProps 라는 함수 내에서 앱을 구동하는데 필요한 여러가지 자원을 수집한다.
3. 해당 자원을 props로 React app 이 받아 구동된다.

1) Store Hydration 을 통한 데이터 주입

Hydration 이란?

React.js 등의 Client-Side Framework 가 서버에서 전송한 HTML, JSON 등의 정적 문서를 데이터 변경에 반응할 수 있는 application 등의 동적 형태로 변환하는 클라이언트 측 프로세스

Store Hydration 이란?

JSON 문서를 MobX, Redux 형태로 바꾸는 것

Store Hydration 을 통한 데이터 주입 과정

1. 서버에서 요청을 분석해 정적 응답을 만든다.

1-1. 사용자 요청 -> getInitialProps 함수 호출
1-2. getInitialProps 함수 내에서 createStore 함수 호출
1-3. createStore 함수 내에서 생성된 store 가 하나는 Server 내 React App으로 들어가 HTML 문자열을 만들고, 하나는 JSON 으로 직렬화되어 문서에 포함된다.

2. 클라이언트에서 정적 응답을 이용해 앱을 Hydrate 한다.

2-1. JSON 을 가져와 createStore 함수의 인자값으로 넣어 store 를 생성한다.
2-2. 해당 store 를 브라우저 내 react app 에 주입한다.

Isomorphic Javascript

• SSR 과정 중 Node.js 와 Browser 환경 모두에서 동작할 수 있는 JavaScript 코드를 의미

참고
React.js 개발자를 위한 SSR 앱 개발 및 배포하기 - 원지혁 (AUSG) :: AWS Community Day 2020