- 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) So there's something that there are a lot of frameworks out there, React frameworks, so doing
stuff on top of React and they're becoming very popular and they handle, you know, there's Next.js and there's Gatsby, and they kind of do things differently. They're both React frameworks but they do it differently. Can you tell us a bit about this? - [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 all of, or if you need
server side rendering, all this hard stuff 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 today. - [Sadek] Right right right, so the first thing I want to understand is imagine you're in
front of your browser, we deployed both apps, one, 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. 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. And then it will 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. 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 idea for 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. - [Sadek] But it is not actually. - [Wes] It's not, 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 sorta 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
that request is happening, fetching data every
time for Next.js right? And you grab it in server and going back, whereas in Gatsby 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? - [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, 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
very interesting thing in GraphQL, sorry in Gatsby, that it wraps everything into GraphQL. - [Wes] Yeah it's really
cool because it makes you, Gatsby is very much
about, it needs to about everything happening on your website, where 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, some cool stuff that's
really surfaced with that. - [Sadek] So there's also the routing that is very different between them. Can you tell us the differences between the routing in Gatsby,
if we can call it that, and in Next.js? - [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. 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 right right. And also there is, so Gatsby
you talked about plugins, and there are a lot of plugins for Gatsby. Can you tell us a bit more about plugins? 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 Gtasby 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 you out of the box you know, with plugins you don't
have to implement them but you get these kind of little tricks that makes the website
quality overall much better. - [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 do deploy each Gatsby - [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 because, like a Nginx
config or something like that to handle routes, because it
literally makes folders called, 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 host your
regular DigitalOcean, or Zeit has their own nice
hosting version as well. - [Sadek] And Zeit there they're
doing something very like lately, very interesting is that this serverless and Next.js. - [Wes] Yeah they're taking
their Node hosting platform or anything-hosting platform, and they're, 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. - [Sadek] Cool.
