[React] SSR과 CSR(SPA) 차이

1. 개요

먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다.

이러한 렌더링을 하는 방식이 SSR과 CSR이 있는데, 이 두 가지 렌더링 방법에 대한 차이를 이해해보려고 합니다.

 

 

 

2. SSR(Server Side Rendering)

https://narup.tistory.com/235

[Next.js] SSG, SSR 개념 정리

SSR은 Next.js 프레임워크에서 동작하는 렌더링 방법인데 자세한 설명은 위에 나와있고, 간략하게 설명을 하면

우리가 서버에게 웹 페이지를 요청할 때마다 새로고침이 일어나며, 서버에서 새로운 HTML을 그때그때마다 받아와 서버에서 그때그때마다 렌더링 하는 것을 말합니다.

 

 

 

3. CSR(Client Side Rendering), SPA(Single Page Application)

Next.js가 아닌 React.js는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)방식으로 렌더링합니다.

이는 모바일 친화적으로 사용될 수 있는 서비스가 필요해서인데, 그때그때마다 렌더링을 할 경우 모바일에서 성능이 부담이 갔기 때문입니다.

이때 나온 개념이 SPA(Single Page Application)으로, 최초 한번 전체 페이지를 로딩한 이후 부터에는 브라우저 내부에서 데이터만 변경해서 사용하는 방식입니다. 이러한 SPA 방식은 트래픽을 감소시키고 사용자에게 최적화된 환경을 제공할 수 있게 됩니다.

따라서 서버는 단순하게 Json 파일만 보내주고, 클라이언트 측에선 초기에 전송받은 HTML과 javascript를 통해 렌더링을 수행합니다. 이러한 과정을 CSR(클라이언트 사이드 렌더링)이라고 합니다.

 

3-1. SPA의 특징

클라이언트 사이드 렌더링을 수행하는 SPA는 서버에서 View를 렌더링하지 않고, HTML, JS, 각종 리소스를 서버에서 다운 받은 후 브라우저에서 렌더링을 수행하기 때문에 초기 View의 로딩 속도가 오래 걸리는 단점이 있습니다.

반면, 사용자의 액션에 따라 필요한 부분만 다시 읽어드리기 때문에 인터랙션이 빠르다는 장점이 있습니다.

 

 

3-2. SEO 문제

SEO란, Search Engine Optimization의 약자로 검색 엔진 최적화라는 의미인데 네이버나 구글과 같은 검색 엔진이 SPA로 만든 웹 페이지가 노출 되기 위한 과정을 말합니다.

SSR같은 경우 서버측에서 렌더링한 페이지(완성된 페이지)를 클라이언트로 전달하기 때문에 문제가 없는데, SPA 같은 경우는 완성된 페이지가 아닌 html+js+css와 같은 리소스를 받아서 브라우저 측에서 조합하기 때문에 검색 엔진에 노출되기가 어렵다는 문제가 있습니다.

*실제로 조회하면 html 뼈대만 있는 빈 페이지만 노출되게 됩니다.

 

 

 

 

참고

https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/