ProjectsAboutBlog
  1. +
  2. +
  3. +
  4. +
  5. +

Gatsby.js vs. Next.js | First impressions with the best react framework tools currently!

Published: 2020-11-12

During the last couple of months, I have been doing all my professional work in two very popular frameworks. One being Gatsby.js and the other one Next.js. After spending countless hours learning, experimenting, and working with both tools, I think it's finally time for side by side comparison of them both to see their individual benefits and their pitfalls.

Why not use create-react-app?

Why not use Create-react-app? | Kodex CPH

The first thing you might be asking yourself is, why you should use a framework on top of your react-application? But the answer to this question is very straight forward - SEO!

React is based on Javascript which makes it incredibly fast - compared to the alternative and its predecessor which would be PHP. Since React runs on the Client side, it can benefit from the processing power of the device that visits your page. However, the major downfall of this is that Google and other search engines favor serverside rendered pages since they're easier for them to interpret. You can read the following blog post if you want to know more about this topic: javascript-seo-server-side-or-client-side-rendering.

Although this fact made many people question React as a web dev tool, the solution to this issue has been found - and it's called Next.js. and Gatsby.js.

Should I start with Next.js or Gatsby.js?

Should i start with Next.js or Gatsby.js | Kodex CPH

It's hard to say! I don't know the answer since it will be based on your personal preference. If you're new to React I would actually say that Gatsby is a bit easier to understand at first. I think the documentation is done best at Gatsby.js and you will quickly see many results since you're working with static site generation. On the other hand, I would probably suggest you take a look at Next.js if you're already familiar with React. I would say the workflow is more intuitive to a trained react developer.

Would your client prefer Gatsby.js or Next.js?

Would your client prefer Gatsby.js or Next.js? Kodex

This is a matter of your client's opinion. I have created a little list to show some of the things I would keep in mind when deciding what framework you should go with:

Why you should choose Gatsby.js

  • Your client wants to build a blog, portfolio page, or similar.
  • Your client wants large files like images, videos, animations, etc. displayed on their page.
  • Your client is really focused on good results from a Lighthouse report.
  • Your client cares about the amount of API-calls to your database, due to costs.
  • You don't have to worry (that much) about Image sizes, optimization, etc. as a developer.
  • Gatsby has an amazing plugin library for almost everything!

Why you should choose Next.js

  • Your client wants to create an eCommerce platform or a page with dynamic content.
  • Your client wants searchability on their page (Can be made with Gatsby.js - but's it's a bit tricky).
  • Your client wants to see the changes fast after they change something in the backend.

These are the factors I could imagine that you would find yourself asking your client after having worked with these frameworks for some time. All clients are different but from the list above there's one major reason why your customers would prefer Next.js rather than Gatsby.

This is why your client would prefer Next.js

This is why your client would prefer Next.js | Kodex CPH

Personally, I think that Gatsby.js has a lot of great benefits, that would make this framework the winner of this comparison - but, the fact that you can't see the changes in the frontend immediately after you change something in the backend is a major pitfall, that would make most of your clients prefer Next.js. Gatsby has however invented what they call "Gatsby Cloud" which generates extremely fast builds. This will allow you to see changes in real-time.

It takes you a little longer to set up - but can be done - and with content management systems like Sanity.io, you can even integrate this into your backends preview. If you cannot integrate it to your backend you have to let your client know that they have to visit a page named something like "preview-your-page-name.gtsby.io" to see the real-time changes happening. This can't be a bit confusing to most customers, so I would suggest you ask them what they would prefer, explaining to them all the benefits they gain with gatsby. One more thing is that they only have 100 Real-time edits a month on the free plan - and to upgrade you have to pay. I haven't tested this, but most often companies only post something 1-5 times a month, so maybe this wonøt be a bother for your client.

I hope you found this helpful. Kodex CPH is a company who are specialist in design modern and blazing-fast websites, so please let us know if we can help you in any way.

More Insights

  1. Published at: 2020-11-17

  2. Published at: 2020-11-16

  3. Published at: 2020-04-20

  4. Published at: 2020-04-13

  5. Published at: 2020-04-11

  6. Published at: 2020-04-10

  7. Published at: 2020-04-09

  8. Published at: 2020-04-09

  9. Published at: 2020-04-08

  10. Published at: 2020-04-07

Author

Morgan Grage

Full-stack developer