[React] CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)

1. CSR vs SSR

CSR(Client Side Rendering)

- 사용자가 페이지를 그림 => 사용자가 렌더링 부담
- 사용자가 웹 사이트에 접속 -> 서버에게 페이지에 필요한 리소스(code, asset)을 요청
- 페이지가 로드 될 떄 상품에 관한 정보를 백엔드 서버에 달라고 요청
- 사용자는 전달받은 리소스를 js까지 모두 로드한 후 화면에 표현

• 장점
  - 필요한 자바스크립트를 사전에 미리 불러와 초기 렌더 이후의 속도는 빠름
  - 특히 사전에 백엔드와 통신하는 부분이 없다면 SSR를 사용할 이유가 없음
• 단점
  - 초기 페이지 로딩이 SSR보다 느림
  - 사용자가 페이지를 렌더하는 동안 빈화면을 보게되므로 UX가 좋지 않음
  - 사용자에게 렌더링을 부담 -> 사용자의 하드웨어에 의존

SSR(Server Side Rendering)

- 서버에서 페이지를 그림 => 서버가 렌더링 부담

- 사용자가 웹 사이트 접속 -> 서버에 필요한 페이지 요청 -> 서버에서 그려진 페이지 전달

- js가 로드 되기 전에 완성된 페이지를 사용자가 먼저 확인

• 장점
  - SEO(검색 엔진 최적화) => 웹 사이트를 검색엔진이 크롤링(읽기)하여 사용자에게 제공, 해당 과정을 최적화하여 더 많은 사용자에게 웹 사이트를 노출
  - 빠른 첫페이지 로딩 속도
  - 서버에서 렌더를 부담하기 때문에 사용자가 느끼는 부담이 덜함
• 단점
  - 서버의 부담(생산 비용 증가 -> 단 SSG로 완화 가능)
  - 무거운 페이지라면 오히려 초기 페이지로딩이 오래 걸려 UX를 해칠 가능성이 높음
  - CSR 보다 더 많은 생산비용(코드를 많이 쳐야함, 인력) 추가 러닝 커브

2. SPA vs MPA

• MPA(Multi Page Application)
  - 여러 개의 페이지로 만들어진 앱
  - 기존 웹 페이지처럼 여러 개의 페이지를 사용하여 페이지마다 로딩하는 방식
  - 일반적으로 MPA 방식은 서버에서 페이지를 만들어 HTML을 클라이언트로 전송하여 렌더링함
  - SSR 방식으로 요청마다 리소스를 받아온다.
• SPA(Single Page Application)
  - 하나의 페이지로 만들어진 앱
  - 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 페이지만 만드는 형식
  - 일반적으로 SPA 방식은 모든 페이지를 만들기 위한 자바스크립트 하나로 묶어 클라이언트로 전송하고 페이지를 표기할 때 자바스크립트로 페이지를 렌더링하여 화면에 표시
  
  - React는 SPA 개발에 최적화, 사용자가 웹 사이트에 접속하면 접속 당시 단 한번만 페이지에 필요한 리소스를 전부 전달
  - 그리고 이를 캐싱(저장)해두었다가 url(주소)가 달라짐에 따라 html의 내부를 수정(리렌더)해서 사용자에게 보여주는 것
  - 따라서 React의 통상적인 파일 구조에는 Index.html 파일 하나만 존재
  => React는 CSR로 로드시 필요한 리소스 모두 가져오고, html이 하나로 url이 달라짐에 따라 다른 리소스를 보여줌

3. 라우터(Router)

• 라우터(Router)
  - 리액트에서 라우터는 웹브라우저에서의 페이지 이동과 같은 기능
  - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
• 라우팅 관련 라이브러리
  - React Router : 리액트 초기부터 사용된 오래된 라이브러리로 가장 많이 사용
  - Next.js : 리액트 프로젝트의 프레임워크로 router의 여러가지 문제점과 기능들을 보완하여 라우팅, 최적화, 다국어, 서버사이드렌더링 등 다양한 기능을 제공한다. 현재 추세적으로 많이 사용중

4. 리액트 라우터(React-Router)

- 리액트는 SPA 방식으로써, 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA 방식과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다.

- React-Router 라이브러리는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다.

• 라우터 라이브러리 설치
  npm install react-router-dom
  또는
  npm install yarn add react-router-dom
• Link
  - html의 <a> 태그와 유사한 기능, to prop을 통해서 이동할 경로를 지정
  <Link to="/about">About</Link>
  <a href="/about">About</a>
• Route
  - 현재 주소창의 경로와 path 속성과 매치될 경우 보여줄 컴포넌트를 지정하는데 사용
  - path 속성에 경로, element 속성에 표시할 컴포넌트를 넣어 렌더링한다.
  <Route path="/home" element={<Home/>} />
• Routes
  <Route> 태그를 감싸는 상위 태그
• BrowserRouter
  <Route>와 <Link> 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 사용

5. 리액트 라우터 사용

- 리액트 라우터를 적용할 파일에 위 처럼 import를 해줘야 사용할 수 있다.

- <Link> 태그에 있는 to 속성을 이용해 경로를 지정

- <a>와 같은 역할로 클릭하면 쓰여진 경로로 이동함

- <Route> 태그에 있는 path와 element를 이용해 화면에 렌더링을 함

- 주소창에 쓰여진 경로와 path에 쓰여진 경로와 매치될 경우 element에 쓰여져 있는 컴포넌트를 렌더링 함

- path에 적혀있는 *는 모든 경로를 뜻함

- 위에 두 개의 path외에 모든 경로들은 페이지를 만들지 않아 페이지가 없는 것을 뜻함으로  한곳에 모아 페이지가 없다는 것을 나타냄

Home.jsx

About.jsx

NotFound.jsx

- 리액트 라우터를 이용해 불러올 컴포넌트이다.

- window.location.href = "경로"; 는 쓰여져 있는 경로로 페이지 이동하는 것이다.

- window.history.go(-1);은 뒤로가기 1은 앞으로 가기 0은 새로고침이다.

- 모든 <Link> <Route>를 <BrowserRouter>로 묶어준다.

- 반드시 <BrowserRouter> 안에 써야 작동이 된다.

- 각 경로마다 다른 컴포넌트를 보여줌