SSR ,CSR

• 서버사이드 렌더링을 통하여 얻을 수 있는 가장 큰 이점은 검색엔진 최적화

CSR, SSR

---

SPA

Single Page Application (SPA) 즉 리액트나 앵귤러같이 초기에 서버에서 JSON 형태로 값을 받아오고 나면 그 뒤로부터는 마치 네이티브 앱을 사용하는 것처럼 작동하는 웹앱을 말한다.

새로고침 방식의 웹과 달리 필요한 static파일을 한번에 또는 나눠서 다운받고 필요한 데이터만 서버로부터 동적으로 받아 네이티브한 형태인 것.

초기 페이지에서 모든 리소스를 다운받지 않고, 리소스를 청크(Chunk) 단위로 묶어서 해당 리소스에 대한 요청이 있을 때만 다운로드 받도록 하는 방법을 적용하면 초기 구동속도 문제를 많이 완화시킬 수 있다.

CSR?

Client side rendering

최초 로딩시 HTML, JS, CSS 등 리소스를 불러오기에 느리다.

하지만 그 이후는 새로고침없이 빠른 동작이 가능.

...
<div id="root">
  /* empty*/
</div>
<script src="...."></script>

SPA의 구조는 위와 같다.

JS가 로딩을 하면 root를 기반으로 모든 컴포넌트를 JS로 랜더링하는 것을 SPA라고 한다.

서버에서 HTML코드를 받아 랜더링을 해주는 것이 아닌, 클라이언트사이드에서 JS파일을 받아 화면을 그려내는 것이다.

단점

• SEO최적화가 잘 안된다, CSR로 페이지를 구성하게 되면 SEO가 네이버, 다음같은 사이트에서 되지 않는 이유도 이와 같다.

  구글크롬은 JS엔진이 있어서 랜더링된 내용물들을 알고있지만, 네,다는 빈 화면이라고 인식해 크롤러가 내용을 수집하지 못해 웹에 노출시키지 못한다.

• 첫 로딩이 느리다.

• Cloud flare, cloud front와 같은 캐싱시스템 사용 X( 잘 안됨..)

  서버에서 응답받을 때 blank한 페이지이기 때문에,

Isomorphic(동형 == 같은 형태) app => CSR + SSR 장점을 합친 앱의 예제로 NEXT.JS

SSR

서버요청시마다 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청하는 방식

서버에 매번 요청을 하기에 트래픽, 서버 부하가 커진다.

SPA에서 SSR을 구성할 수 있다. next.js를 사용하면 react로 코드작성하면서 SSR 가능.

vercel사 next꺼, swr라이브러리도 만듬( fecthing )

SSG (Static Site Generation)으로 리액트로 만든 HTML파일을 캐싱해 첫 로딩을 줄일 수 있다.

요청 => SSG(HTML만듬) => HTML이 CSR로 같이 동작함.

첫 페이지 로딩(서버사이드) => 링크 => CSR로 동작

Prerender IO를 이용해 캐싱, SEO문제만 우선적으로 해결 가능.

결론

CSR은 비용이 적게들고 필요한 부분만 다시 읽어와서 빠른 인터렉션이 가능. SSR은 첫 로딩은 빠르나 요청마다 새로고침이 일어나 UX가 좋지 않다.

이 둘의 장점들을 모아서 만든게 next.js. 첫 로딩은 SSR, 그 다음은 CSR로 동작함.

프로젝트의 요구사항에 맞게 선택하는 것이 중요