Intro
Next.js를 공부하기 앞서 렌더링 공부가 필요하다고 느꼈습니다.
SSR, CSR, SSG의 각각의 개념과 차이점을 알아보겠습니다!
웹에서 렌더링이란?
-
HTML, CSS, JS 등 개발자가 작성한 문서들을 서버에서 응답받아 브라우저가 화면에 그려주는 동작입니다.
-
브라우저는 렌더링을 하기 위해 각각의 렌더링 엔진을 가지고 있습니다.
-
각각 브라우저마다 해당 엔진의 종류는 다를 수 있습니다.
Server Side Rendering(SSR)
-
브라우저가 서버에 요청하면 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송하고 브라우저에서 응답받은 HTML을 렌더링하는 방식입니다.
-
렌더링이 준비된 HTML 파일을 브라우저에서 로드하기 때문에 첫 페이지 로딩이 빨라지는 이점이 있습니다.
-
이미 만들어진 페이지를 검색엔진 크롤러가 요청에대한 응답을 받기 때문에 SEO에 친화적입니다.
-
서버에서 매번 페이지를 새로 렌더링하기 때문에 화면이 부드럽지 않습니다.
(페이지 이동할때마다 새로고침 현상) -
또한 위 사항 때문에 서버 부하가 생길 수 있으며, 서버 비용 또한 많이 듭니다.
Client Side Rendering(CSR)
-
클라이언트(브라우저) 사이드에서 렌더링을 책임지는 방식 입니다.
-
최초의 HTML파일을 받는 것을 제외하고 페이지 렌더링을 위한 별도의 HTTP 통신을 할 필요가 없습니다.
-
따라서 서버의 요청없이 클라이언트에서 라우팅을 담당하기 때문에 후속 페이지 로드 시간이 훨신 빠르고 부드럽습니다.
-
서버는 오직 Ajax를 통해 필요한 데이터를 주고 받는 역할만 수행합니다.
-
자바스크립트의 번들의 크기의 영향을 많이 받기 때문에 코드분할을 고려해야합니다.
-
브라우저에서 HTML을 컴파일하기 전에 기본 HTML, CSS 및 모든 필수 스크립트를 로드하기 때문에 초기 페이지 로드 시간이 SSR에 비해 느립니다.
-
검색 엔진 크롤러가 페이지를 처음 방문했을때 빈 페이지기 때문에 SEO에 친화적이지 않습니다.
CSR의 장점은 SSR의 단점이고 CSR의 단점은 SSR의 장점이다!
이러한 딜레마를 완전하게 해결하지 못하지만 두 방식의 가운데에 해당하는 렌더링 방식이 SSG 입니다.
Static Site Generator(SSG)
-
SSR처럼 서버로부터 HTML을 받아오지만 HTML 파일 생성시점이 빌드타임 입니다.
-
위 처럼 화면을 서버에서 미리 만들어서 전송해주는 기법입니다.
-
이미 생성된 HTML을 받기 때문에 SEO 친화적입니다.
-
모든 URL에 대해 개별 HTML 파일을 생성해야 하는 단점이 있습니다.
