.png)
CSR (Client Side Rendering)
-
렌더링의 주체가 서버가 아닌, 클라이언트이다.
-
서버 측에서 텅텅빈
index.html을 클라이언트 측에게 보내준다. -
이후 렌더링에 필요한 JS파일, 관련 소스코드를 받아 클라이언트 측에서 아무것도 없는
index.html에 DOM 요소를 그려나가는 방식이다. (해당 url로 접속하거나, 새로 고침을 했을때 화면이 살짝 깜빡이는데 이 현상이 빈index.html에 DOM 요소를 그리기 때문이라고 한다.) -
추가로 데이터가 필요할 경우, JSON 형식의 데이터를 받은 후 이들을 기반으로 최종적인 화면을 렌더링하게 된다.
-
TTV와 TTI의 시점이 같다. (화면을 봄과 동시에 상호작용할 수 있다.)
-
React,Vue,Angular가 CSR의 대표적 예시이다.
문제점
-
JS 파일이 클 경우, 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있다.
-
좋지 않은 SEO(검색 엔진 최적화) 성능이다. 즉, 렌더링에 필요한 js파일을 받아오기 전까지
index.html이 비어있기 때문에 검색 엔진에 노출되기가 어려워진다.
SSR (Server Side Rendering)
>
-
렌더링의 주체가 클라이언트가 아닌, 서버측에 있다.
-
서버 측에서 관련 js 파일 및 소스코드와
index.html을 조합하여 클라이언트 측에게 보내준다. -
클라이언트는
html문서를 받아와 바로 사용자게에 보여준다. -
CSR보다 비교적, 화면 로딩이 빨라질 수 있다.
-
모든 컨텐츠가 담겨있는
html파일을 받아오기 때문에, 좀더 효율적인 SEO 성능을 갖게 된다.
문제점
-
클라이언트가 페이지를 이동하거나, 혹은 요청할 때 화면에서 바뀌지 않아도 되는 부분까지 계속해서 렌더링 되는 단점이 있다. ( ex> Nav, footer)
-
위와 같은 이유로 인해, 서버가 과부화가 걸리기 쉽다.
-
사용자가 CSR보다 비교적으로 빠르게 화면을 확인할 수 있지만, 동적으로 처리할 JS 파일의 fetch가 늦기 때문에 반응이 늦어지는 경우가 있다. (TTV, TTI의 공백이 길다.)
TTV(Time To View): 사용자가 화면을 볼 수 있을 시점
TTI(Time To Interact): 사용자가 상호작용을 할 수 있는 시점
NEXT.js
-
SSR의 단점인 불필요 렌더링, CSR의 단점인 낮은 초기 진입 속도와 SEO 성능 저하를 줄이고 두가지 렌더링 방식의 장점을 살리고자 나타난 프레임 워크이다.
-
NEXT.js를 통해 초기 진입은 SSR방식으로, 채워진
html파일을 받아와 초기 화면 진입 속도를 늘리고 SEO 성능을 향상시킬 수 있으며 그 이후에는 CSR의 방식을 적용하여 불필요 렌더링 줄임을 통해 서버의 과부화를 비교적 줄일 수 있다.
Reference
