https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-pages Functions: getStaticPaths | Next.js Using Pages Router Features available in /pages nextjs.org next/router → router.isFallback으로 렌더링 인지 가능 const router = useRouter() if (router.isFallback) { return Loading... } 화면 처음 진입 시, getStaticProps 함수가 끝날 때까지 isFallback=true이기 때문에 이때 로딩바를 보여준다. 새 로고침해서 화면 진입 시 router.isFa..

에러페이지를 서버에서 제공하는 경우 비용이 증가되고, 서버에서 가져오기 때문에 느리다. 👉🏼 next.js에서는 static 파일로 에러페이지를 제공하고 있고 커스텀도 가능하다. 404 에러 페이지 커스텀 pages 하위에 404.tsx 생성 : export default () => { return 🤯404에러🤯 } 빌드를 하면 404 페이지가 정적으로 생성된다. server 에러 페이지 커스텀 404와 같은 client 에러는 static으로 만들어서 불필요한 서버 호출 막는 게 좋다. 하지만, 500에러와 같은 server 에러는 보통 정적으로 제공하지 않는다. 에러가 났을 때 서버에 로그를 찍는 등 서버로 에러를 보내는 경우가 많기 때문이다. 이에 맞춰 error 컴포넌트로 server 에러 페이지..

pre-rendering Next.js의 모든 페이지는 기본적으로 사전 렌더링을 한다. 👉🏼 더 좋은 퍼포먼스 👉🏼 검색 엔진 최적화 (SEO) pre-rendering의 2가지 렌더링 방식 둘의 차이는 = 언제 html 파일을 생성하는가? 1) 정적 생성 (static generation) - 프로젝트 빌드하는 시점에 html 파일 생성 - 모든 요청에 파일들을 재사용함 - 퍼포먼스 이유로 next.js는 정적 생성을 권고함 - 정적 생성된 페이지들은 CDN에 캐시 됨 - 주요 함수 : getStaticProps, getStaticPath 2) server side rendering (SSR, dynamic rendering) - 매 요청마다 html 생성 - 항상 최신 상태 유지 - 주요 함수 : g..