웹에는 크게 두 가지 형태가 있다.
1. MPA
2. SPA
이미지 출처
MPA
Multi-Page Application
페이지 수만큼 html이 있는 것이다. (=url에 해당하는 자원이 1:1로 있다)
링크를 누르면 계속해서 새로운 HTML을 긁어온다.
SSR - Server Side Rendering
SSG - Static Site Generation
- SEO 관점에서 유리하다. (각 페이지에 적합한 meta 정보를 넣을 수 있다.)
- SPA에 비해서 처음에 가져오는 양이 작기 때문에 첫 페이지 로딩 속도(FCP)가 빠르다.
- 그러나, 다른 페이지를 요청할 때마다 새로고침 해야하기 때문에(전체 페이지를 다시 렌더링한다.)
-> 전체적인 관점에서 느릴 수 있으며(CLS), 사용자 경험에 영향을 준다.- 페이지를 캐싱해두기 좋다.
SPA
Single-Page Application
: where a lot of information stays the same and only a few pieces need to be updated at a time. ==> that points make a lot of chaches on one page... and takes time when opening at first,,, "dynamically rewriting the current page." wiki dict
CSR - Client Side Rendering
SPA는 한 페이지 내에서 가상 돔이라고 하는 컴포넌트를 넣었다 뺐다 하는 작업과 Routing(pjax 방식)을 통해 여러 페이지에서 동작하는 것처럼 보이게 한다. 하지만, 결국 SPA는 하나의 페이지 안에서 동작한다.
- SEO 관점에서 유리하지 않다.
- 한 페이지에 모두 담겨 있기 때문에 초기 로딩 속도(FCP)가 느리다.
하지만, 초기 로드 후 각 페이지로 이동시에는 새롭게 자원을 로드할 필요가 없기 때문에,- 새로고침(refresh)하지 않아도 되며, 페이지간 이동이 유연하다.
이런 SPA를 쉽게 개발할 수 있도록 도와주는 프레임워크(라이브러리) 중 대표적인 세 가지가 있다.
- Vue
- React
- Angular
이 중 React는 Facebook에서 관리하는 라이브러리로 다음과 같은 특징이 있다.
1. 모듈을 제공하지 않아 Third party라이브러리에 의존하지만 우수한 에코시스템을 갖추고있다. (최근 v.18로 업그레이드 됐다.)
2. 타입스크립트와 호환성이 좋다. (유지보수 및 코드 관리에 강하다.)
3. Flux or Redux 패턴을 주로 지향한다. (실시간으로 데이터를 주고받는 프로젝트에 적합하다.)
4. JSX(javascript XML)문법. (개인적으로 코드가 보기 좋다.)
흔히 아는 facebook, twitter, airbnb, toss 등이 react로 만들어진 사이트 이다.
notation
// CLS Cumulative Layout Shift
// FCP First Contentful Paint
개인적으로 SPA 구조는 사용자 경험적 측면에서 탄생했다고 생각한다. 서버에 요청하지 않고 client 사이드에서 동적으로 제어되는 페이지는, 유연한 인터렉션과 flow를 유도할 수 있었다고 생각한다.
///
작성 - 정수진C
🦘햇병아리sinri0809였습니다.
피드백은 환영입니다.
