CSR vs SSR

렌더링이란?

• 요청해서 받은 내용을 브라우저 화면에 표시하는 것

렌더링 과정

1. Loader가 서버로부터 정보들을 불러옴
2. 파싱을 통해 문서를 DOM 트리로 만든다.
3. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
4. CSS 설정/레이아웃 위치 지정
5. 렌더링 트리가 그려짐

서버사이드 렌더링(SSR)

서버사이드 렌더링(SSR)은 페이지를 이동할 때마다 새로운 페이지를 요청한다.
모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.

장점

• 검색엔진 최적화 (SEO) 가능
• 성능 개선
  • 첫 렌더링된 html을 클라이언트에게 전달해 주기때문에 초기로딩속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게 된다.

단점

• 프로젝트의 복잡도
• 페이지 이동시 화면 깜빡임
• 서버 렌더링에 따른 부하 발생

클라이언트 사이드 렌더링(CSR)

클라이언트에서 렌더링하는 방식이다.(Client Server Rendering)

장점

• 첫 요청할때 한페이지만 불러오게 된다. 그 후 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다.
  즉, 필요한 부분만 리로딩 없이 서버로 부터 받아서 화면을 갱신하게 된다.

단점

• 초기 구동속도가 느리다.
• 검색엔진 최적화가 어렵다.

참조

Next.js

• 기본적으로 서버 렌더링
• 보다 빠른 페이지 로드를 위한 자동 코드 스플리팅
• 간단한 클라이언트 사이드 라우팅(page 기반)
• 익스프레스 혹은 어떤 Node.js HTTP server로 구현이 가능
• 바벨과 웹펙 설정으로 사용자 정의 가능
• Hot Module Replacement(HMR)을 지원하는 웹팩 기반 개발 환경