Summary of the new stuff in Next.js 9.3

Next.js-9.3.md

The blog post on Next.js 9.3

export async getStaticProps

• Runs at build time only, meaning if there’s no getInitialProps, the page will be served as a static file (no SSR).
• Can pass data to the page component as props.
• In development runs on every request

export async getStaticPaths

• Runs at build time only.
• Configures pre-building variants of dynamic routes (e.g. pages/blog/[post].js), can define variants to pre-build and still have other variants built on-demand (the first time it is requested).
• Turns out requests to explicit page routes take precedence over dynamic routes, so it’s possible to model complex routing schemes with pages.

export async getServerSideProps

• Runs on every request (always SSR).
• Can pass data to the page component as props.
• Can not be used alongside getStaticProps.

Preview Mode

• Next.js Preview Mode
• Can be used to make static pages act as if they were SSR’ed, meaning their getStaticProps and getStaticPaths will run on every request.
• Useful for previewing CMS content changes immediately without waiting for the cache to refresh.

When working with CMS content that changes, there’s 2 options to make it work with getStaticProps:

1. Re-deploy using a webhook on content changes (most CMS’s have a webhook and Zeit has a deploy hook).
2. Use a special trick called Serverless Pre-Rendering in which Now will always serve the cached page statically, but periodically re-build the page in the background at a specific interval (e.g. 5 minutes) and update the cached page. This is really cool and transparent.

Additional resources for implementing Serverless Pre-Rendering:

• https://github.com/zeit/spr-landing
  • Specifically this code
• vercel/next.js#7311 (comment) (another example I found)

Successor:

• RFC: Incremental Static Regeneration
• SPR vs. iSSG