SSR-CSR.md

📍 페이지 구성 방식 - SPA와 MPA

MPA (Multiple Page Application)

• 여러개의 페이지로 구성된 어플리케이션
• 요청이 있을 때 마다 서버로부터 새로운 페이지를 로드하는 방식이다.
• 따라서 렌더링 방식으로 SSR을 사용한다.

SPA (Single Page Application)

• 단일 페이지 어플리케이션
• 기존 MPA와 달리 브라우저에 최초에 한번 페이지를 로드하고, 이 후 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.
• 따라서 렌더링 방식으로 CSR을 사용한다.

📍 렌더링 방식 - CSR과 SSR 개념

CSR (Client Side Rendering)

• 클라이언트 측에서 HTML을 렌더링 한다.

SSR (Server Side Rendering)

• 요청이 오면 서버에서 HTML을 렌더링 한다.

SSR과 SSG (Static Site Generation)

• SSR과 SSG는 서버에서 HTML을 렌더링하여 보내준다는 측면에서 비슷하지만,차이점은 HTML을 언제 만들어두느냐이다.
• SSG 같은 경우 미리 만들어두고, SSR은 요청이 오면 만들어둔다.
• 따라서 SSR은 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합
• SSG는 바뀔 일이 거의 없는 페이지에 적합

📍 CSR과 SSR의 동작 과정과 특징

CSR

1. 유저가 웹사이트에 방문한다.
2. 브라우저가 서버에 콘텐츠를 요청한다.
3. 서버는 빈 뼈대만 있는 HTML을 응답한다.
4. 브라우저가 HTML을 파싱하며 연결된 JS링크를 읽고, 서버로부터 JS를 다운로드 받는다.
5. 브라우저는 JS를 이용해 동적으로 DOM을 생성하여 페이지를 만들어 브라우저에 띄워준다.

• CSR은 브라우저가 JS 파일을 다운로드 받고, 동적으로 DOM을 생성하는 시간을 기다려야 하므로 초기 로딩 속도가 느리다.
• 서버가 빈 뼈대만 있는 HTML을 넘겨주면 되기 때문에 서버측 부하가 적다.
• 클라이언트 측에서 라우팅, 연산 등을 모두 직접 처리하여 반응 속도가 빠르고 UX도 우수하다.
• 웹 크롤러 봇 입장에서는 처음 HTML이 비어있기 때문에 검색 엔진 최적화에 불리하다. (크롬의 크롤러의 경우는 JS파일을 읽을 수 있긴 하다.)

SSR

1. 유저가 웹사이트에 방문한다.
2. 브라우저는 서버에 콘텐츠를 요청한다.
3. 서버에서는 렌더링 준비를 마친 HTML, JS코드를 응답한다.
4. 브라우저는 전달받은 HTML을 렌더링한다.
5. 브라우저가 JS 코드를 다운로드한 후, HTML에 JS로직을 연결한다.

• 모든 데이터가 HTML에 담겨진 채로 브라우저에 전달되므로 검색 엔진 최적화에 유리하다.
• 자바스크립트 코드를 실행하고 다운받기 전에 HTML이 렌더링되므로 초기 구동 속도가 빠르다. (하지만 JS로직이 아직 연결되지 않은 상태이므로 사용자의 이벤트에 무반응일 수 있다. 즉 Time to View !== Time to Interect)

📍 CSR 단점 보완 방법

초기 로동 속도 보완

• Code Splitting
• tree-shaking
• chunk 분리

SEO 개선

• pre-rendering
• 라이브러리, 웹팩 플러그인을 통해 각 페이지에 대한 HTML파일을 미리 생성해둔 후, 서버에서 요청하는 주체가 크롤러라면 사전에 렌더링 된 HTML버전 페이지를 보여주는 방법을 적용 할 수 있다.

CSR + SSR/SSG 도입하기

• 프레임워크 없이 -> 직접 서버 설정하기
• 프레임워크 사용 -> Next.js / Gatsby

Isomorphic App || Universal Rendering

• 초기 렌더링 방식으로 SSR을 사용하고,그 후로는 CSR을 사용하는 방식