1. MPA, SPA
MPA란?
- Multi-page Application의 약자로 두 개 이상의 페이지로 구성된 애플리케이션을 의미
SPA란?
- Single-page Application의 약자로 하나의 페이지로 구성된 애플리케이션을 의미
2. SSR, CSR
렌더링(Rendering)방식이란 결국 화면에 그려지는 것은 HTML인데 이것을 누가 하느냐 주최에 따라서 CSR과 SSR로 나뉘게 됨
SSR란?
- 서버로 부터 완전히 만들어진 html 파일을 받아와 페이지 전체를 렌더링 하는 방식
단점
- 새로운 페이지를 요청 할때 마다 전체 페이지가 다시 렌더링 된다. 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링되는 단점이 있기 때문에 곧 서버 부하 등의 문제를 일으킬 수 있다.
- 또한 전체가 다시 렌더링 될때 화면의 깜빡이게 되므로 사용자에게 불편함을 줄 수 있다.
반면에, 장점
- 완성된 형태의 HTML 파일을 서버에서 전달받기에 검색엔진이 페이지를 크롤링하기에 적합하여 SEO에 유리하다.
- 이미 DOM 이 다 구성된 파일을 브라우저가 받기 때문에 바로 그릴수가 있어서 초기 구동 속도가 빠르다.
CSR란?
- 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고 그 후에는 데이터를 받아올 때만 요청하여 받아오는 방식
👉 서버에서 HTML, CSS, JS을 받고 (웹서버는 아주 단순히 올려놓은 파일을 전달해주는 전달자 역할) 브라우저는 웹서버로부터 전달받은 파일을 다운하고 JS파일을 실행하면서 DOM에 내용을 추가하면서 그린다.
단점
- 최초 요청 시에 HTML ,CSS, JS파일을 한번에 요청하기 때문에 초기 로딩 속도가 느리다.
- index.html 에 단순히 뼈대만 있기 때문에 검색 엔진의 봇들이 크롤링(crawling)할 때 아무 내용이 없어서 SEO에 취약하다.
반면에, 장점
- 최초 요청 이 후에는 필요한 데이터만 갱신하면 되기때문에 SSR방식에 비해 서버 부하가 덜하다는 장점이 있다.
- 깜빡임없이 필요한 부분만 렌더링 하기 때문에 SSR보다 사용자에게 좋은 경험을 줄 수 있다.
3. 추가내용
SPA와 CSR은 같은건가?
NO.. SPA와 MPA는 페이지를 여러 개 쓰냐 한 개만 쓰냐의 차이이고 CSR과 SSR은 렌더링을 어디서 하냐의 차이
SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않는데 이럼에도 데이터가 수정되고 조회되게 하고 싶어서 CSR이란 방식을 채택한 것, 반대로 MPA는 동적이지 않은 페이지를 상황에 맞게 클라이언트에 뿌려주기 때문에 SSR 방식을 채택한 것
그럼 SPA에는 SSR을 하지 못하고 MPA에는 CSR을 못 할까?
💡 SSR만으로는 SPA의 구현이 불가능하고 CSR만으론 MPA의 구현이 불가하다. (구현하려는 페이지가 여러 개라고 가정) , SPA에서 SSR이 가능하지만(처음 로드 하는 페이지만 SSR로 하고 그 이후에는 CSR로 하면 됨) SSR만으로는 SPA의 구현이 불가능하다고 정리 할 수 있다.
참고자료
강지영입니...🐿️