서론

캐싱이 잘 되면 데이터 비용 save !
데이터 센터가 한 나라에만 있어도 전세계적으로 빠르게 서빙 가능한데 CSR은 효율적으로 사용하지 못한다.
=> 아직 왜 그런지 잘 이해하지 못한 부분 - ( 캐싱을 못하기 때문에 매번 페이지 접속 시 새로 받아와서 데이터 센터를 이용하지 못하기 때문인가..? )

또, SEO최적화가 잘 안된다.
SEO란 Search Engine Optimization 검색엔진최적화
웹사이트 만들면 내용이 검색엔진에서 키워드가 찾아지면 좋다.
구글은 크롤링하는 로봇이 웹사이트를 돌며 분석-> 결과값을 보여주는 형식.

처음에 blank page를 보게되면 크롤링 로봇이 빈페이지구나 하고 키워드 찾기를 포기한다.
구글 SEO에서 논란 되는 것이, 구글은 자바스크립트 읽어 CSR을 사용해도 SEO 성능이 나빠지지 않는다고 주장한다.
하지만, prerenderIO 사용하는 것 추천한다고 작성되어 있음을 볼 때, CSR에서 키워드 찾기가 안될 수도 있음을 암시한다.

요약

CSR이 페이지 렌더링도 빠르고 데이터 비용도 아낄 수 있는 여지가 높다. 하지만 만약에 SEO가 정말 중요하고 CloudFlare, CloudFront 등 캐싱 기술을 활용하고 싶으면 SSR이 더 적합할 수 있다.
만약에 CSR과 SSR의 장점을 모두 이용하고 싶으면 NextJS같은 프레임워크도 존재한다.
또는, CSR+ PrerenderIO를 이용해서 캐싱과 SEO문제만 우선적으로 해결할 수 있다.

CSR 하는 리액트, 뷰 , 앵귤러

장점

속도 빠름
코드 효율적 작성 가능

단점

첫번째 로딩 느림
seo 안좋다.
캐싱 안됨

해결하기 시작한게 Isomorphic app!

양측 장점을 다 모아둔 것 (CSR+SSR)
Isomorphic : 동일의 의미대로, 서버와 클라이언트가 같은 코드를 사용함으로써 코드를 줄일 수 있다.
Isomorphic app은 서버와 클라이언트 모두에서 실행할 수 있는 응용 프로그램을 의미한다.

우리는 현재 Node.js (서버 측 애플리케이션을 위한 런타임 환경), React (Facebook에서 구축한 동형 JavaScript 라이브러리)
ex) verser회사의 Next.js

Next.js의 SWR(요청패키지) 캐슁을 잘 할 수 있는 패키지다.

어찌됐든 NEXT.js 사용하면 Server Side Rendering을 리액트로 할 수 있다.
리액트는 일반적으로 client side rendering이지만,
코드는 리액트로 쓰고, 서버는 Next쓰면 서버에서 react를 사용해도 모든게 다 렌더링 된 상태로 html을 뱉어주는 형태로 코드를 작성할 수 있다.
=> html 뱉어준다는 것만으로, 캐싱 안되는것 seo해결

첫번째 문제였던 느린 로딩도 해결할 수 있음 => 캐싱을 해서 static site generator(정적문서 생성)

3가지 대표적 문제 해결가능
CSR의 장점인 스피드 향상, JSON으로 CSR할수 있다는 자체가 장점
그대로 다 가져갈 수 있음

첫 요청일 때만 SSR로 동작하고, 링크 클릭하면 그 다음부터 CSR로 동작한다

여기서 든 생각
기존에 리액트로만 만든 사이트 prerenderIO 적용해보는 것은 어떨까?

추가로 읽고 정리할 사이트
https://www.lullabot.com/articles/what-is-an-isomorphic-application
정적 페이지에 대해..
https://blog.lgcns.com/2336
정리 엄청 잘 되어있다!