| SPA | MPA |
| 브라우저 안에서 작동하는 앱 사용하는 동안 페이지 리로딩을 필요로 하지 않는다. 렌더링 방식은 CSR |
컨텐트가 변할 때마다 페이지 리로드가 필요하다. 렌더링 방식은 SSR |
| CSR | SSR | SSG |
| Client Side Rendering 요청을 단일 HTML 파일로 리디렉션하면 서버는 모든 JavaScript를 가져오고 브라우저가 내용을 렌더링하기 전에 모든 내용을 컴파일할 때까지 아무런 내용(또는 로드 화면) 없이 해당 요청을 전달 🔥 장점 화면 깜빡임이 없다. 초기 로딩 이후 구동 속도가 빠르다. TTV와 TTI 사이 간극이 없다. 서버 부하 분산 👻 단점 초기 로딩 속도가 느림 SEO에 불리하다. |
Server Side Rendering 서버의 안정적인 인터넷 연결을 사용하여 데이터를 가져오고 사용자 정의 컨텐츠로 페이지를 미리 채우는 데 사용 🔥 장점 초기 구동 속도가 빠르다. SEO에 유리하다. 👻 단점 화면 깜빡임이 있다. TTV와 TTI 사이 간극이 있다. 서버 부하가 있다. |
Static Site Generation |
| SEO | Search Engine Optimization 검색 엔진으로부터 웹사이트 또는 웹 페이지로 웹사이트 트래픽의 질과 양을 향상시키는 과정 |
참고 👇
https://asperbrothers.com/blog/spa-vs-mpa/
Single Page Application (SPA) vs Multi Page Application (MPA) – Two Development Approaches | ASPER BROTHERS
When designing web applications, SPA or MPA is worth considering which model will fit our project. Check it out.
asperbrothers.com
https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering
Client-side vs. Server-side vs. Pre-rendering for Web Apps
User experience tanks when sites feel slow. Today's heavier front ends don't help. In this article, Toptal Freelance Front-end Developer Guillaume Breux compares client-side vs server-side and also pre-rendering strategies to help you choose the best optio
www.toptal.com
https://www.youtube.com/watch?v=YuqB8D6eCKE
https://en.wikipedia.org/wiki/Search_engine_optimization
Search engine optimization - Wikipedia
From Wikipedia, the free encyclopedia Jump to navigation Jump to search "SEO" redirects here. For other uses, see Seo. Practice of increasing online visibility in search engine results pages Common white-hat methods of search engine optimization Search eng
en.wikipedia.org
'FE > html' 카테고리의 다른 글
| jQuery.Deferred exception: header is not defined ReferenceError: header is not defined (0) | 2022.10.13 |
|---|---|
| img 태그 엑박 (0) | 2022.10.11 |
| [Error] 네이버 로그인 API Callback URL (0) | 2022.10.03 |
| [Error] naver login Uncaught TypeError: Cannot read properties of undefined (reading 'age') (0) | 2022.10.03 |
| JavaScript에서 model 값 가져오기 (0) | 2022.08.13 |