CSR, SSR, SSG 렌더링 방식을 알기 전에 SPA와 MPA의 개념부터 알아야 한다. 이들은 무엇일까?
1. SPA, MPA
SPA
SPA(Single Page Application)은 단일 페이지로 구성된 웹 어플리케이션이다.
웹 어플리케이션에 필요한 모든 리소스를 최초 렌더링 시, 한번에 다운로드 하고 이후 새로운 페이지 요청이 있을 때 갱신에 필요한 리소스만 서버로부터 전달받아 페이지를 구성한다.
📌 즉, SPA는 최초에 페이지를 로딩 하고 페이지 리로딩 없이 필요한 부분만 서버로부터 전달받아 회면을 갱신하는 것이다. 따라서 화면의 깜빡임 없이 자연스럽게 페이지가 이동하기 때문에 더 나은 사용자 경험을 제공할 수 있다.
🤔 하지만 SEO에 최적화 되어있지 않다.
SPA는 기능별로 구분되어 있는 페이지들을 하나의 html 파일에서 컨트롤 한다.
검색엔진의 크롤러는 링크를 타고 돌아다니며, 페이지별로 html 파일을 읽어서 각각의 페이지에 색인을 만들고 검색결과로 색인된 페이지를 보여준다.
SPA는 html 파일이 하나이기 때문에 여러 페이지의 뷰가 단일한 Meta data(title, discription)로 보인다. 따라서 검색엔진에 노출되기가 어렵다.
✔️ SPA SEO 최적화 방법
SSR 렌더링
일반적으로 SPA는 CSR을 활용한다. 하지만 SSR을 사용하여 SEO에 최적화된 SPA를 만들 수 있다.
MPA
MPA(Multi Page Application)은 여러 페이지로 구성되어 있고, 새로운 페이지를 요청할 때마다 서버에서 리소스가 다운되는 전통적인 웹페이지 구성 방식이다. 페이지 이동/ 새로고침 시 전체 페이지를 다시 렌더링한다.
MPA는 페이지마다 html 파일이 존재하기 때문에, 검색엔진 크롤러가 각각의 페이지마다 고유의 색인을 만들어 검색엔진에 노출되기 쉬워 SEO에 최적화 되어있다.
🤔 하지만, 페이지를 이동하면 전체 페이지를 다시 렌더링하기 때문에 속도가 느리며 페이지가 많기 때문에 지속적으로 유지보수 하는 것이 어렵다.
SPA는 소셜 플랫폼과 같은 SNS에 적합할 것이고, MPA는 아마존, 이베이 같은 여러 제품 및 서비스를 다루는 전자 상거래 또는 많은 콘텐츠를 다루는 플랫폼에 적합할 것이다.
2. CSR, SSR, SSG
일반적으로 SPA는 CSR 방식을, MPA는 SSR 방식을 사용하게 된다.
SPA는 최초 렌더링 시 리소스를 한번에 다운로드 하고 이후 새로운 페이지 요청이 있을 때 갱신에 필요한 리소스만 서버로부터 전달받아 페이지를 구성하기 때문에 CSR 방식을 사용한다.
MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 리소스를 받아오기 때문에 SSR 방식을 사용하게 된다.
📌 CSR, SSR은 페이지가 몇개인지, 렌더링을 어디서 하는지에 따라서 달라지는 개념이다.
CSR
CSR(Client Side Rendering)은 클라이언트측에서 렌더링하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에, 사용자의 요청이 올 때마다 클라이언트가 서버에서 리소스를 받아와 렌더링 한다.
= 초기로드시 빈 HTML과 모든 로직이 담긴 JS를 로드한다.
= 빈 HTML에 Js를 이용하여 DOM을 동적으로 그려낸다.
👍🏻 장점
- js만으로 완전히 페이지를 만들 수 있다.
- 초기 로드 후, 렌더링 속도가 빠르다.
-> 페이지 일부만 변경할 경우, 서버에 해당 데이터만 요청하면 되기 때문에!
-> 예를들어, header/ footer은 공통이므로 가운데 body만 새로 받아온다.
🤔 단점
- html 파일 하나만 받아와서 작동하기 때문에 SEO에 취약하다.
- 초기 로딩 시 모든 로직이 담겨있는 js를 다운로드 하다보니 초기 로딩 속도가 느리다.
-> code-splitting을 통해 js 번들 크기를 줄여 초기 로딩 속도 개선 가능
-> SPA에 SSR, SSG를 도입하는 것도 방법이다. ( ✔️ Next.js사용, 이는 React에서 SSR/SSG를 사용할 수 있도록 해주는 프레임워크이다.)
SSR
SSR(Server Side Rendering)은 서버측에서 렌더링하는 방식이다. 서버에서는 요청이 들어온 즉시 페이지에 필요한 리소스를 html에 삽입하여 모든 렌더링 준비를 끝내고 클라이언트에게 전달한다. 클라이언트는 전달받은 것을 다운로드 하고, 사용자에게 완성된 사이트를 보여준다.
👍🏻 장점
- SEO에 유리하다.
-> 이미 서버에서 다 만들어진 html을 크롤링할 수 있기 때문 - 클라이언트에는 서버로부터 이미 렌더링 된 html을 받고 다운로드만 하면 되기 때문에 초기 로딩 속도가 빠르다.
🤔 단점
- 서버에서 미리 전체를 렌더링 하기 때문에, 컴포넌트 로딩이 오래 걸리면 사용자는 빈화면을 볼 수 있다.
- 사용자가 요청할 때마다 새로운 html을 받아오기 때문에 화면 깜빡임이 생긴다.
- 초기 로딩 속도는 CSR보다 빨라도, 페이지 이동 속도는 느리다.
-> header/footer과 같은 공통 부분도 모두 다시 불러옴
SSG
SSG(Static Site Generation)는 클라이언트에 필요한 페이지들을 미리 준비해뒀다가, 요청을 받으면 이미 완성된 파일을 반환하여, 브라우저에 보여주는 방식이다.
📖 React에서는 useEffect를 통해 데이터를 가지고 온다.
👍🏻 장점
- 미리 필요한 페이지를 준비해두므로, 웹페이지의 속도가 빠르다.
- SEO에 최적화 되어있다.
🤔 단점
- build 시, 전체를 매번 다시 다운받아야 하기 때문에, 컨텐츠가 자주 업데이트 되는 페이지에는 비효율적이다.
SSR, SSG 차이점?
서버에서 요청할 때, 즉시 만드는지/ 미리 만들어두는지의 차이가 있다.
SSR은 요청 시, 서버에서 html을 즉시 만들어 응답하기 때문에 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합하다.
SSG는 미리 만들어두고 요청 시, 해당 페이지를 응답하기 때문에 데이터가 바뀔 일이 거의 없는 페이지에 적합하다.
3. CSR, SSR, SSG 무엇을 사용해야 하는가?
-
유저랑 상호작용이 많고 고객의 개인정보로 기준으로 이루어지는 서비스라면 검색엔진 노출보다 고객의 데이터를 보호하는 것이 더 중요할 수 있다 -> CSR
-
회사홈페이지이기 때문에 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야하며 매주 업데이트 되어야한다면 ->SSR
-
회사홈페이지이기 때문에 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야 하지만 업데이트를 거의 하지 않아도 된다면 -> SSG
