SPA란
싱글페이지 어플리케이션.
기존의 웹페이지는 유저의 요청에 대해 서버에서 이를 해석한 후 랜더링을 담당했습니다.
압축과 캐싱을 통해 속도 문제를 개선했지만, 여전히 불필요한 트래픽이 낭비됩니다.
=> 리액트의 장점
뷰렌더링을 브라우저가 담당하도록 하고, 서버에서는 데이터만 전송해줍니다.
처음 웹페이지만 서버가 제공하고, 나머지 페이지는 브라우저에서 로딩해줍니다.
새페이지로 갈 경우, html을 요청하는 것이 아니라, 필요한 데이터만 받아서 렌더링을 진행합니다.
라우팅
주소에 따라 다른 뷰를 보여주는 것을 Routing이라고 합니다. react-router를 설치하여 해당 기능 실행.
https://thebook.io/006946/ch16/01-02/
여기 그림 참고하면 이해가 빨라요!
코드스플리팅이 필요한 이유
앱 규모가 커지면서 자바스크립트 파일도 너무 커집니다. 유저가 실제로 방문하지 않을 수도 있는 페이지의 컴포넌트 코드도 불러오기 때문입니다. 코드 스플리팅 기술을 통해 이를 개선합니다.
서버사이드 렌더링 VS 클라이언트 사이드 렌더링
서버사이드 렌더링: 서버단에서 변화된 데이터로 화면을 만들어 전달한다.
클라이언트 사이드 렌더링: 변화된 UI를 브라우저에서 만든다.