Gatsby vs Next.js: Which does SSG Better?

hello everyone and welcome back to my channel my name is Harry Wolfe where I talk about coding today's fun little topic I want to delve into with you if you permit me is Gatsby jazz versus next jazz which does static site generation better bum bum static site generation has been around for a while now ever I think when the first versions a static site generation was Jekyll a framework written in Ruby that was probably the first big mainstream implementation of like an abstract framework for writing a static site and of course when I say static site I mean just HTML files and since then that entire scene community has just grown and gotten large and today in 2022 of the juggernauts in this space are gas PJs renowned worldwide for their static site generating tool Gatsby and next j/s which might sound surprising to you now but with our recent release of next is 9.3 they are actually firmly in the static site generation game so today I'm going to kind of give a overview of next is well actually no Gatsby was over here right Gatsby Jess and next Jay is and kind of give you the rundown if you're curious if you're thinking about making a static site and you were confused which one to choose after this video is over you'll have more data to make up your mind and you'll be maybe surprised about my final conclusion at the end but for now let's start with next Jay next Jay s next Jay s is probably the closest thing that the react community has to a react framework if you do Ruby there's Ruby on Rails there's literally there's other frameworks in the Ruby land but you use Ruby to use Ruby on Rails there's nothing equivalent in the react community and kind of next is gets as close to that next Jas takes a well used to be called an isomorphic approach to rendering and isomorphic mean that you can write a react component and it will render both on the client just as you normally write react application is nowadays it'll also render on the server meaning that you get the benefit of server-side rendering with react when you use next Jas typically that's really hard to set up yourself and next yes cuz just taking care of that entirely you use next yes and you're up and ready to go with server-side render react that then gets bootstrap on the client-side and you're off running on a client-side application but because it also has this suicide element next is you can actually write an entire application with fully dynamic content like if you want to write your own like Twitter clone there's a really good example you actually could write it with next is because you have sort of rendering you could query a database you can actually learn the things there and you have complete control over the server as well like next is actually lets you customize your nodejs server so if you actually want to add different features you are fully free to do that and one of the reasons why I am even talking about next yes today in combination with gatsby Jas is due to their new release of 9.3 with next jeff's 9.3 they actually brought in this next-gen static site generation support where essentially you can actually very straightforwardly create a static site with next is there's new api's that they provided that you can then use till next years how to actually make your site but you can actually now make a fully featured static site generator static site with next j/s so let's look at the hello world example actually has to see what a vanilla hell old neck chefs application looks like this is straight off their repo so if this is not the best example then I don't know where else to get her from you have a package.json with just a few next commands and then you go into pages and next Rios takes a very let's say literal approach to deciding what surrender when you have an index DOJ's file when this actually serves up this file this will be served at the root of a page likewise with about when you go to slash about then you'll render this page so very straightforward this is the most vanilla example of using next Jas and that's I'm gonna stop now for next yes and switch over to Gatsby I don't know how this shirt got on me but I guess that's what I need to do I'm talking about Gatsby it's weird what YouTube makes you do nowadays so gasps PJs is a tool built from the ground up to explicitly be a static site generator also you just react no surprise there and ever since its inception it never pretended to try to be a server-side rendering solution it's always been the most react focused way to write a static site the website kind of gives you an example of how it works on abstract there's not much more to talk about with Gatsby because it is just very laser focus on its use case one of the big differences between a Gatsby and next is though is the way in which you can customize the site I'm gonna hold him that thought for now let me just jump to the example of Galax because I don't have much to say about this part at the top because Gatsby just does static sign generation and you look at a starter the starter default of Gatsby j/s it comes very similar to next yes there's more files in the root which I'm not going to talk about right now but you have this source folder and then you have a pages folder and here is where you have those same mappings of the file name to the URL so when you have this page to example if you go to slash page - too then you'll see this page on there so you go to index J s you can see the link to page two and that works just like next J s we can actually link to pages and go to slash about same idea entirely so are they that different yeah yeah they're pretty different let's start talking about the real differences between the two okay okay no more shirt changing you can't see but when I teach my shirt actually have to change my shirt every time so I I think you got the joke right that's enough I can stop with that now let's move on to the more interesting part of this conversation where I talk about the ways in which gatsby annexed yes different how they manage data in your application this is a very interesting divergence of approach so next J s takes a very bare-bones approach to data fetching but that I mean is that they expose some API is that you can use that are called when a static page is generated and that's it so when you want to fetch data for a page what next jazz exports are these functions in a file and when the page is being rendered it calls it and then you can do whatever you want in node land you've used any NPM package you do whatever you want with the file system and then you just return the data and then next just goes from there in the contrary or or in comparison gatsby takes a very plugin oriented approach where almost anything that you'd want to do with a website with gatsby is wrapped in a gatsby plugin which means that if you want to read markdown files from your blog because that's the easiest example there is a plugin that you would use from gatsby to do that so let me show you what i mean in both these cases again i'm using the built in examples from both gatsby and next j/s there's no way of coding in this just going to kind of walk you through the code as it exists so this is the next GS blog starter repo or folder I guess the way so let's say you want to so the first thing you want to do for example when making a blog is you want to have a different page for every blog post right so here you haven't got in next is the underscore post which is a convention made famous with Jekyll and here's all of your blog posts you have in here have a world uses markdown with this thing called frontmatter so that you can have metadata associated with a blog content if you're watching this hopefully understand what french matter is and then for each of these blog posts for them to be a separate page and as we saw before how gatsby does pages is different files in the pages folder but the question here is we wanted to have those pages be dynamic so how does gatsby do how does the next day as to do that I wouldn't this speak by kind of interpolation on the in the file name itself so you're used to seeing this kind of like you know bracket slug in routing libraries where you say you know we place slug the actual name next just applied that to the actual pages convention so that means that every one of the markdown files is gonna use this slug and again what I've seen same about before is that next yes exposes these functions get static props and get static paths this is where this get static pass these paths is what's actually being filled in to the slug value here and this is what I was talking about before where you can just call whatever you want in here so this is a function that's defined in the blog stutter itself so I look at the top it's going from Lib API and this get all posts is going to load and get all posts calls this and then sure what it does is it's just reading the post folder and this is just note like this is just note code you can just read it understand it and that's kind of what next Jas recommends you do so you're exposing all the paths you want to do and then for each one that's then for each path that you return next chance will render an individual instance of this bracket slug page every time runners each individual bucket slug page it's gonna call get static prompts and this is again calling some node code code to read that markdown file parse it parse the frontmatter and we turn that data that you can then use it in your react component here and that's kind of like the straightforward push to it next we have tries to kind of expose some primitives that you can use and build on top of and doesn't really supply a lot of functionality on top that itself which is a trade-off because in on one side you have very clearly understanding what's going on here like you can trace the steps like you learn three API is right you learn the bracket slug thing you've learned these two methods here get static pass and get static props and then you're kind of off to the races look that's kind of it and then of course to do markdown stuff you have to then figure out how to parse that yourself using libraries that this is using grey matter to do the parsing of the markdown with a frontmatter here it's using gray matter yeah so that's next is Gatsby on the other hand takes a very plugin oriented approach so I mentioned that before about how Gatsby doesn't relie expose the bare metal to you everything's wrapped in a plugin which again is a trade-off because now you don't have to do a lot of implementations yourself now you have to understand how the plugin architecture of gatsby works so we start before how Gatsby has source pages just like next j/s but here you can see in this starter blog example there's no bracket slug here like for each of the blog post if I go back to where the blog posts are here's the content folder so here's the blog and here's all the files indexed up and the different convention for making blog posts at least even actually co-locate to the image files for the blog post next to it and again this is using the same convention as most modern static sites used with using frontmatter same thing that's next yes frontmatter which is yellow and then the rest is now very very standard nowadays it's pretty much if you don't do that you're not really a static site generator anymore so the question that becomes how do these blog posts become render pages like where is that connection me because there's no bracket slug the answer for that requires a lot more explanation sadly so the way that gatsby manages all the contents of your static site is through an abstraction via the means of graph QL the Gatsby GS website actually has a good job explain this where you have pulled data from anywhere so these are all data sources it could be API is could be files it could be databases all those sources are pulled into Gatsby by a build step which is power by graph ul and then you can then think as we will then render that for you and this is the part that's the hardest part gatsby is this graph QL abstraction where you query all the content of your application through graph QL which is a bit of a mental struggle at times to understand so let's go back to the example here to actually have the functionality where you are pulling in these markdown files pulling these images yeah if you have to configure Gatsby ink and Gatsby config and here you see this array of plugins that actually configures Gatsby to pull in that data from the file system so you have here this file system you're saying you know read the file system from content blog they start up there here we're also doing source file system for assets it's actually pulling just raw assets here's the transform for markdown so we're saying you know use the file the file system plug-ins use the output of the file system plug-in to then transform those files to markdown and here's the additional options that they're passing to the markdown plugin as well things here's transformers sharp which lets you compress images for free like you just npm install this one plug in and out of here and then you just get that and then here's also gas because in feet where you can actually get an RSS feed you know through configuration you use the plug-in and you configure it and you get it so this is one part of that we've now configured the gas beatgraph UL query database to work and then the second part is actually configuring gatsby to then make these extra pages and that requires you to drop into gatsby node again this is a lot of configuration required for this abstraction where Gatsby has api's like next j/s that are called at the build time that allow you to configure that gatsby build one of those is this create pages api where it's called at build time and ask what additional pages should i be making is what Gatsby's asking and here it's actually querying the graph QL abstraction that I was talking about this is what it looks like you're saying query for this all the trance all the markdown files that I've transformed into like the parse markdown get all of those let me to a thousand get me the slug and the title and when I can do for all this post is iterate on each of them and create a new page like this function called create page is exported from Gatsby itself and every time you call this you're making a new page like that bracket slug this is Gatsby's ways of doing that and here's the data that you're passing to that or to be created and then the component you're saying to use is blog post which is source template auto spec sheet I can go to source templates blog post and here's the actual react code that will be rendered with the past and data for your static site here so that's and there's additional queries that you're making to further get data to that page itself and that's kind of the end of how you make a Gatsby blog a lot of steps in direction but also you're getting on for free because you're using the Gatsby plug-in architecture to do all these things they're defined in this Gatsby config like having to do you know just reading the file system transforming them we start next just do that next yes does that looks like here it's reading the file system and it's transforming it here but then what it's also doing here is it's actually compressing image assets for us which next show yes that's a whole out-of-band operation which I don't know I only have an answer hat to how next Jess would do that here it's trying to add Google Analytics you'd have to modify your next j/s template for that here you want to make an RSS feed oh it's make a new file for that this just kind of gets ya Oh while these abstractions gives you more power flexibility to just get things for free with the caveat that you have to understand how the abstraction works first what's interesting actually right now is preparing to make this video I was going through Twitter as I usually do and the biggest thing that is not the greatest gatsby is having to understand all the plugins and obviously the Gatsby team is smart and is aware that as well and I saw the creator of Gatsby J's post about this thing called Gatsby recipes this is a RSC request for comment it's not a thing yet this is an idea that they're thinking about but essentially it's a way to write recipes of plug-ins and conventions such that to make a blog requires you to just download a file that looks like this where it installs these plugins installs this and you're up and running with a blog that's kind of like the high level idea where if this works as expected as hope for you could then not have to worry about this plug-in architecture itself but to be a layer on top of that as well so you can get further bang for your buck in that venue okay that was a lot of information that I just threw at you you have gasp you have next yes I call next yes the bare-bones approach it tries to find the most minimalist api's and just expose it to you the developer and then you can kind of customize it from there on out to your heart's content Gatsby takes a plug-in architecture approach where all like the core Gatsby application itself has this graphical abstraction that by a plugin you can then program to gain more powers and flexibility there but it requires you understanding the plugins to understand which plugins you want or needs and configure them with Gatsby and then you kind of get all a lot of things for free after that and that's the trade-off that's my conclusion there's it's a trade-off what do you want to do do you want to get a lot of things for free but understanding this abstraction doing it not that much but just kind of like the barest of API is available I will say this that Gatsby was always built to be a static site so if you truly just want a static site Gatsby leans into that much more strongly than XJS but next we have see is this as a area that can actually provide value in and a different approach towards and also different flexibility towards so they're allowing you to make a static site there as well and the choice is kind of up to you I think that you could actually get pretty far with next yes without having to read that much so you can read the barest of a pis and get them with next Jas we're gonna hit a stumbling block is trying to add all the functionality that comes for free with Gatsby plugins be able to compress images parsing markdown files configuring an RSS feed all those things it's gonna be like I'm gonna get up and running real fast and it's gonna be like a very slow progress after that it's my thinking Gatsby it's gonna be very slow to get started especially if you're starting from nothing to understand how a Gatsby works its architecture like how do you configure a Gatsby like where are the informations from there but once you actually get that base understanding you have a huge gets the ecosystem of plugins that has so much functionality built in for free free so if to configure them a little bit so it'll be slow to start with but once you actually get that base knowledge potentially you can ramp and grow really fast and that graphical obstruction is it's weird but once you've dropped it it definitely makes sense there's definitely power in that abstraction but it's still weird I don't think it's not weird at all but it seemed it weirdly works is kind of the conclusion there what do you prefer bare-bones plugins included I'm curious to hear your thoughts right now my blog itself is built with Gatsby because I boys wanted a static site and next day I didn't have this static site feature until last month when 9.3 came out I am curious about it I like having that more closer to the middle experience but the thought of having to rewrite all the function on a get for my plugins seems also like a drag so again I don't know it's a trade-off everything's a trade-off there's no clear winner here and that's how I have to leave you annoyingly enough with no real answer what what you do you don't have to think a little bit about what you think is best to do what do you want what do you most comfortable with what are you going to enjoy maintaining for a long period of time these are the questions you should be asking yourself when taking any technology choice so hopefully you enjoy this video deep analysis synopsis derivative I don't know about where static site generation is our day is the 2020 thank you so much for watching hopefully enjoy this video share it with your friends family and pets these pets don't see enough coding videos they don't have our first coding dog yet and that is so depressing to me become subscriber if you are not already a subscriber doing my newsletter my newsletter has so much content in there I don't need to pump that nuclear up because there's so much good things in there I will see you again next week with a brand new video from me Harry wolf your coding friend

Channel: Harry Wolff

Views: 14,714

Keywords: gatsby, react.js, ssg, static site generation

Id: imeAhvbA968

Length: 23min 46sec (1426 seconds)

Published: Mon Mar 30 2020