CSR(Client-side Rendering) & 장점?

CSR은 클라이언트 측면에서 화면을 렌더링하는 방식이다.

1. 먼저, 브라우저에서 초기 화면을 로드하기 위해 서버로 요청을 보낸다.
2. 서버는 빈 뼈대만 있는 HTML 을 브라우저에 응답으로 보내준다.
2. 브라우저에서 모든 JS 파일을 한 번에 다운로드한다.
3. React, Vue 와 같은 프레임 워크를 실행한다.

생명 주기 중에서 단 한 번, 초기 구동 시, 리소스(HTML, CSS, JavaScript) 를 모두 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신하기 때문에 페이지 리로딩 없이 자연스러운 페이지 이동이 가능하고, 클라이언트측에서 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응 속도가 빠르고, UX가 우수하다는 장점이 있다. 또한 서버측에서 빈 HTML 뼈대만 보내주기 때문에 서버측의 부하가 적다.

SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유

SPA(Single Page Application)에서는 렌더링 방식으로 보통 CSR을 사용한다.

SPA 에서 기본적으로 사용하는 CSR 방식의 경우, 최초 구동 시, 서버측에서 빈 HTML만 보내주기 때문에 검색엔진이 색인할 만한 컨텐츠가 존재하지 않아 SEO(검색엔진 최적화)에 불리하다는 단점이 있다.

따라서, 검색엔진 최적화 같은 특별한 목적을 갖고 렌더링 방식을 바꾸기 위해 SSR/SSG 가 필요하다.

SSR/SSG란?

SSR

SSR은 말그대로 서버측에서 화면을 렌더링하는 방식이다.

1. 먼저, 브라우저가 서버에 컨텐츠를 요청한다.
2. 서버에서는 즉시 필요한 데이터와 HTML,CSS,JS를 삽입해 모든 렌더링 준비를 마친 코드를 브라우저에 전달한다.
3. HTML 렌더 후, 브라우저가 JS 코드를 다운로드 하고, HTML에 JS로직을 연결한다.

이처럼 모든 데이터가 담겨진 HTML을 서버가 전달해줌으로써, 검색엔진 최적화에 유리한 장점이 있다. 또한 JS코드를 다운받고 실행하기 전에 사용자가 미리 화면을 볼 수 있다. 이렇게 초기 구동 속도가 빠른 반면, 이 때에는 사용자가 버튼을 클릭해도 반응하지 않는 단점이 있다.

SSG(Static Site Generation - Static Rendering)

SSG는 미리 만들어 둔 HTML 페이지를 브라우저에 보내주는 방식으로, 서버에 요청하는 즉시 동적으로 데이터를 반영해 HTML을 만드는 SSR 방식과는 HTML을 생성하는 시점이 다르다. 따라서, 캐싱해 두면 좋은 정적 페이지에 사용하기 적합한 방식이다.

Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

출처:
The Benefits of Server Side Rendering Over Client Side Rendering
[10분 테코톡] 🎨 신세한탄의 CSR&SSR
SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)