오픈소스 프레임워크
리액트 기반 nodejs위에서 구축된 것
서버사이드 랜더링을 제공한다
클라이언트 사이드는 배포하면 웹사이트에 들어가면
빈 html페이지를 보여줌. index.html루트만 있는것.
그러다가 react파일을 다운로드 해서 보여주는것임.
그래서 다운되는 동안 잠깐 공백을 보여줌
CSR이 안좋은 이유
1. SEO 검색엔진 최적화 안됨 봇들이 내용을 알수가 없음.
2. 페이지로드가 SSR이 더 빠르다.
nextjs 퍼블릭 폴더에는 html없음 서버에서 렌더링하기 때문
React router dom 등을 다운할 필요 없다 이미 안에 있음
api폴더가 있다. 서버가 분리되어있지 않다
페이지 추가하고싶으면 그냥 pages폴더에 넣으면 됨
페이지 폴더에 폴더 생성하면 params같은 기능 사용가능
indexjs만들면 그게 기본 페이지 dynamic routes라고 함
서버가 따로 필요없음 데이터베이스 연결도 되고 express서버를 따로 만들지 않아도 된다
Link컴포넌트를 react router dom 아니라 next/ink에서 import
index html 헤드, 바디가 없다 indexhtml없으니까
그래서 Head 컴포넌트 임포트 index.js페이지에
css 인라인 먹긴 한다. 하지만 기본은 module.css사용함
컴포넌트 default로 들어갔으면 하는 것들은 Layout에 넣는다.
higest order component는 _app이다.
Layout컴포넌트로 감싸주면 된다.
404페이지는 pages폴더 안에서 만들면 적용된다
data fetching
api요청 받아오는것
getStaticProps 외부 api데이터 가져와서 props에 넣어줌 component의
이 함수로부터 return되는 것들로 pre-rendering
useEffect등을 사용할 필요 없다
getStaticProps는 SSG임 static site generation
SSR은 getServerSideProps
둘 다 예약어이고 그냥 보기에는 차이 없어보임
request time에 가져와야하는것은 getServerSideProps
하지만 보통은 Static쓴다
realtime으로 데이터가 변하는것은 SSR을 써야한다
도중에 데이터가 변할 수 있는것은.
revalidate으로 비슷하게 만들 수 있다.
interval둬서. up to date비슷하긴 한데 완전하진 않다.
React 앱의 소스코드 보면 그냥 빈 html페이지이다.
ui가 나타나있지 않고 내부에 단어도 나타나지 않음
봇들이 찾을수가 없다
SSR에서는 소스코드가 데이터, prop등을 모두 보여준다
서버에서 만든 파일을 보내주기 때문에.
