CSR, SSR, Next.js

CSR(Client-side Rendering)이란

• 클라이언트(브라우저)에서 렌더링을 처리하는 방식

• 사용자의 요청에 따라 필요한 부분만 응답 답아 렌더링 한다.

1. 클라이언트에서 초기 화면 로드를 위해 서버에 요청을 보낸다.

2. 서버는 화면 표시에 필요한 리소스를 보낸다. (모든 JS파일을 다운받기때문에 초기 로딩 시간이 더 오래 걸린다.)

3. 다운로드가 완료되면 JS가 실행되고, 데이터를 위한 API를 불러온다.

4. 서버에서 API 요청에 대한 응답을 보낸다.

5. 클라이언트에서 상호작용이 가능하다.

장점

• 초기 페이지 로드를 제외하면 SSR에 비해 빠르다.

• 스크립트가 캐싱된 경우 인터넷 연결 없이도 실행할 수 있다.

• 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다.

• 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험을 할 수 있다.

• 서버 트래픽을 감소시키고 사용자에게 더 빠른 인터렉션을 제공해준다.

단점

• 초기 페이지 로드 시간이 SSR에 비해 느리다.

• SEO(검색 엔진 최적화)에 불리하다. 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에 빈 페이지처럼 보이기 때문이다. 구글 검색엔진의 경우 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만, 다른 검색엔진의 경우 별도의 보완작업이 필요하다.

• 브라우저가 html, js 등을 다운로드할때까지 사용자는 빈페이지를 보게된다.

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

• SPA는 위의 CSR 방식을 채택하고 있다. 따라서 SEO에 불리하고, 초기 페이지 로드 시간이 느리다는 단점이 있다.

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