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로 미리 렌더링을 한다.
출처: https://velog.io/@hjthgus777/CSR-SSR-SSG
https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea
(영문)
Client Side Rendering
This is what most of the web frameworks like Angular and React support out of the box. This is commonly suitable for single page applications (SPA) and applications with lot of user interactions (e.g Games) and highly dynamic content such as forms, and chat applications.
Basically web browser will initially load an empty HTML file. Javascript and styles which are loaded after, are responsible for rendering the full user friendly page in the web browser.
Server Side Rendering
Main disadvantage of CSR is that it is not Search Engine Optimized. Therefore most of the web frameworks, provide the ability to render the pages in server as well.
Not like CSR, Each page will initiate a request to App Server, where it dynamically renders and serves full HTML for that page. Since it requests and renders the page each time user requests, page serve time is more than a CSR application.
Static Site Generation
To avoid the rendering in each request, why don't we generate those files in the build time, so that we can instantly serve the pages when user requests it.
This technique will come in handy if you want to build a web application with full of static content like a blog. One drawback is that the content might be out-of-date and your application is needed to build and deploy each time when you change the content. (in a CMS)
Source: https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea
