loading...

Gatsby vs Next.JS - What, Why and When?

James Bedford on September 25, 2019

Ok firstly, I digress, I am a massive fan of both of these "frameworks". I can usually be seen gushing about them on my Twitter or Instagram, howev... [Read Full]
markdown guide
 

One thing I do wan't to mention (that sadly the article does not reflect)
Is the fact you can actually export your NextJS application as a static rendered app.

nextjs.org/features/static-exporting

And the documentation does also reflect this.
nextjs.org/docs#static-html-export

There are some limitations but generally you can copy just the dist folder and you have the app statically generated :)

(though there is some more to it, but it is not that hard, and pretty much reflects the same process as Gatsby)

 

This is honestly the best article I've ever read on Gatsby vs Next.js. Thank you for your contribution!

 

That means a lot. Thank you, my friend 🙏

 

I started to learn JavaScript a few days ago and I keep hearing about these frameworks, the most common one I keep hearing about repeatedly is React.

Is there any framework that can make my "learning JavaScript" life easier from the start, and then also pay off later or should choosing a framework wait until I've properly learned JavaScript on its own?

 

Don't focus on frameworks, first master vanillaJS, there're thousands of resources out there such as YDKJS by Kyle Simpson or Eloquent JS or flavio copes JS handbook. I suggest buying Traversy Media course on udemy of vanillaJS, after that continue with react then the backend, NODE + Express
Once you got the grasp of 1 framework the rest are the same, IMO they're always trying to reinvent the wheel...

PS:forgot about testing, after Frontend and Backend make projects WITH TESTS, i vouch for jest... in today's market this is a must

 

Hm partially agree, but not completely ... sure, VanillaJS is an important foundation to master, but if you then want to get good at React (and for good reasons, e.g. because the job market for React devs is huge and booming), well that's a whole new different world, you'll again have to climb a big mountain ...

The basics of React are simple but when you reach the stage where you need to know all of these prototypical 'patterns' (HOCs, render props, hooks, context, suspend, and so on), and when to use Redux (and when not), with all of its countless variations (thunks, sagas, whatnot) and 'best practices' ... welcome to a brave new world - React, simple to learn, difficult to master :-)

I just want to make the point that, yes, VanillaJS is important, but A Knowledgeable JS Programmer does not automatically A React Guru make ... it requires substantial extra effort.

 

VanillaJS can replace most frameworks for building reactive static sites. If you get to master it, no need to learn React to make a simple site.

 

Go for vanilla, learn how to manipulate the dom, why jQuery is redundant, learn ES6, array/object methods. Then learn framework that is up to date and people are hiring for knowing it. Frameworks are like cars, everyone argues that certain brand is the best but learning to drive is what matters .

 

I'm now wondering what the most in-demand (from a hiring / salary perspective) framework is. My goal is to learn enough to get hired but I also want to ensure I have the best salary prospects at the same time. My initial thinking was that "full stack" development must surely be in the highest demand but now I'm thinking it might be smarter to really specialize in pure JavaScript and just one framework.

 

So these are specifically React-based frameworks. A framework for a framework shall we say ;)

I would stick doing what you are doing for now - check out javascript30.com - when you get comfortable hacking together little projects then, by all means, check out a framework. I think actually it can make the process easier, but I wouldn't recommend doing so before learning the JS fundamentals.

 

I personally would try and become an expert in vanilla JavaScript... es5 & es6+. Then learn how to serve it up with Node.js and Express. Then learn about webpack and Babel! 😃😃 It will help you understand moving parts of JavaScript and eventually you should learn React.js library . (not a framework) and then Redux. 👍

 

TL;DR : strategy I followed = cover basics + interview questions, get a job, learn rest on the go. Choice is yours tho.

I was a php dev 1 year before. Took a break for 4 months, learnt basics of JS, Node and Vue, got hired for a reactjs position! Now I'm a full stack dev (react and rails!).

I may not be crazy good these (which is very difficult to become, especially in highly volatile js ecosystem), but brave enough to believe I can make things working with any of these tech. Personally I felt learning speed is much faster when there are deadlines and while working on projects that matters.

I'll highly recommend to follow twitter accounts of devs like dan abramov, where you can get lot of relevant info. Being up to date is critical to survive in JS world IMO. I also follows some sub reddits for webdev, js, react etc. YouTube tutorials of traversy media, academind and net ninja helped me a lot in the initial days.

 

This is the same problem I had. Whats the point of learning React/gatsby for making sites when you can make reactive static sites with vanillaJs that behave exactly like a native app. This will allow you to master javascript and a do the same that a react app does. Still theres cases where you might want to use React, but it’s overkill for a simple site/blog.

 

