들어가면서
웹개발의 3가지 요소
브라우저
프론트서버
백엔드 서버 (+ 데이터 베이스)
방법 2가지
ssr방식
전통적인 방식으로는 브라우저 -> 프론트 -> 백앤드 -> 데이터베이스의 과정을 왕복한다.
spa방식
리액트와 같은 singlepage에서는 하나의 페이지에서 컴포넌트만 바꿔주기 때문에
브라우저와 프론트가 하나가되어 브라우저에서 화면을 먼저 보여주고 백앤드서버에 요청을 보낼수 있다.
그렇기 때문에 이 흐름은 매우 중요하다.
단, spa방식이 오히려 시간은 더 걸릴 수 있지만, 화면에 loading창이라도 보여줄 수 있기 때문에 react나 vue.js를 선호하는 것이다.
또한 검색엔진이 이 페이지는 로딩창밖에 없는줄 알고 검색엔진에 보여지지 않는 경우가 있다.
해결법
서버사이트 랜더링 / 프리랜더 (첫방식은 전통 / 그외는 리액트)
코드스플릿팅기술
검색엔진의 노출과 속도를 위해서는 규모가 커지면 모두 사용해야만 한다.
단, 관리자페이지나
이러한 이유로 조금더 쉽게 하기 위해 Next.js를 사용해 볼 것이다.
또한 고객들이 접하는 페이지에는 React.js를 사용한다.
브라우저를 통해 첫 방문을 할때에만 페이지의 모든 정보를 받아오는 것을 서버사이드 랜더링,
그 이외의 상황에는 데이터만 받아오는 것 (특정 주소를 들어가면 로딩X)
Last updated