Why would I ever choose Gridsome/Gatsby over Nuxt/Next when all can do static site generation? [closed]

Question

Gridsome/Gatsby use case: CMS only?

I read that Gridsome/Gatsby works well with CMS's, but I never had to do anything with a CMS which is why I personally can't relate with that advantage. Is this the only case where it's better to use Gridsome/Gatsby?

Static Site Genration and Prefetching

All can do static site generation and prefetching. Is there any difference in the behaviour at all?

Flexibility

Basically with Nuxt/Next I have the flexibility to do what I want and change the build behaviour (SSR or static site generation) easily while I'm actively developing. On the other hand with Gridsome/Gatsby that flexibility is not given. Or is it?

Time Investment

Also, considering time, learning two frameworks - well - is time consuming. Therefore Nuxt/Next would keep me covered for a broader variety of use cases and would be more worth to learn. At least thats how I think based on my current knowledge.

Current Personal Use Case

In my specific case I want to create a landing page. Theoretically, from reading articles, Gatsby/Gridsome sounds more suitable. But looking at the features, Nuxt/Next can do exactly the same without any disadvantages compared to Gridsome/Gatsby.

Answer 1

Gridsome/Gatsby are Static oriented only, when Nuxt/Next are SSR first.

SSG: Static Site Generator - Gatsby/Gridsome

SSR: Server Side Rendering - Next/nuxt

CMS only

No, but there are a lot of SSG plugins that will help you fetching data from CMS (Wordpress, Drupal, Contenful, Strapi etc). You don't need a CMS to use a SSG, you can use either JSON, Markdown, MDX to hydrate your markup.

Flexibility

Indeed, you can't change build behavior with SSG. But you can do dynamic things with static website.

Time Investment

Very similar between SSG and SSR. SSG is maybe simplier, more abstraction, but if you use Gatsby, you will learn a part of React, same for Next.

Personal use case

For a landing page, I think SSG is the perfect tool. Do you need more than a static display that fetch data during build process? Forms? You can use Netlify Forms (or any other tool). Backend functions? Use Serverless functions.

SSG comes with great SEO/performance plugins, I'm not sure they are available with SSR.

Answer 2

With a static site generator like Gridsome or Gatsby, you can deploy your site on very cheap static hosting platforms like S3, and keep all the dynamic parts on the client's browser. You would only need a dynamic backend (e.g. NodeJS or Serverless) for API calls or form handling.

For server side rendering engines like Nuxt or Next, you normally need a NodeJS server to serve the static pages too, and take care of capacity and availabilty on that server yourself, which can be a lot more expensive.

There's also a best-of-both-worlds approach which is to write your site in Next or Nuxt, and use it as a static site generator, with commands like 'next export' or 'nuxt generate'. They have some limitations on features that are not supported in static sites, so you need to experiment a bit to see if that suits you.