📚 Multi-Page Application(MPA)
👉 두 개 이상의 페이지로 구성된 어플리케이션
- 사용자 인터렉션이 발생할 때마다 해당 링크로 이동하여 앱이 다시 새로 고침되는 전통적인 방식(예시 링크: 제이에스티나 온라인스토어 https://www.jestina.co.kr/)
- 렌더링 방식으로 Server Side Randering 채택
Server Side Randering
- 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식
SSR의 과정
- 클라이언트에서 초기 화면을 로드하기 위해 서버에 요청을 보냄
- 서버는 html로 화면에 표시하는데 필요한 완전한 리소스를 응답한다.
- 화면을 구성하는 요소 중 일부분을 변경하고 싶어 클라이언트에서 서버로 다시 요청을 보낸다.
- 서버는 다시 2번처럼 응답. 이때 변경할 부분 뿐 아니라 변경되지 않는 부분도 서버에서 다시 다운 받는다. 이런 이유로 화면이 다시 새로 고침된 후에 표시된다.
✨ SSR 렌더링 방식의 장단점
📌 장점
- 검색 엔진 최적화(SEO)에 유리: 검색 엔진 최적화란 검색엔진이 웹을 크롤링하면서 페이지에 콘텐츠 색인을 생성하는 과정을 말한다. MPA에는 화면을 구성하는 각각의 페이지가 있기 때문에 이에 유리.
- 빠른 초기 로딩 속도: 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문.
📌 단점
- 불편한 사용자 경험: 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 떨어지고
- 서버 부하 증가: 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가함.
📃 Single-Page Application(SPA)
👉 하나의 페이지로 구성된 어플리케이션
- (예시 링크: Google 지도 https://www.google.co.kr/maps/)
- 렌더링 방식으로 Client Side Randering 채택
Client Side Rendering(CSR)
- 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식
CSR의 과정
- 클라이언트에서 초기 화면 로드를 위해 서버에 요청을 보낸다.
- 서버는 화면을 표시하는데 필요한 완전한 리소스를 응답
- 여기서 모든 js 파일을 다운받아야 하기 때문에 로딩시간이 더 오래 걸린다.
- 화면을 구성하는 요소 중 일부분을 변경하고 싶어 클라이언트에서 서버로 다시 요청을 보낸다.
- 서버는 변경할 부분과 관련된 리소스만 응답
- 화면이 새로 고침되지 않고 바로 수정된 데이터가 표시된다.
✨ CSR 방식의 장단점
📌 장점
- 빠른 속도 및 서버 부하 감소: 변경된 부분과 관련한 내용만 렌더링하기 때문
- 사용자 친화적: 페이지 안의 콘텐츠를 클릭해 변경하는 경우 링크가 따로 없기 때문에 깜빡임 없이 부드러운 이동
📌 단점
- 검색 엔진 최적화(SEO)에 불리: 자바스크립트를 사용하여 사용자와 상호작용한 후에 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화하려고 하면 내용의 빈 페이지처럼 보이게 된다.
- 느린 초기 로딩 속도: 초기에 모든 js 파일을 다운받아와야 하기 때문에 초기 로딩시간이 오래걸림
어떤 방식으로 개발해야 할까?
"콘텐츠 중심"
- Single-Page Application를 만드려고 할 때 모든 부분을 Client Side Rendering 방식으로 구현해야 하는 것은 아니다.
- 어플리케이션을 구성하는 부분에 따라 단순 정보 제공과 같은 부분은 초기 로딩 속도가 빠른 Server Side Randering으로, 동적인 변화가 필요한 부분은 초기에 모든 js 파일을 다운받는 Client Side Rendering으로 개발하는 것이 좋다.
이런 CSR와 SSR의 장점만을 합쳐서 만들어진 리액트 프레임워크가 바로 Next.js이다. Next.js는 기본적으로 정적 페이지를 만들어주지만 동적인 데이터도 처리할 수 있게 해준다.
[참고자료]
taehyunkim, "CSR, SSR, MPA, SPA"(https://velog.io/@taehyunkim/CSR-SSR-MPA-SPA).
우아한Tech, "[10분 테코톡] 🍻주모의 SPA"(https://www.youtube.com/watch?v=vM_zQLnlyKw).
Sungkyunkwan Univ. 20 @hau_jin_ #WEB #Pront-end #Back-end