코드를 입력하세요SPA와 MPA
SPA (Single Page Application)
- 하나의 HTML파일(page)을 사용합니다
- 최초 한번에 필요한 모든 정적 리소스를 다운로드하며, 페이지 요청이 있을 때마다 갱신에 필요한 데이터만 자바스크립트를 이용해 동적으로 기존 페이지의 내부를 수정해서 보여주는 방식입니다
MPA (Multiple Page Application)
- n개의 HTML파일(page)을 사용합니다
- 사용자가 페이지를 요청할 때마다 필요한 정적리소스(HTML,CSS,JS)를 다운로드하여 매번 전체 페이지를 다시 렌더링하는 방식입니다
CSR (Client Side Rendering)
동작방식
- user가 website에 최초 접속하면 클라이언트는 서버로 요청을 보냅니다
- 서버에서는 페이지 구성을 위한 최소 리소스만 전달합니다
- CDN이 HTML파일과 JS가 연결된 링크를 클라이언트로 보냅니다
- 클라이언트는 HTML를 다운로드한 후 JS를 다운로드합니다
- 사용자에게는 아무것도 보여지지 않습니다
- 다운이 완료된 JS가 실행되고 데이터를 받기 위해 API요청을 보냅니다
- API가 요구되지 않는 리소스만 렌더링합니다
- 서버가 API로부터의 요청에 응답합니다
- API가 요구되는 리소스까지 렌더링되어 전체 화면이 그려지고 상호작용이 가능해집니다
장단점
장점
- 사용자 경험 향상
- 변경 된 부분만 업데이트하므로 페이지간 이동시 빠른 응답이 가능합니다.
- 실시간 interaction이 가능합니다.
- 페이지를 구성할 때 필요한 데이터만 요청하므로 서버 부하 절감
단점
- 초기 페이지 로딩 시간 소요
- 모든 스크립트 파일이 로드될때까지 기다려야하므로 큰 규모의 어플리케이션에서는 더욱 치명적으로 작용합니다.
- 로딩중에 사용자는 아무것도 볼 수 없습니다. (UX경험 저하)
- SEO 대응 부족
- 초기에 HTML 콘텐츠는 비어져있으므로 크롤링할 것이 없습니다.
SSR(Server-Side Rendering)
동작방식
- 클라이언트에서 서버의 특정 URL에 대한 HTTP GET 요청을 보냅니다.
- 서버는 html,css,js를 조합하여 즉시 렌더링 가능한 HTML문서를 생성 및 클라이언트에게 전달합니다.
- 클라이언트는 전달받은 HTML문서를 즉시 렌더링하고, 필요한 js를 다운로드한 이후 자바스크립트 프레임워크를 실행합니다.
- 서버에서 이미 렌더 가능한 상태로 클라이언트에게 전달하는 것이므로 js가 다운되는 동안 사용자가 조작은 불가능하지만 화면은 볼 수 있습니다.
- js framework가 실행된 이후에 조작이 가능해집니다.
장단점
장점
- SEO
- html body에 content가 담겨있으므로 크롤링이 쉽습니다.
- 초기 로딩 속도가 빠르므로 사용자가 빠르게 컨텐츠를 볼 수 있습니다.
- 렌더링을 서버에서 진행하므로, 클라이언트의 환경에 영향받지 않고 같은 화면을 제공할 수 있습니다.
단점
- 변경이 발생하는 경우 전체 페이지를 다시 요청합니다.
- 서버에 부하가 발생할 수 있습니다.
- 페이지 이동 시 새로고침됩니다.(UX경험 저하)
SSG
SSR과 자주 비교되는 Static Stie Generation(SSG)는 주로 정적페이지의 최적화에 사용됩니다.
1. 개발자가 정적파일 서버에 업로드 합니다.
2. 클라이언트에서 서버의 특정 URL에 대한 HTTP GET 요청을 보냅니다.
3. 서버에서 HTML을 따로 생성하지 않고 사전에 개발자가 준비해둔 HTML을 전송합니다.
4. HTML파일을 클라이언트가 브라우저 내에서 렌더링합니다.
자연스럽게 SPA-CSR, MPA-SSR과 같이 웹 어플리케이션에 따라서 렌더링 방식을 다르게 적용하게 되는데, 반드시 그렇게 구현해야하는 것은 아닙니다.
SPA+SSR
사용자와 interaction을 많이 발생시키는 요즘 웹 어플리케이션에서는 UX측면에서 CSR방식이 장점을 갖고 있다는 것을 확인했습니다. 하지만 여전히 초기 로딩 속도 및 검색엔진 최적화 측면에서는 개선의 여지가 필요하다는 것 또한 공감할 수 있을 것입니다.
그래서 CSR방식을 SSR방식으로 변환한다면,
- 서버에서 렌더 가능한 상태로 HTML을 제공하므로 초기 로딩 속도 문제 해결
- SEO의 문제 해결
이 가능해집니다.
그렇다면 기존의 SPA가 갖는 interaction이 어렵다는 단점은 어떻게 해결할 수 있을까요?
이는 하이드레이션(hydration)을 통해 극복할 수 있습니다. 서버에서 브라우저로 전달한 HTML파일 위로 js코드를 실행하는 동작으로 SSR방식의 웹 어플리케이션임에도 불구하고 SPA에서 구현하는 interaction을 보장할 수 있어집니다.대표적으로 next.js, nuxt.js 등이 존재합니다.
📝 참고
FE 개발자