CSR (Client Side Rendering)
최초에 single Page만 서버로부터 불러와 렌더링하고 그 이후에는 모든 것을 클라이언트 사이드에서 렌더링하는 것이다.
하지만 여러가지 문제점을 야기하는데 SEO(검색 엔진 최적화) 문제 가 있다. 구글 크롤러와 같은 여러 웹 크롤러들은 웹 사이트의 HTML을 읽어들이고 인덱싱하여 검색 엔진이 해당 페이지를 잘 찾아낼 수 있도록 한다. 그런데 클라이언트 사이드 렌더링 방식으로 만들어진 웹 사이트는 최초에 빈 HTML 만 렌더링하기 때문에 크롤러들이 제대로 컨텐츠를 읽어들일 수 없다는 문제가 있다.
또한 클라이언트 사이드 렌더링 방식은 첫 페이지 로딩이 느리다.
왜냐하면 최초로 서버에서 받은 빈 HTML은 페이지 로드에 필요한 자바스크립트를 참조하고 있는데,
클라이언트에서 렌더링 할때 페이지 로드에 필요한 자바스크립트 코드, 프레임워크나, 라이브러리 소스 코드를 모두 불러오기 때문이다.
물론 페이지를 한 번 렌더링하고 난 이후에는 필요한 부분만 렌덜이하기 때무에 비교적 효율적이다.
SSR (Server Side Rendering)
사이트 주소 요청시 서버가 필요한 데이터를 받아 바로 사용자에게 보여주게 하는 방시이다.
CRS 보다 더 빠르게 사용자에게 화면을 보여줄 수 있다.
HTML 에 모든 정보가 담겨져 있어 좀 더 효율적인 SEO 를 할 수 있다.
하지만 클릭때마다 서버에서 데이터를 요청해서 과부화에 걸리기 쉽다. 또한 사용자에게 화면제공은 되지만 동적인 JS를 받아오는데 시간이 걸리므로 동작하지 않을 수 있다는 단점이 있다.
SSG(Static Site Generation)
위의 CSR 과 SSR의 단점들을 보완하기 위하여 좀더 매끄러운 서비스를 위하여 미리 서버에 화면을 저장해 두었다가 꺼내쓰는 방식이다.
즉 정적 사이트 생성은 빌드 시 리액트 앱을 HTML로 미리 렌더링을 한다.
