1. React Router
React Router는 라우터이기 때문에 정확히는Client-side rendering이 아닌Client-side routing을 지원합니다Routing은 사용자가 웹사이트의 다른 페이지로 이동하는 과정,Rendering은 페이지를 화면에 그리는 과정을 의미합니다.Routing은Rendering을 포함하는 과정이기 때문에Client-side routing과정에서Client-side rendering이 이루어진다고 볼 수 있습니다.
2. Client-side routing
- React Router는
client-side routing을 지원합니다. - 예전에는 웹사이트에서 브라우저는 페이지를 이동하면, 서버로
GET request를 보내 해당 URL 경로에 따른 적절한 페이지나 데이터를 리턴받는server-side routing을 사용했습니다. Client-side routing은 앱이 서버로 URL에 대한 request 보내지 않아도 링크 클릭만으로 URL을 업데이트할 수 있게 해줍니다. 즉시 새로운 UI를 렌더하고 새로운 정보로 페이지를 업데이트하기 위해 fetch 데이터 request를 생성합니다.Client-side routing은 브라우저가 전체 문서를 요청하거나 CSS, JavaScript를 재차 적용할 필요가 없기 때문에 더 빠른 UX를 제공합니다.Client-side routing은 애니메이션 같은 dynamic UX도 제공할 수 있습니다.Client-side routing은Router를 만들고Link나<Form>으로 페이지끼리 연결하여 사용할 수 있습니다.- 라우팅된 컴포넌트는 React의
Reactor DOM같은 렌더러를 통해 Virtual DOM에 렌더링됩니다.
3. Client-side redering
- Reactor DOM은
CSR(Client-side rendering)을 지원합니다. - 예전에는 웹 사이트에서 브라우저는 서버로부터 완전히 구성한 HTML 페이지를 전달 받아 렌더링하는
SSR(Server-side Rendering)을 주로 사용했습니다. CSR은 서버에서 HTML 페이지를 완전히 구성하는 대신, 초기 페이지 로드 시 서버에서 전달받은 데이터를 기반으로 JavaScript를 사용하여 페이지를 렌더링합니다SSR은 초기 로딩 속도가 빠르고 SEO를 향상시키는 장점이 있습니다.CSR은 웹 페이지 전환이 빠르고 서버 부하를 감소시키는 장점이 있습니다.
Reference
job's done