How Next.js and Gatsby work and how they're different

New React frameworks are appearing constantly, so often in fact, that keeping up with all of the latest options takes a lot of work. Next.js and Gatsby are two of the most popular, particularly with Prismic users, so we invited We Bos to the studio to talk to Sadek about how each of them works, their ecosystems, and how they are different when it comes to rendering, data management, routing, and deployment.

This is the transcript of the Interview: How Next.js and Gatsby work and how they're different. Wes Bos (Full Stack Developer, Youtuber, Podcast speaker) and Sadek (Prismic's CEO) address different aspects of the two frameworks. We hope it will allow you to make well-informed decisions in the future and shine on the World Wide Web.

Watch it, read it, or scan it (although watching is probably more interesting) - but if you're interested in Gatsby and/or Next.js you should definitely take a look and make sure to subscribe to our channel for more videos like this.

Highlights:

• Two React frameworks that allow you to avoid dealing with routing and config, or if you need server-side rendering/generate a static site
• Next.js is dynamically rendered, while Gatsby is statically generated. (Next.js has an option for Static, but if you are going for Static, Gatsby remains the better option)
• Handling data: Next.js is un-opinionated about the way they handle data (apart from lifecycle methods) whereas Gatsby forces you to go off an API and then makes it available via a GraphQL API.
• Routing approach: No routing to config with Next.js - it's all about creating pages inside the pages directory. That's also possible with Gatsby, but also allow you to dynamically create routes through an API.

Sadek: So I'm Sadek from Prismic and I'm here with Wes Bos. Can you introduce a bit yourself?

Wes: Yeah absolutely. So, my name is Wes, I'm a full stack Javascript developer. Spent a lot of time in React and Node and I create online courses and have a podcast all about web development.

Sadek: A very, very good webcast.

(Wes laughs)

Sadek: So there are a lot of frameworks out there. React frameworks are becoming very popular, there's Next.js and there's Gatsby, and they kind of do things differently. They're both React frameworks but they are different. Can you tell us a bit about these?

Wes: Yeah, yeah, so Next and Gatsby are sort of in the world of you wanna build a React website or application, but you don't wanna have to deal with routing or config. Or if you need server side rendering. All these hard stuffs that surrounds React, they attempt to do, and they both accomplish that but then they have their own way of going about it which is what we're here to talk about.

Sadek: Right. So the first thing I want to understand is imagine you're in front of your browser, we deployed both apps, one in Next, and the other in Gatsby and I hit the URL on the browser, what happens?

Wes: Yeah so the main differentiator between the two is that Next.js is dynamically rendered and Gatsby is statically generated and rendered beforehand.

Sadek: So let's talk about you go to /about on a website, what happens in that case?

So in Next.js what would happen is, there's a Next.js server running, which runs in Node, that will accept the request, and it will say About. From there, it'll say, "okay now we need to find a page called About."

Wes: So in Next.js what would happen is, there's a Next.js server running, which runs in Node, that will accept the request, and it will say About. And then from there, it'll say, "okay now we need to find a page called About." And it will go off and get that page. That page might go fetch some data from a database, wait for that data, come back with that data, render it out and then send it out to the client.

Before you deploy your website, Gatsby's going to go ahead and make that page into a static HTML page so it'll fetch the data at compile time and then you just have a folder called about in the index.html file, that it will then immediately serve up for you.

Whereas with Gatsby, so you hit /about. What happens is that, since Gatsby is a static site generator. (I don't even think that's necessarily a good description of it because it sorta puts it in a category of all these sort of like dumb static site generators. So we'll talk about that but it's very full featured and it still is a React application.) But the way that it works is that, before you deploy your website, or as part of some deployment process, Gatsby's going to go ahead and make that page into a static HTML page beforehand so it'll fetch the data at compile time and then at the end of the day you just have a folder called about in the index.html file in there, that it will then immediately serve up for you. And then what happens is, Gatsby picks it up from there and sorts of re-hydrates it, and then it becomes a React application.

Sadek: A full React application.

Wes: A full React application yes.

Sadek: So in one case when the first request is happening, you're fetching data at that time for Next.js, right? And you grab it in server and going back. Whereas in Gatsby's example, you're just hitting a static file.

Wes: Yeah, and we should say Next.js has an option to do static as well, to output. But I think in most cases if you're going for static, you probably should reach for Gatsby then.

Sadek: And there are a lot of differences between these, how they handle things, like Next and Gatsby. Maybe let's start with data, how do they handle data?

Next.js is unopinionated about how you handle your data

Wes: Yeah so, Next.js is unopinionated about how you handle your data. Really the only one thing that Next.js cares about is they have their own lifecycle method called getInitialProps. And that's an asynchronous method that needs to be resolved before the data can be sent from the server to the client. And that's how it knows to go off and fetch the data that's needed for that page. Like let's say we're hitting a database to fulfill that, but it doesn't care how you get that data.

Gatsby, will allow you to go off to any API that you want, it's gonna source your data then make it available to you via a GraphQL API.

