React SPA & CSR

DOYOUNG·2023년 8월 25일
0

reactjs

목록 보기
12/15
post-thumbnail

Page Routing

Page Routing이란 브라우저에서 웹 서버로 페이지 요청을 했을 때 그 페이지를 응답하는 일련의 과정을 말한다. '/home'이라고 요청하면 웹 서버에서 'Home.html' 페이지를 반환해주는 과정 자체를 페이지 라우팅이라고 할 수 있다.

MPA (Multipage Application)

여러개의 페이지를 가지고 있다가 요청이 들어오면 경로에 따라 적절한 페이지를 응답해주는 방식을 MPA(Multipage Application) 라고 한다. 일반적인 웹사이트는 MPA 방식으로 제작되어 여러개의 페이지를 가지고 있고, 요청에 따라 페이지를 이동하게 된다.
다른 페이지로 이동하게 되면 페이지 자체가 바뀌기 때문에 브라우저의 탭이 새로고침 되는 것을 볼 수 있다.

SPA (Single Page Application)

React의 제작 방식이다. 단일 페이지 어플리케이션이라는 뜻으로, 페이지가 단 하나로 이루어진 어플리케이션을 말한다. SPA 방식에서는 페이지 이동을 할 수 없는 것처럼 보이지만 React의 방식으로 페이지를 이동할 수 있다.
리액트에서는 다른 페이지를 보고 싶을 때, 버튼을 누르면 REACT.APP이 단일 페이지를 업데이트 시킨다. 서버에 요청을 하는것이 아닌 브라우저가 알아서 처리하기 때문에 서버 응답 시간을 기다릴 필요 없이 쾌적한 작동이 가능해진다.
리액트에서 서버와 통신을 해야하는 경우는 데이터를 요청해야 할 경우이다. 데이터와 페이지를 결합하여 서버에게 받아와야하는 MPA 방식과 달리, SPA 방식을 사용한 페이지 이동은 브라우저에서 페이지가 먼저 바뀌고 데이터(JSON)만 받아오면 되기 때문에 굉장히 빠른 페이지 이동이 가능하다.

CSR (Client Side Rendering)

브라우저(클라이언트)가 직접 페이지를 랜더링 하는 방식을 CSR이라고 한다.
React에서 페이지를 랜더링하는 방식이다.

profile
프론트엔드 개발자 첫걸음

0개의 댓글