CSR vs SSR

CSR

컴퓨터의 성능이 좋아지면서 SPA 에서 쓰이는 기법으로, 클라이언트 측에서 모든 것을 하는 거를 의미합니다.
필요한 부분만 렌더링하여 사용자가 원하는 UX 를 반영할 수 있습니다.

서버로부터 어떠한 리소스를 받아 해석하고 화면에 렌더링하는 방식입니다. (서버가 하는 일은 json 만 보내는 것입니다.)
예를 들면, 서버에서 <div id='root'> 가 들어 있는 index.html 을 보내면, 처음에 접속하면 빈 화면만 보입니다.
이제 그 후, 리액트 라던지, js 라던지 이런 어플리케이션을 구동하는 모든 소스를 가져옵니다.

용량이 크면 클수록 처음에 화면에 로딩되는데 시간이 길어지는 단점이 있고, SEO 에서 사용하기 좋지 않습니다.
(SEO 가 좋지 않는 이유는 처음에 body 가 비어 있기 때문에 검색 엔진으로 가져오는데 힘들다고...)

SSR

서버에서 필요한 데이터를 모든 데이터를 가져와 html 파일을 만들어서 필요한 js 와 함께 클라이언트로 보내줍니다.
그렇기 때문에 처음에 화면이 로딩되는데 시간이 짧다는 장점이 있지만, 전체적인 웹사이트를 전부 가져와 한 번에 다시
전체 렌더링을 하기 때문에 UX 의 한계가 있고, 서버 과부화가 올 가능성이 있습니다.

Gastsby

리액트 + Gastsby 를 사용하여, 리액트로 만든 웹페이지를 정적으로 만들어서 배포할 수 있습니다.
그래서 동적 + 정적 을 전부 사용할 수 있습니다.

Next.js

리액트 + Next.js 를 사용하여, 강력한 서버 사이드 렌더링을 제공할 수 있습니다.
Next.js 를 사용하여 첫 페이지를 정적으로 만든 뒤, 그 다음 동작을 CSR 기존의 방식을 적용하는 방식을 할 수 있다.