Wednesday, 10 March 2021
Coming from Gatsby to NextJS it can be a bit confusing to understand the flow of how pages are generated.
Sometimes the confusion comes in trying to compare the two frameworks as apples and apples, where there are some significant differences.
To clarify -
Where the confusion comes from is that NextJS actually gives you the option to generate static websites. Using NextJS like this brings the two more into alignment, but it does take away a lot of features that make NextJS a more fully-featured platform for building web applications.
Running NextJS projects (that aren't exported as static sites) requires a server running the project. There are hosting providers that abstract this away from you - such as Vercel and Netlify, but you are also able to host the projects yourself.
Back to the topic of this post, the phases of how content is built and output for consumption by browsers differ between the two frameworks.
With Gatsby when you want to publish a new version of the content, the following things occur (some may be abstracted from you through hosting providers).
yarn run gatsby build(or the npm equivalent) is run in the root of your project
NextJS starts in a similar fashion, but branches off quite drastically.
yarn run next buildis run in the root of the project
getStaticPropsfunction, as well as any additional resources needed for running the application
yarn run next startis executed
Where NextJS differs is that all the content that is generated at build time can be dynamically re-built while the server is running, so a build and deployment isn't necessary for each content change.
This process is called Incremental Static Regeneration, you can read about it in the NextJS docs.
There are obvious benefits to this, but it introduces some clearly significant issues and concerns -