Whereas Gatsby, what it will do is, they will allow you to go off to any API that you want, it could be an API, it could be a Markdown file, it's gonna source your data from WordPress or Markdown files or whatever it is that you want. And then it makes it available to you via a GraphQL API. And then when you're building out your pages, you write queries against that GraphQL API for a list of blog posts, or the About page content. And at render time, it makes that GraphQL API available to you and then it will render out those HTML pages for you.

Sadek: And that's maybe a very interesting thing in Gatsby, that it wraps everything into GraphQL.

Because everything is going through Gatsby, there's some cool stuff. We'll talk about plugins in just a second

Wes: Yeah it's really cool because Gatsby needs to know about everything happening on your website, all of your data, all of your images, all of your styles, just everything needs to go through Gatsby. And because everything is going through Gatsby, there's some cool stuff. We'll talk about plugins in just a second, and some cool stuff that's really surfaced with that.

Sadek: So there's also the routing. Can you tell us the differences between the routing in Gatsby, if we can call it that, and in Next.js?

The way Next.js works, is that you have a folder called pages, inside of that folder you can create index.js, about.js, you can create a subfolder with pages inside of that, and that is your routing.

Wes: So the way Next.js works, is that you have a folder called pages and it's a throwback to when you just had HTML or maybe a PHP server, where you had a folder, and inside of that folder you can create index.js, about.js, you can create a subfolder with pages inside of that, and that is your routing. So there's no routing to config, you simply just create pages inside the pages directory and you're up and running.

Gatsby does it that way as well, where you can have a pages directory, create all your pages in it, however they also have an API where you can dynamically create routes.

Gatsby does it that way as well, where you can have a pages directory, create all your pages in it, however they also have an API where you can dynamically create routes. So we talked about the GraphQL API where maybe you could query a list of blog posts and then you could loop through those blog posts and use the createPage API to dynamically create the pages, and you can specify what the slug is, what component will be rendered out, and it's pretty cool, because you can, if you have a list of 10,000 blog posts you can just loop through those and dynamically create pages for each one.

Sadek: Right. You talked about plugins in Gatsby, and there are a lot of plugins. Can you tell us a bit more about them? I don't know if Next.js has plugins.

Wes: Yeah Next.js doesn't really have plugins because the scope of what Next.js is much smaller than the scope of something like Gatsby. So Gatsby's very much like WordPress in that it has this huge ecosystem of plugins as well as, coming soon, is Gatsby themes as well. And I think that's really cool because the way that plugins work, is they sort of sit in between the code that you write and the code that gets outputted and like I said earlier, because everything goes through Gatsby, Gatsby is able to sorta step in between there and whether that's an image, or some CSS that needs to be compiled, or some JavaScript that needs to be minified, or you name it right, you have access to all of these things in between, so you can jump in and compress. Some of the really cool stuff I think in plugins, is around image pre-loading. So one of the cool plugins will re-size an image down to 20 pixels by 20 pixels, so that'll load instantly via Base64 and then as it loads in the larger compressed file in the background, it will just fade to that larger file which is really really cool. That's something that would have taken a lot of work previously, and now it just comes for free with a Gatsby site.

Sadek: And that's what's interesting, is that each time, these little things that make a difference but they're very hard to implement. It gives them to you out of the box, with plugins you don't have to implement them but you get these kind of little tricks that makes the website's quality overall much better.

It's not fair to say Gatsby's a static site generator. It's more of like a progressive website generator where it makes these new things (plugins) in the browser very easy to do.

Wes: I think that's why it's not fair to say Gatsby's a static site generator. It's more of like a progressive website generator where it makes these new things in the browser very easy to do.

Sadek: Probably they need to rebrand in that case. (both laugh) So what about the deployment? How to deploy each

Wes: Yeah so, Gatsby at the end of the day, it's compiled down to a bunch of CSS, HTML and JavaScript and as we know, you can deploy that anywhere you want right? You don't even need a special config, like a Nginx config or something like that to handle routes, because it literally makes folders, of every one of your blog posts and every one of your pages. So that's cool, you can host it pretty much anywhere you want. And Next.js is a Node application which you can host pretty much anywhere you want to, ie. your regular DigitalOcean, or Zeit has their own nice hosting version as well.

Sadek: And Zeit there they're doing something lately, very interesting, this serverless and Next.js.

Wes: Yeah they're taking their Node hosting platform or anything-hosting platform, and they released Now 2.0 which is going to be able to just host, it will take your Node apps and take things like your Next.js applications and turn them into serverless applications. So if you've got a website that doesn't have a whole lot of traffic, it's unnecessary to be running that thing.

Sadek: To have a machine right?

Wes: Yeah so if you could just quickly boot up that application when somebody visits the first person, kinda like Heroku does right now, where the first visit might be a little bit slow but then after that it'll be running for a little while before it decides to shut itself down.

Sadek: Yeah it's very interesting, we'll see how that goes. Well thank you very much.

Wes: Thanks for having me.