(웹 작동 방식) SSR, CSR, 그리고 SPA, MPA

SSR (Server Side Rendering)

보통의 웹사이트는 브라우저에서 요청을 보내면 프론트 서버에서 필요한 요청을 백엔드로 다시 보냅니다.

백엔드는 그 필요한 요청을 해결하기 위해 데이터베이스에서 데이터를 받아와서 프론트 서버로 보내주고

프론트 서버에서는 받아온 데이터를 HTML과 함게 브라우저로 보내줍니다.

즉 서버에서 렌더링을 마치고 데이터가 결합된 HTML을 브라우저에 받아와주는 방식입니다.

이 방식을 SSR (Server Side Rendering) 이라고 하며 이는 데이터의 흐름이 순서대로 진행됩니다.

SSR은 화면의 전체가 한방에 그려진다는 장점이 있지만 과정이 길어 로드가 오래걸릴 수 있다는 단점이 있습니다.

 

 

CSR (Client Side Rendering)

그리고 React, Vue, Angular 등에서 많이 쓰이는 CSR (Client Side Rendering) 방식이 있는데

먼저 브라우저에서 페이지를 데이터 없이 프론트 서버에서 화면만 우선으로 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아옵니다. (보통 이 상태에서는 로딩화면을 보여줍니다)

그 후 백엔드 서버에 직접 요청하여 데이터를 받아옵니다.

즉 화면은 처음 한번만 받아오고 데이터만 바꿔가면서 화면을 변화시켜줍니다.

SSR과는 다르게 데이터를 완전히 받아오기 전에 로딩창을 빠르게 보여줌으로써 사용자에게 '아 무언가가 로딩되고 있구나' 라는 인식을 시켜줍니다.

단점이 있다면 초기 데이터를 불러와서 렌더링하는 과정에서 받아오는 전체 속도는 SSR보다 느릴 수 있습니다.

또 기존의 페이지에는 로딩화면밖에 없기 때문에 검색엔진에 있어서 외부에서 검색할 때 우선순위가 밀린다는 단점이 있습니다.

 

 

SPA (Single Page Application)

SPA (Single Page Application)는 한개의 페이지로 작동하는 어플리케이션을 말합니다.

React, Angular, Vue 등으로 만드는 페이지들은 보통 SPA 페이지이며

반대로 일반적으로 여러 페이지로 작동하는 어플리케이션은 MPA(Multi Page Application) 이라고 합니다.

하지만 React나 Vue등을 사용하면 무조건적으로 SPA으로만 만들지는 않고

사이트의 특징에 따라서 SSR로도 만들어야 하는 사이트가 있을 수 있기 때문에

React 에서는 Next.js를 이용하여 SSR 방식으로 만들 수 있고 Vue 에서는 Nuxt.js를 이용하여 SSR 방식으로 만들 수 있습니다.