I first came across gatsby and tryied to convert a wordpress site by its API the question is that it have more than 9000 articles (its not the vegeta's joke) it has not even builded. Them I found next.js and it solved the problem, now I'm build a institucional site with a little blog posts system and gatsby are doing the job perfectly

very nice article :D

 

How long is the build and deploy processing time? Have you try or compare it with Hugo?

 

James, thank you! Most of us all the time say that NextJS fits big projects and GatsbyJS is for small. Nobody says why. You pointed out a really important thing: "...content to grow a lot over time, then static generated web pages are not the best solution for you". Basically, it's a truth. A truth that lives now. GatsbyJS community claimed to improve this long time ago and looks like the core team did few steps forward (Read on my blog: webman.pro/blog/is-gatsbyjs-great-...).

What if GatsbyJS team will implement incremental builds support? Can they fight NextJS in context of big application? IMHO, depends, because NextJS
and dynamic SSR will still be more flexible. Let's say your GatsbyJS application based on some global configuration and any change will require rebuilding anyway. What if you had 1 million pages? You would still have to rebuilt all of them with GatsbyJS, right? In case of NextJS you have to invalidate cache only (if you have such). For sure, cost of NextJS infrastructure is a bit higher, but we are not talking about money here :D.

 

Would you recommend Gatsby or Next for a blog with the expectation to scale to 300 or 400 posts over the next one to two years? I'm developing a new website now that already has around 130 and takes about 5 minutes to build on Gatsby.

 

My personal instinct would be to go with Next.

 

If you still want to pre-build larger websites, site generators like Hugo and Nift still have surprisingly good build times on websites with thousands of pages or just lots of content. You can use React with at least Nift as well.

 

Tried out Gatsby recently, it's really awesome, hoping to go into next.js soon.

From the authors explanation that next.js involves generation of content from the server. In terms of performance making round trips to such server and getting our content would have to affect the speed of such application. I think that was why client side rendering (CSR) was introduced in the first instance.

Well unless we introduce some caching, but still our app would still be slower initially.

I guess we have some pros and cons.

 

Not necessarily. Rendering on the server-side has the benefit of less back and forth between the client and server as requests have to be made to bring content, so it could actually be potentially faster.

And as you mentioned, server-side rendering makes caching and working with CDNs a lot easier.

 

Thanks, James. Good post! Just wanted to add for people who would like to know more, that Next.js allows a hybrid way to build your site, parts are static and parts are dynamic. Also a discussion about Static Generation (SSG) and Server-side Rendering (SSR) is here github.com/zeit/next.js/issues/9524

 

The 3 paradigms of static sites and why people use react apps.

  1. Navigation. Make the UX seem like a native app
  2. Reactivity. Components share states and react to each other
  3. Data. How capture and use it

However all of this problems can be solved using pure HTML/CSS/JS and no frameworks.

 
 

I have working on Next.JS project and I hate it.
Annoying routing. Annoying deploying.
And I really don't understand what is the difference between dynamic and static on this context.

You said, "If you have lots of content or if you expect your content to grow a lot over time, then static generated web pages are not the best solution for you."

It means that Next JS generate static web page when 5 school page when data from API just have 5 school data, and when data from API increased to 100 school Next JS generate static web for 100 school?

Plus, annoying deploying.
I have VPS with apache (only. my nginx is crashed) and it's SUPER difficult to deploy Next.JS project. So I am forced to 'static export' the project.

 

Hi, I am one day old in knowing Gatsby and 6 hours new to Next.js. Thanks for your great article. I would like to reconfirm a few questions after reading your article:

1) When you say Gatsby being less suitable for sites with thousands of pages, I suppose you mean page type right? Thousand of blog posts with contents feeding from other CMS such as WordPress and Strapi do not count as thousands of pages right but just one or two pages (listing + post details). So that's why Gatsby can be used for some kind of blog site.

2) If I want to build an industry specialised twitter like site with user able to submit their tweets, Gatsby can be up to the task right? This is a fun project just to give myself a goal to guild my learning. I don't mean to push to production.

3) I am an outdated-programmer. So naturally if I can get away with less coding, it will be better. Based on this constraint, should I start with Gatsby or Next.js?

Thanks a million for anyone helping.

 

Hi James,

I am building a small react application but with two html entry points,1) login.html 2) signup.html and both pages will share many common components.

SEO : Nice to have
API : All api request will be done from browser only
SSR : Nice to have
Performance : Business critical

Considering that which option will be best for me?

1) CRA : I have worked on this but as I know it will require a lot of customisation e.g. ejecting CRA, customise webpack config for multiple entries etc.
2) Next.JS and Gatsby : I have not worked before.

Looking forward to know your thoughts. Thank you.

 

Next can now both of the things. I started using Next.js. Never looked back.

In Nextjs
export const getStaticProps = async () => { // getStaticProps for SSG, getServerSideProps for SSR
const data = await fetchData();

return {
props: data,
};
};

IN GATSBY
export const query = graphql
query {
site {
siteMetadata {
title
}
}
}

Rest of the codes are almost same.

 

Thanks for the article, the first one I read on those two technos, no need to read another one, I just have to go read both documentation now, knowing I already understand their differences

 

I actually dont get how to pull the date at build time using Next js, for Gatsby its more obvious because its complexity is hidden over graphql from Gatsby

 
 

Thanks for sharing this! I'm currently developing 3 sites with Gatsby/Gridsome, this is perfect to use. The developer experience is nice, documentation and community growing.

 
 

I'm thinking of building a personal site with Gatsby and this post was very helpful, thanks!

 

You're very welcome.

I would recommend checking out out this free video on Youtube which runs through the whole process of building a blog with Gatsby and hooking it up to a CMS

youtube.com/watch?v=8t0vNu2fCCM&t=...

 

If you were to use AWS (amplify) to host your website. Considering that outgress costs you money (requests) , but not ingress (build), which one would be the best option? Next or Gatsby?

 

Well technically you can also use HTTP request (with axios) in GatsbyJS at run-time. GraphQL is resolved at build time however : explained here gatsbyjs.org/docs/client-data-fetc...

 

Great article I was honestly looking for the answer to this and you explained it well!

 
 
 

Though I'm a stronger user of Gatsby, Next is closing the graph and becoming a default rich toolkit to get people started.

 

But we can use graphql also for a next application.So, what difference it makes with respect to data handling?I'm just curious to know :)

 

Thanks for the article James! I find the gifs really distracting as I read, am I the only one?

 

Gatsby is rolling out incremental builds now to address the build time at scale.

 

NextJS supports both server side rendering and static site generation and can also be used in hybrid mode.
nextjs.org/docs/basic-features/dat...

 

Huge fan of this post, thank you for writing it! As someone new to Gatsby and Next.js it’s a great look into what both could offer me and when I should use one over the other.

code of conduct - report abuse