— Web Development — 1 min read
Next.js has two functions that need to be exported from a page to enable Static Site Generation (SSG) with dynamic routes: getStaticPaths and getStaticProps.
The subject of this article is the getStaticPaths' fallback option which enables Incremental Static Regeneration (ISR). ISR controls when & how Next.js refreshes data on statically generated pages.
As of Next.js 10, there are three options for the fallback option:
The main reason I am writing this article is to stress that fallback: true is very bad for SEO. It will always return an HTTP 200 status code, indicating to search engines that all paths in this route are valid regardless of if any data exists for it. This will hurt your rankings because any dead/invalid links on the internet will cause your bounce rate to increase, an important metric for search engines.
Be careful: if not implemented properly, it is possible for the 404 error page to be displayed while an HTTP 200 status code is sent to the client. Be sure to test your implementation with Postman to check the raw response is 404 for any invalid paths.
fallback option:Only paths generated by getStaticPaths at runtime will be statically generated. All other paths will return an HTTP 404 response.
Generates static pages at runtime if not generated at build time. Sends an initial version of the page to the client with an isFallback prop so you can handle the loading state. Will never return an HTTP 404 response.
Generates static pages at runtime if not generated at build time. Does not send a response to the client until the data fetching methods are complete. Returning { notFound: true } from getStaticProps will generate an HTTP 404 response.
I tried to keep this short and sweet. It's really not that complicated but the docs were not clear to me and I had to play around with it to fully understand how it works. Hopefully this clears up any confusion for you.
Happy coding!