검색엔진 SEO 최적화
고객들이 접근하는 페이지
기존 렌더링방식
브라우저 -> 프론트서버 -> 백엔드서버 -> DB
->백엔드 ->프론트 -> 브라우저
장점: 화면이 한번에 그려진다.
단점: 로딩속도가 느리다 과정이 길기떄문에.
= 사용자불편
SPA
페이지 하나만받고 DB없이 화면만 받고 DB를 백엔드서버에서 직접받아옴
DB에 따라 화면을다르게 보여준다
장점 : 화면을 먼저 그려주기때문에 사용자가 만족
= 사용자의 인터렉션이 빨라짐 .
단점: 검색엔진 에서 DB 값이 없고 로딩만 나오기떄문에 .
국내 검색엔진은 인식을 못함 SEO 에 불리함 .검색엔진 노출에 불리함.
무조건 리액트가 빠른건아님
=> 해결방안 코드스플리팅을 통해 방문한 곳에 값만 보내줄수있다.
Next.js
첫방문시 모든페이지를 받아옴
다른 페이지 이동시 백엔드서버로부터 데이터만 받아옴.
prepatch
== 데이터캐싱 로딩속도 향상
원래 css 는 js에서만 import 가능
webpack 는 css를 보면 스타일태그로 바꾸어서 html에 넣어준다.
<div style = {{margin:Top :10}} >
스타일에 객체를 넣으면 안된다.
리렌더링 된다. 가상돔으로 달라진부분을 찾는데 객체가
getServerSideProps:
홈보다 먼저 실행된다.(index.js)
화면을 그리기전에 먼저 실행된다
방문할떄 그떄끄떄 바꿔준다.
getStaticProps
안바뀌는 정적 게시물.
미리 빌드하기전에 html을 제공한다.
사용하기 까다롭다.
서버에는 무리가 덜가지만 거의힘들다.
진짜 안바뀌는 페이지..?
getStaticPath
역시사용하기 히듬.
getStaticprops랑 같이쓴다 ,
다이나믹 라우티일때쓴다([id].js)
적혀있는 경로를 확인해서 미리 만들어준다