티스토리 뷰
리액트 라우터를 사용하기에 앞서 페이지 구성 방식(MPA, SPA)와 렌더링 방식(CSR, SSR, SSG)에 대해 알아보자
1. MPA와 SPA
MPA(Multiple Page Application)
MPA는 여러 개의 페이지를 준비한 후 요청에 따라 적절한 페이지를 반환하는 어플리케이션을 말한다.
특징
- 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(html, css, js)를 다운로드한다.
- 페이지를 이동하거나 새로고침하면 전체 페이지를 리렌더링한다.
장점
- 페이지마다
키워드가 노출되어 있어서 검색이 쉽다.
단점
- 페이지를 이동할 때마다 전체 페이지가 리렌더링되기 때문에 느리다.
- 클라이언트와 서버 모두 렌더링 프레임워크를 사용해야 한다.
SPA(Single Page Application)
SPA는 단일 페이지 웹 어플리케이션을 말한다.
특징
- 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드한다.
- 이후 새로운 페이지 요청이 있을 때, 필요한 데이터(JSON)만 서버로부터 전달받아 페이지 갱신을 수행한다.
- 필요한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있다.
장점
- 갱신시 전체 페이지를 리렌더링하지 않기 때문에 속도 및 응답시간이 우수한 편이다.
- 서버에서 페이지 렌더링을 위한 코드를 작성할 필요가 없다.
단점
- 최초 접근 시 모든 리소스를 다운로드하기 때문에 초기 구동 속도가 느린 편이다.
2. CSR, SSR, SSG
CSR(Client Side Rendering)
클라이언트(브라우저) 측에서 알아서 페이지를 렌더링하는 방식을 말한다. 최초의 로딩에서 서버에서 전체 페이지를 로딩하여 보여주지만 그 이후에는 클라이언트가 서버에서 리소스를 받아와 렌더링하는 것이다.
🌟 리액트는 SPA 페이지 구성방식을 따르면서 CSR 렌더링 방식으로 페이지를 렌더링한다.
SSR(Server Side Rendering)
서버 측에서 렌더링하는 방식.
사이트 주소를 요청할 때 서버 쪽에서 렌더링 준비를 다 끝낸 채로 클라이언트에게 전달된다. 이후 클라이언트는 데이터를 받아서 바로 완성된 페이지를 사용자에게 보여준다.
SSG(Static Site Generation)
Static-Rendering, 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 반환하여 브라우저를 랜더링 하는 방식. 일반적으로 바뀔 일이 없는(업데이트 X) 페이지에 사용된다.