Web Pages Vs. Web Applications
Gatsby and Next.js are what React frameworks that separate web pages from web applications. Both frameworks are incredibly powerful, creating blazing fast sites, single page applications with ease, great SEO out of the box and both offer amazing documentation that guide you to making the most out of their frameworks.
The answer of Gatsby vs Next.js, is simple, use both! However, each framework do have their cons and benefits, and have use cases that best utilise their strengths.
Gatsby:
Gatsby is a static site generator, what does this mean? A static site generator generates all the HTML at build time. This means that it does not require a server at all. Serverless baby! The entire site can be placed in an S3 bucket, or in Azure Storage for hosting. (This is far cheaper than running a server constantly)
Gatsby is very scalable in terms of high traffic, as we are just delivering already pages. The pages themselves have already been built, and all the content is known. An added benefit of this is indexing, and SEO. Because all the content is known, it is very easy to crawl the site for content, and Google thinks so too!
Rest vs GraphQL
Gatsby dictates how to handle your data - using GraphQL. GraphQL is an amazing tool, which can really speed up development in some use cases. GraphQL is a far more structured method to consuming data, rather than creating a new REST endpoint for each part of your data. GraphQL allows you to send one structured message to a GraphQL server, to gather ALL the information that you need, and it does not waste any resources sending any data that you do explicitly specify.
Plugins in Gatsby really improves developer experience, there are many plugins available that provide an immense amount of utility. This is a similar experience to how Ruby on Rails was like, if you need a new feature, 'there is a gem for that'. It very much is the same case in Gatsby, 'there is a plugin for that', and if not, there will be soon... I love the open source community!
A great example for plugins, are api source plugins, these transform RESTFUL api's to GraphQL apis behind the scenes, ready for your Gatsby application to consume them. However, there is a risk that your platform does not have a source plugin already. In those cases, this is your opportunity to contribute to the Gatsby plugin ecosystem!
Cons of Gatsby is that it may not scale well with a site with a LOT of content, as rebuilding the entire site may take a while. Gatsby may also not be what you want when you want client side fetching data / real time content updates.
However, Gatsby are soon to be releasing incremental builds, only rebuilding updated content will save an incredible amount of build time.
Next.js:
Typically Server Side Rendering, however it does support static site pages.
Next.js is flexible with how you deliver data, it is very easy to choose between client side rendering / server side rendering / static site pages. However, there is a point to make that Gatsby is still the king for static site page performance.
Next.js requires a server ( Extra costs ), but this means that the content can be dynamic, live content updates are possible, and client - server interactions are possible. This is extremely important for those that want rich dynamic content. I.e. Live comments, live feeds of blogs and content. As soon as there is a bit more complexity to a site, Next.js is a true beast, creating sites with Next is extremely easy, the documentation is well refined and there is a very large community behind the framework.
Next.js does not dictate how you should handle your data. You can choose completely how to do this yourself, you can even decide to use GraphQL if you so wish. This is very important to note, as there are still a number of platforms that do not offer a GraphQL api, and only exist on REST.
For sites with a large amount of content / with any client - server interactions, Next.js is the choice to make. As a server-side site it will be completely scale-able to however large the content is.
It's worth it to mention Next.js can also be made serverless! Via functions that server side render your pages at the edge!
Summary
Both frameworks are amazing, and I use both! If you are rebuilding your web architecture, I recommend using both frameworks, each for different use cases.
Stay tuned for a blog post on serverless, and how we can utilise it to deliver fast delivery of content around the world.