Next.js?
Next js 모든 페이지 Pre-rendering<사전렌더링> ⇒ 더좋은 퍼포먼스, 검색엔진최적화(SEO)
정적생성과 서버사이드 렌더링의 차이점? 언제 html 파일을 생성하는가
- 정적 생성 (Static Generation)
- 프로젝트가 빌드하는 시점에 html 파일 생성
- 모든 요청에 재사용
- 퍼포먼스 이유로, next js는 정적 생성을 권고
- 정적 생성된 페이지들은 CDN에 캐시
- getStaticProps / getStaticPaths
- 서버 사이드 렌더링 (server side rendering <ssr, dynamic rendering>)
- 항상 최신 상태 유지
- getServerSideProps
server side rendering에서 js의 역할은 css로딩, onClick액션처리등 최소한의 역할
정적 & 서버사이드
// defaultProps
[컴포넌트이름].defaultProps = {
키: '값'
}
// build후 start했을시(product시) 데이터의 변경이 있을때 gerStaticProps는 변경사항 반영X
// 미리파일을 생성해 조회가 일어나는게 아닌 이미 데이터가 들어가 생성되있는 html을 보여주는 방식
export async function gerStaticProps() {
return {
props: {
data
},
revalidate: 20 // 20초 지난 시점부터 언제든 접속이 일어나면 새롭게 데이터를 받아온다.
}
}export async function getStaticPaths() {
return {
paths: [
{ params: {id: '1'} },
{ params: {id: '2'} },
],
fallback: 'false'
}
}
//위 같은 방법보다
export async function getStaticPaths() {
const url = url
const res = await axios.get(url)
const data = res.data
path: data.slice(0,9).map(item => {
params: {
id: item.id.toString()
}
})),
fallback: 'false'
}
} fallback
- false
- 없는 페이지 대응을 하지 않고 404페이지가 보여진다.
- true
- getStaticPaths 로 전달된 경로는 빌드타임에 만들어지는거는 변함이 없으며 나머지들는 최초 접속시 props가 빈상태로 그려지고 이후에 백그라운드에서 정적파일로 html, json 생성되며 next.js는 pre rendering 목록에 추가하여 2번째 접속부터는 정적생성된 파일이 사용된다.
// 페이지에 들어올때마다 서버에 요청을 해서 데이터를 가져와 html 파일을 그때그때 보여준다.
// context? 여러가지 정보들이 담겨있고 params, 응답 쿼리등이 담겨있다.
export async function getServerSideProps(context) {
const id = context.params.id
}
useRouter
a태그나 location이 아닌 useRouter를 사용하는 이유는 새로고침이 되지 않게 하기위함.
→ 요청이 늘어나며 spa의 장점이 사라지고
→ redux로 상태를 관리했다면 다 날아간다.
import {useRouter} from 'next/router'
const router = useRouter();
router.push('/')
router.query.idisFallback
import {useRouter} from 'next/router'
const router = useRouter();
router.isFallback // 로딩중이면 true, 데이터가 떴다면 false 출력file
_app.js
- 페이지 전환시 레이아웃, 상태값 유지
- 추가적인 데이터를 페이지로 주입 가능
- componentDidCatch를 이용해 커스텀 에러 핸들링가능
- 글로벌 css 이곳에 선언
next.config.js
next의 필요한 설정을 작성해주는 파일
pages/404.js
400대의 에러메세지
pages/_error.js
500대의 에러메세지
500대에러를 보려면 프로덕션 모드로 봐야한다. → build후 start
클라이언트와 서버쪽에러를 동시에 관리할 수 있어 404에러페이지가 없어도 동작한다.
version: 0.2
phases:
pre_build:
commands:
- cd client
- npm install -g next
- npm install
build:
commands:
- npm run build
- npm run export
artifacts:
files:
- "**/*"
base-directory: client/.next/server/pages