SPA (Single Page Application)

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)

url 구조, 스파르타코딩클럽 React 입문 강의

origin: 웹서버의 위치

path, query string 어떤 요청에대한 요구사항

 

url을 브라우저에 입력했을 때 존재하지 않는 naver.com/존재하지않는구성값 과같이 작성하면 404오류가(페이지가 존재하지 않는다) 뜨지만, naver.com/#존재하지않는구성값을 작성하면 오류가 뜨지 않는다.

요청 url이 naver.com이고 # 이후의 값은 서버에서 처리하지 않고 클라이언트에서 처리하는 부분이기 때문이다.

 

Browser Routing

naver.com/notFound

또다른 라우팅 방식, 서버에 다른 경로를 요청하는 것처럼 보이지만 리액트의 번들링 도구를 이용해 단하나의 html만 요청할 수 있도록 내부적으로 처리할 수 있음