> For the complete documentation index, see [llms.txt](https://sharryhong.gitbook.io/front-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sharryhong.gitbook.io/front-end/front-end-dev/next.js/csr-ssr-next.js.md).

# CSR, SSR, Next.js

### CSR(Client-side Rendering)이란&#x20;

* 클라이언트(브라우저)에서 렌더링을 처리하는 방식&#x20;
* 사용자의 요청에 따라 필요한 부분만 응답 답아 렌더링 한다.

1. 클라이언트에서 초기 화면 로드를 위해 서버에 요청을 보낸다.&#x20;
2. 서버는 화면 표시에 필요한 리소스를 보낸다. (모든 JS파일을 다운받기때문에 초기 로딩 시간이 더 오래 걸린다.)
3. 다운로드가 완료되면 JS가 실행되고, 데이터를 위한 API를 불러온다.&#x20;
4. 서버에서 API 요청에 대한 응답을 보낸다.&#x20;
5. 클라이언트에서 상호작용이 가능하다.&#x20;

### 장점

* 초기 페이지 로드를 제외하면 SSR에 비해 빠르다.
* 스크립트가 캐싱된 경우 인터넷 연결 없이도 실행할 수 있다.
* 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다.
* 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험을 할 수 있다.
* 서버 트래픽을 감소시키고 사용자에게 더 빠른 인터렉션을 제공해준다.

### 단점

* 초기 페이지 로드 시간이 SSR에 비해 느리다.
* SEO(검색 엔진 최적화)에 불리하다. 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 빈 페이지처럼 보이기 때문이다. 구글 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 다른 검색엔진의 경우 별도의 보완작업이 필요하다.
* 브라우저가 html, js 등을 다운로드할때까지 사용자는 빈페이지를 보게된다.

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

* SPA는 위의 CSR 방식을 채택하고 있다. 따라서 SEO에 불리하고, 초기 페이지 로드 시간이 느리다는 단점이 있다.&#x20;
* **Next.js**는 초기 페이지는 SSR로, 다음 페이지부터는 CSR 방식을 구성할 수 있어 SEO에도 좋고, 초기 페이지 로드 시간이 빠르고, 네이티브 앱과 비슷한 사용자 경험을 할 수 있는 등 각 방식의 장점으로 웹 애플리케이션을 만들 수 있는 프레임워크이다.&#x20;