리액트 와 CSide Rendering vs Server Side Rendering (CSR SSR 차이) 그리고 MPA 와 SPA

MPA와 SPA

MPA (Multi Page Application) 말그대로 여러개의 페이지로 만들어진 어플리케이션을 의미한다.

이용자는 서버에 데이터를 요청하고 서버는 사용자에게 맞는 페이지를 구성하고 요청한 페이지 자체를 제공해준다.

 

 

SPA (Single Page Application) 하나의 페이지로 구성된 어플리케이션을 의미한다.

React는 SPA를 기반으로 하며 client가 HTML을 다운로드 받을 때 모든화면을 구성 하는 javascript를 다운로드 받고

그 javascript를 이용하여 서버에 데이터만 요청하고 사용자의 화면을 변화시킨다.

 

단점으로는 최초 HTML을 다운로드할 때 웹사이트의 모든 화면을 구성하는 스크립트들을 다운받아와야하는데

이때의 로딩속도가 길다.

 

CSR과 SSR

 

2-1. CSR이란?

리엑트는  CSR 방식으로 작동된다.

Client Side Rendering의 약자로 클라이언트 자체에서 화면을 구성하는 것을 의미한다.

CSR의 장점으로는 화면이동시 깜빡임 없이 부드럽게 이동이 가능하며, 프론트엔드와 백엔드가 완전히 분리되어서

분업화가 용이하다.

 

단점으로는 SEO에서 문제가 발생되는데 네이버, 다음 등 크롤링을 하러 들어오는 봇들은 크롤러에 자바스크립트 엔진이 없어서 빈 페이지만 인식을 한다. (구글같은 경우 자바스크립트엔진이 있어서 크게 문제가 없다고 한다.)

이를 해결하기위해 Next.js라는 React전용 프레임워크가 있는데 클라이언트가 최초 HTML을 다운로드 받을 때 SSR로 제공 후 다음부터 CSR방식으로 작동 되게 할 수 있다고 한다.

 

CSR 과정

 

 

2-2 . SSR이란?

Server Side Rendering의 약자로 서버에서 클라이언트가 요청한 페이지 자체를 만들어서 제공해준다.

대부분 MPA방식으로 이루어진 웹이기 때문에 초기 HTML을 불러오는 속도가 빠르고 SEO에 용이하다.

 

단점으로 는 서버가 페이지를 구성 해서 보내주기 때문에 새로고침처럼 깜빡거리는 현상이 나타난다

 

일반적으로 SPA로 구성된 웹의 경우 CSR을 이용하여 화면 구성하고 MPA로 구성된 웹경우 SSR방식이지만

SPA가 곧 CSR은 아니니 유의하자.

SSR과정