react는 index.html이 한개
프론트엔드 서버에 대해서 리소스 요청은 1회
SPA, MPA
- SPA (Single Page Application)
하나의 html. 하나의 도화지(html)위에 주소(url)에 따라 필요한 컴포넌트를 도화지에 조립하는것
- MPA (Multi Page Application)
여러개의 html.
CSR, SSR
- CSR (Client Side Rendering) ==>> REACT
사용자가 웹사이트에 접속했을 때 페이지 렌더링에 필요한 리소스를 다운로드하고 브라우저가 화면을 직접 랜더링(보여주는것)
단점 : (1) 초기렌더링 속도가 느리다
(2) SEO가 불리하다. 검색엔진 봇은 클라이언트가 아니라서 CSR로 그린화면이면 사용자 화면으로 들어가기 때문에 아무것도 안 뜸.
그래서 검색엔진이 아무것도 검색키워드로 잡지 못함.
순서가 프론트엔드가 브라우저를 먼저 다 그리고 나서 백엔드에 리소스를 요청하는것. 그래서 그려지기 전 비어있는 브라우저에
백엔드 데이터를 넣을 수 없음(metadata를 넣을 수 없음)
(3) 사용자 하드웨어에 의존하여 화면을 그린다.
버튼은 빨리 그려졌는데, 버튼 클릭이 안된다고 보면됨
장점 : (1) 첫 렌더링 이후 전환속도가 빠름
(2) 서버부담 감소로 인한 서버비용 감소 (나는 리소스만 준비하고 리소스를 사용자에게 넘기면 사용자가 직접 그림)
- SSR (Server Side Rendering)
====> 리액트의 단점을 보완해서 나온게 SSR의 next.js. 단 그려진 페이지에 js가 적용되어있지는 않은것. 화면만 그려져있음.
사용자가 웹페이지에 접속하면 프론트엔드에 리소스 달라고 서버에 요청 -> 프론트엔드는 백에게 요청하고 백은 프론트에게 전달
-> 프론트가 사용자에게 줌.
장점 : (1)완성된 페이지를 보게되는 시간이 짧다. (프론트엔드가 백에게 요청한 정보를 가지고 있기 때문)
(2) SEO 에 잘 걸림.
단점 : 만약 서버에서 그리는 시간이 길어진다면 비어있거나 로딩화면을 오래볼 수 있다. (무거운 페이지라면 CSR보다 오래 걸릴 수 있다)
서버 부담이 증가한다. (서버의 하드웨어가 중요)