CSR
CSR이란?
client side rendering을 줄여서 말한 것으로 rendering을 하는 주체자가 client라는 것이다.
나는 react로 web을 개발하기 때문에 여기서는 Browser라고 표현하면 되겠다.
csr은 사용자가 브라우저에 접속을 하게되면 browser에서 server로 요청을 하게 된다.
이렇게 되면 처음에 빈 html 파일이 오게 되고 그다음에 react와 js 소스 코드를 받게 된다.
이 모든 것을 받아서 browser에서 dom 요소로 변환해서 보여주게 되는데, 이것을 CSR 이라고 보면 되겠다.
장점
-
일단 글을 보면 알겠지만 처음에 모든 것을 로딩을 하기 때문에 한번 로딩을 하게 되면 빠르게 UX를 제공한다.
-
update가 일어나거나 하면 부분적으로만 서버에 요청을 하기 때문에 서버의 부하가 작다.
단점
-
처음에 서버에 html을 포함하여 전부 요청을 하기 때문에 page 로딩시간 (TTV: Time to view), (FCP: First Contentful paint)가 오래 걸린다.
-
처음에 html이 빈 페이지로 오고 js가 없으면 아무것도 표시가 되지 않기 때문에 js를 지원하지 않는 검색 엔진 크롤러들이 head, body 이런 부분을 찾아서 검색엔진을 최적화를 시키는데 그게 되지가 않아서 seo (Search Engine Optimization) 최적화가 힘들다.
-
js 및 react 등 모든 소스 코드를 browser가 가지고 가서 처리를 하기 때문에 보안에 취약하다.
-
CDN(content delivery network)에 cache가 안 된다.
CDN이란?
쉽게 설명하면 만약에 한국 서버에서 미국 서버로 무엇인가를 요청할 때 가까운 위치의 (예를 들면 일본) 서버에다가 요청을 하여 일본에서 미국으로 요청을 하여 cache로 가지고 있다가 줄 수 있는데, 물론 방법은 있지만 기본적으로는 이것이 안 되서 더 멀리 있는 서버로 요청을 해야한다.
SSG
SSG란?
Static site generation, 정적인 사이트이다.
SSG는 렌더링 주체자가 server이다.
뒤에 나올 ISR, SSR도 렌더링 주체자가 server인데 rendering 타이밍에 따라 달라진다.
SSG는 서버에 build 할 때 rendering이 된다.
즉, 사전에 만들어진다는 것이다.
그렇게 때문에 server에서 js를 다운받지 않고 build할 때 사전에 만들어지기 때문에 만약 사용자가 다시 들어간다면 다시 불러오지 않고 cdn cache에서 가져올 수 있다.
장점
-
아무래도 JS를 다운받지 않고 완성된 걸 주다보니 page loading 속도가 빠르다.
-
또한 앞서 말했던 것처럼 JS가 필요가 없다.
-
JS가 필요가 없으니 SEO 최적화에 좋다.
-
쓸데없는 것들을 보낼 필요가 없으니 보안이 뛰어나다.
-
CDN 캐쉬가 된다.
단점
-
미리 rendering이 되어서 주는 것이기 때문에 DATA가 정적이다. 잘 바뀌지 않는 사이트는 상관이 없겠지만 그렇지 않다면 단점이 크게 느껴질 것이다.
-
정적인 사이트다보니 사용자별 정보 제공이 어렵다.
ISR
ISR이란?
Incremental static regeneration.
주체자는 여전히 서버이지만 rendering을 주기적으로 rerendering을 한다.
여기서 주기적이란 설정한 주기 만큼을 의미한다.(예를 들어 5분)
SSG와 동일한 원리이지만 주기적인 rerendering이 있다는 것이 차이다.
장점
SSG의 모든 장점 외 추가적으로 데이터가 주기적으로 update 된다는 것이다.
단점
-
실시간 data가 아니다.
-
사용자별로 정보 제공이 여전히 어렵다.
SSR
SSR이란?
Server side rendering.
주체자는 여전히 서버이지만, 앞에 두 개와는 다르게 실시간으로 redering을 해준다.
장점
-
아무래도 JS를 다운받지 않고 완성된 걸 주다보니 page loading 속도가 빠르다.
-
JS가 필요가 없다.
-
JS가 필요가 없으니 SEO 최적화에 좋다.
-
쓸데없는 것들을 보낼 필요가 없으니 보안이 뛰어나다.
단점
-
요청 시마다 rendering을 하기 때문에, 같은 server가 주체자인 SSG와 ISR보다 상대적으로 느리다.
-
같은 이유로 요청 시마다 rendering을 하기 때문에 서버에 과부화가 올 수 있다.(over head)
-
실시간으로 rendering을 하기 때문에 CDN에 cache로 사용이 불가능하다.
