인프런 박용주 님의 'Next.js 시작하기(feat. 지도 서비스 개발)' 강의를 들으며 공부한 내용들을 참고했습니다.
1. Next.js 공식문서의 getStaticProps
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
기본적으로 지켜야 할 것들
- getStaticProps 라는 정해진 함수 이름
- export 를 해주어야 next.js core에서 인식 가능
- 한 페이지에서 사용
- dev 환경에서는 요청 올 때마다 실행되는데 build 후 실제 제품에서는 pre-render 처리가 정상적으로 됨
When should I use getStaticProps?
-
The data required to render the page is available at build time ahead of a user’s request
-
The data comes from a headless CMS
headless CMS : 컨텐츠와 서비스가 분리되어있는 시스템
https://simsimjae.medium.com/headless-cms%EB%9E%80-49569dc86daa -
The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance
-
The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situation by using a Middleware to rewrite the path.
=> 데이터는 사용자별이 아닌 공개적으로 캐시될 수 있습니다. 특정 상황에서 미들웨어를 사용하여 경로를 다시 작성하면 이 조건을 무시할 수 있습니다.
=> 대략적으로 캐시 처리 관리를 할 수 있다는 거 같은데 일단 인지하고 스킵.
When does getStaticProps run
getStaticProps always runs on the server and never on the client. You can validate code written inside getStaticProps is removed from the client-side bundle with this tool.
- getStaticProps always runs during next build
- getStaticProps runs in the background when using fallback: true
- getStaticProps is called before initial render when using fallback: blocking
- getStaticProps runs in the background when using revalidate
- getStaticProps runs on-demand in the background when using revalidate()
When combined with Incremental Static Regeneration, getStaticProps will run in the background while the stale page is being revalidated, and the fresh page served to the browser.
*ISR : https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg
getStaticProps does not have access to the incoming request (such as query parameters or HTTP headers) as it generates static HTML. If you need access to the request for your page, consider using Middleware in addition to getStaticProps.
=> fallback: true / fallback: blocking 옵션은 렌더링과 getStaticProps 함수 실행 순서를 조절해줄 수 있음
=> revalidate / revalidate() on-demand 차이
=> getStaticProps에서는 기본적으로 incoming request(query parameters or HTTP headers 등)에 접근할 수 없음. 그러나 제공하는 Middleware를 쓰면 가능은 함.
