MPA와 SSR
MPA (Multi Page Application)
최초 접속한 페이지 외에도 새롭게 서버가 생성한 페이지가 존재하고, 그것을 불러와 사용하는 경우
SSR (Server Side Rendering)
초기화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에 전송하는 방식
렌더링: 시각적인 요소들을 그려내는 것이 아니라 HTML 문서 자체를 생성하는 과정
서버에서 생성된 HTML이 브라우저로 전송 -> 브라우저가 시각적인 페이지를 표시(브라우저 렌더링)으로 이어짐
서버에서의 처리 과정을 통해 초기 페이지 로딩 속도를 향상, 검색 엔진 최적화(SEO)에 유리하게 작용
서버에서 사전에 페이지의 주요 내용을 포함시킬 수 있기 때문에 검색 엔진이 페이지 내용을 더 쉽게 인식
SPA (Single Page Application)
하나의 html 페이지로 이루어진 애플리케이션
전통적인 MPA가 가지는 불편함 (깜빡거림, 렌더링 속도 등) 때문에 등장
SPA는 CSR(Client Side Rendering)
Routing
SPA가 한 페이지로 구성되었음에도 사용자가 여러 페이지를 이동하는 것처럼 보여지게 하는 기능의 기반이 됨
한 웹사이트에서 다른 곳들로 이동하는 것을 라우팅이라고 함
hashed routing
#을 사용, 해시값을 기준으로 페이지 이동 (ex.#home)
origin: 웹서버의 위치
path, query string 어떤 요청에대한 요구사항
url을 브라우저에 입력했을 때 존재하지 않는 naver.com/존재하지않는구성값 과같이 작성하면 404오류가(페이지가 존재하지 않는다) 뜨지만, naver.com/#존재하지않는구성값을 작성하면 오류가 뜨지 않는다.
요청 url이 naver.com이고 # 이후의 값은 서버에서 처리하지 않고 클라이언트에서 처리하는 부분이기 때문이다.
Browser Routing
naver.com/notFound
또다른 라우팅 방식, 서버에 다른 경로를 요청하는 것처럼 보이지만 리액트의 번들링 도구를 이용해 단하나의 html만 요청할 수 있도록 내부적으로 처리할 수 있음
'React' 카테고리의 다른 글
[React] 리액트의 개념과 성능 최적화 팁 (0) | 2024.08.14 |
---|---|
[React] Rendering과 Virtual DOM (0) | 2024.08.08 |
[React] state (0) | 2024.08.08 |
[React] props와 children (0) | 2024.08.08 |
React 프로젝트 생성/구조 (0) | 2024.08.08 |