SPA, MPA, SSR, CSR

이게 다 무슨 소릴까..?

막연히 공부만 하면서 올라오는 채용 공고를 훑으면서 조건들을 보면

SSR 경험이 있는 사람을 우대하고 있다, 내가 알기론 SSR은 매우 낡은 방식으로 알고 있는데 어째서 저 경험을 우대하는 것일까?

에서 시작된 물음으로 여기저기 검색을 하며 읽던 중 유투브에서도 관련 영상이 때마침 올라오고 읽고있는 책에서도 SSR을 언급하길래

이 기회에 한번 정리해보려고 한다

MPA (Multiple Page Application)

태초에 인터넷에서 구현된 서비스 서버에서 여러 페이지를 준비해 놓은 뒤 사용자의 입력에 따라 페이지를 받아와서 응답해주는 방식이다

어떠한 사소한 입력에도 페이지를 새로 받아와서 띄워주기 때문에 화면에 깜빡거림이 존재한다

이러한 MPA도 장점이 존재하는데 HTML을 미리 만들어놓기 때문에 페이지의 크롤링이 용이하다

그렇게 용이한 크롤링 덕분에 검색 엔진(SEO)이 페이지를 검색하기 쉽다

단점

• 깜빡거림 존재
• 개발 복잡도가 증가

장점

• SEO관점에서 유리
• 크롤링 적합

SPA (Single Page Application)

MPA의 반대 개념으로 하나의 페이지로 서비스하는 느낌

나는 리액트를 배우고 SPA라는 개념을 접했기 때문에 이해하기가 매우 쉬웠는데 하나의 HTML을 두고 js들을 불러와서 동적으로 화면을 구성하는 방식을 말한다

뼈대는 하나고 사용자의 입력이 있는 부분만 동적으로 만들어준다

페이지 전체를 받아올 필요가 없기 때문에 화면 깜빡임이 없다, 새로고침할 부분이 작기 때문에 성능이 빠르다

장점

• 성능이 우수하다
• 서버에 페이지를 만들어 두는게 아니라 서버없이도 개발이 가능하다

단점

• 제일 첫 구동시 느리다(사용자가 이용할 모든 동적 페이지들을 미리 불러와야하기 때문) 그 뒤는 빠름
• SEO관점에서 매우 불리하다
  리액트를 생각해보라 하나있는 html에 있는거라곤 js를 불러오는 코드 한줄이 다다.

SSR (Server Side Rendering)

서버에서 렌더링하는 것

말 그대로 페이지들을 서버에 만들어 놓고 사용자에게 건내주는 것을 얘기한다

CSR (Client Side Rendering)

클라이언트에서 렌더링하는 것

서버가 아니라 사용자의 브라우저에서 화면을 만드는 것을 얘기한다

---

SSR을 읽어보면 떠오르는게 MPA이고

CSR은 조금 헷갈릴 수 있지만 서버에서 js들을 모두 가져온 뒤 입력에 따라 브라우저에서 화면이 바뀐다고 생각하면 SPA가 떠오른다

그렇다면 SSR는 MAP!, CSR는 SPA! 이런건 아니고 자주 사용되는 구현 방식?이라고 보면된다

장점을 섞다

이렇듯 SPA와 MPA는 서로의 장단점을 가지고 있다

그래서 이 둘을 섞기로 했는데 정확히는 SPA와 같이 쓰이는 CSR 둘 중 SPA를, MPA와 같이 쓰이는 SRR 둘 중 SSR을 섞기로 했다

그래서 SSR 경험을 우대하는 것.. 질문에 대한 해답을 찾을 수 있었다

이 둘을 섞어서

• 첫 페이지에서는 서버쪽에서 준비해둔 페이지를 사용자에게 준다

사용자는 첫 화면을 보는 시간에 걸리는 시간이 길게 체감되지 않게되고 SEO도 만들어둔 페이지에 적절한 정보들이 있기 때문에 크롤링이 가능하다

• 그 뒤의 모든 페이지들은 js들을 받아와 클라이언트에서 동적으로 만든다

화면 깜빡임 없이 서비스를 즐길 수 있게된다