SSR 서버 사이드 렌더링

CSR, SSR 모두 콘텐츠를 컨텐츠를 어디서 만들어내는가에 포커싱이 맞춰져 있다. 콘텐츠를 서버에서 만들면 SSR, 클라이언트에서 만들면 CSR.

SSR은 서버에서 html을 미리 만들어서 내려줌. CSR은 클라이언트에서 html을 만든다. 

SSR의 장점은 빠르다는 것이다. 서버는 클라이언트보다 훨씬 성능이 강력하다. 크로미움이나, 브라우저에 비하면 컴퓨팅 파워가 훨씬 강력하다. 

SSR을 구현하기 위해서는 Next.js나 Node.js의 템플릿 엔진 등을 사용할 수 있다. 또한 리액트로도 가능한데, React DOM(리액트와 DOM을 연결시키는 역할)의 hydrate라는 메소드를 사용하면 리액트 DOM 내에서 리액트를 랜더링 할 때 SSR 방식으로 렌더링을 시켜준다. 어차피 Next.js도 이것을 사용한 것이니 걍 Next.js 쓰는게 좋다. 

Next.js의 기능

• 이미지 최적화
• 렌더링 최적화
• 캐싱
• API 프록시
• 도커 이미지 말때도 그냥 리액트 쓰는 것보다 훨씬 편리

 Next.js를 사용하면 API로 받아온 데이터를 바탕으로 화면에 html을 만들어려 내려줄 수 있다. 

SSR은 클라이언트가 서버에 뭔가를 요청했을 때 서버에서 html을 생성하는 시간이 필요하고, 이 시간이 길어질수록 UX는 저하된다. 

때문에 SSR과 CSR을 적절히 섞어서 사용해야 한다. 예를 들어 화면의 프레임은 SSR로 콘텐츠들은 CSR로 내려줄 수 있다. 실시간성을 보장해야 하는 것들만 CSR로 처리하는 것도 좋은 방법이다. 

CSR은 브라우저에서 js를 파싱하는 시간과 DOM을 그리는 시간도 들어간다. 이와 달리 SSR은 html이 완성된 채로 서버에서 내려온다. 때문에 검색엔진이 체감하는 속도도 SSR이 훨씬 빠르다. 때문에 검색엔진은 언제나 빠르게 뜨는 fast 사이트를 우선적으로 노출시키기 때문에 SSR이 SEO에 유리하다.