Create React App vs Next.js vs Gatsby

as a react developer you're probably excited about the ecosystem of options that you have to build react applications but maybe you don't know where to start or which route to take in this video let's take a look at comparing create react app versus next js versus gatsby and you might be interested to find out that i don't really feel like i have a need for create react app anymore so let's go ahead and break it all down all right so a little bit about my react background i started doing react maybe a couple of years ago and i had been doing angular at work going from angularjs to angular 4 and 567 and had heard so much about react i figured i needed to give it a shot and so i started looking at tutorials on youtube i took a course on udemy and got kind of those react fundamentals and almost all of that content started with create react app now if you've never heard of create react app this is basically a tool that you can use to stub out a react application in the beginning you would have had to create your own html file create that blank div that all of your content would go in you could reference the cdn to pull and react and then you kind of set everything up manually with create react app you get a lot of configurations already in place for you and kind of a folder structure for you for your application so if you watch any react content now just plain react almost all of that those contents those tutorials those videos start with create react app and i have certainly done that myself now i want to start by saying if you're brand new to react that probably still is the way to go we'll talk about next js and gatsby in a second which adds a few things on top of react if you're just learning react i would probably still recommend just starting with create react app and maybe even for practice creating that react app by yourself without using create react app and then moving into create react app but let's start to talk about something really important when we compare these three different options create react app next.js and gatsbjs and it's the difference between client-side routing and server-side routing or server-side rendering and then static sites so regular react create react app does something called client-side routing and what this means is when you make a request to this application to this website uh basically all of the logic for that site gets shipped down in javascript and then there's kind of that blank html page and then everything is rendered on the client side so any api calls that you can make you can make from the front end to get data but basically all of that application is sent down at the initial request now there's a couple of cool things with this you get into like if you look at like your traditional server side rendered pages in the past or your your dynamic websites uh you would any time you would add new data through a form or something it would then do a refresh of the page with now that new data so you do a full page reflect refresh with regular react that changed a little bit where as you added data you could then just get that data and display it immediately without having to refresh the page you could also do page navigation without doing a complete refresh because basically all react does is take information and swap out different pieces of your application based on the route that you're on and then you get into server side rendering now this is kind of if you think about your ruby on rails or your django or flask or things like that this is more of the traditional way that websites have been built for a long time and you get into this aspect if if i need a web page i'm going to make a request to a server that server is going to go and interact with a database or a data source of some sort to get all the information that's needed and then send that page back to me and that would happen with every request for a different page that i would need and so there's a couple of distinct differences in the client-side routing versus server-side rendering uh one is the seo value for client-side routing is really kind of sub-par and this is really really the idea that all of that javascript has to be loaded on the browser before google can even index this thing or i guess it's not actually in a browser but however google does its indexing it has to go in and run all of that javascript before it knows what's going on on this page now server side rendering it gets all the information it needs so by the time google or you get that page you know all the things that are necessary to gauge seo of that page now the other downside of just basic client-side routing is that the initial page load can be a little bit slower and that's because you're sending all of that javascript to the browser that can get a little it could get bloated it could be heavy and that's going to take a longer time now that also means that your subsequent pages after you've already loaded your react app and you go to the next page that page will probably load a little faster but that initial page load will be a little bit slower so the one we haven't talked about yet is static sites and this is the idea that you kind of generate your html pages beforehand at a build time so you go through some sort of build process and then you have these assets these static pages that get hosted somewhere and when i make a request to a web page that page doesn't have to go through any real-time calculation that page just gets sent sent back to me directly it's super fast it's very secure because there's not really any like server things that i have to worry about patching and things like that i don't have to worry about my security i just have files that get hosted somewhere and sent back to me directly now this gets into the idea of kind of correlating these with the client-side routing being create react app the server-side rendering being next js and then the static site's being gatsy but i'll clarify that in a little bit where it's not quite exactly how it breaks down so a couple of things next.js has i think really been known for the server side rendering aspect of nextgs you have the ability to just ship kind of a regular react application if you want to but you can do something you can make a call to get side props and this will basically turn a page into a server side render page will get all the information it needs pass it to a react component for your page and by the time that page gets loaded it already has all the information it needs just like with regular server side rendering but with next js you can also do kind of full static stuff as well this is the really cool thing about nexjs is you can choose do i want things to be server side rendered or static and you can combine those different pages can do different things which is really really cool and then on the gatsby side gatsby has really become known as a static site generator but that's not all it does gatsby is is really optimized for doing for generating static pages but at the end of the day you have this rehydration process where if i ship down a static page inside of that page i can run regular react and basically do anything in regular react that way so i want to talk about some of the plugins and the community support in terms of how we compare these react one is super super popular as a whole it's got tons of libraries to do all these different things you go on npm you start to react whatever it is you're looking for you'll probably find something i think with gatsby gatsby has a huge plug-in ecosystem that's made specifically for gatsby and a lot of that revolves around the static aspect of doing or i guess the static page generation inside of gatsby so you see a lot of those plugins are really just optimized for that scenario i don't know as much about next.js and the plugin ecosystem there but i have found a page that i'll let you uh that i'll show up here and then link to in the description for next.js plugins they've got a lot of official ones from versel which is the creator of next.js formerly zeit and a lot of ones that are created by the community as well so i think there's lots of support for both of those areas i think that the plug-in ecosystem for each one is kind of geared towards or optimized for what you typically associate with each one server side rendering next js static sites for gatsby but know that both of those can do more than what you might typically associate with it now i also want to get into the learning curve of these one of the things with uh create react app it's it's basically your core of how you learn react when you start like we said earlier when you start doing react you start with a tutorial that person doing the tutorial i've done it before is probably using create react app i think that's a great place to get started if you're learning but then pretty quickly you might look at one of these other options in gatsby and next and i'll tell you in a second when i would choose which one and just know a little teaser here i wouldn't really choose create react app anytime going forward for stuff that i build so with gatsby one of the interesting things is it's really optimized and revolves around graphql now graphql is this new like structured query language to be able to request specific pieces of information about objects that you want so from a client i can choose which pieces of information i want from a database or a data source of some sort versus the api basically just defining what is going to come back to me and i have to take what i get so graphql has become really really popular there's tons of tools and plugins and things around graphql but that is a learning process for working with gatsby gatsby throws you into not quite the deep end but throws you into the graphql ecosystem and if it's new to you like it was for me there's definitely a learning process that comes along with that there's also with gatsby the idea of like the build process so when you're generating these static pages that process of how gatsby does that in the gatsby node file is is was new for me and it was kind of a learning curve of just seeing how that stuff fit together so it's really important to me when i was working on gatsby or learning gatsby that i kind of took the time to try to dissect what's actually going on so i could put it together in my head another thing one of people's favorite things about gatsby is the gatsby image plug-in which can do like lazy loading and optimization around images it's really really nice but it's always been a little bit cumbersome for me i've never quite clicked with how it does what it does and i feel like i kind of stumbled through that so that was another thing that i had to learn then you go into like the next js aspect of this and uh potentially you're getting into like defining your own api routes which then becomes serverless functions and you can basically build this full stack application in next.js but the interesting thing is there's a learning process with building those serverless functions and if you've got some experience in node or doing serverless functions elsewhere that will definitely help there's a little bit of how to tie that stuff together and just do it inside of next that you'll have to get used to but i think if you have some experience in that area that will really help the other aspect in next is being able to choose and configure which pages you want to be server-side rendered versus actual static pages again this is one of the things that comes with a given framework you have to learn how that framework accomplishes what it's trying to accomplish and in this case with nexjs combining and figuring out how to use the hooks to do static pages and server side rendering is is definitely a learning curve as well now on the on the create react app side just kind of regular vanilla reacts if you do routing uh you typically jump for something like reach router or react router dom and you kind of have to go through this process of setting up routers one of the great things about gatsby and nexjs is they both come pre-configured to handle routing for you you create a component inside of a specific directory it takes care of the rest all of that routing is taken care of for you so you don't really have to worry about setting it all up yourself that piece has already been done all right the last thing i want to touch on before we get to a few examples of what to use when is just hosting now create react app uh you go through a build process with great react app and you basically get static assets that you can host on any cdn or any static host so things like netlify that's my favorite things like hosting on versel you'll hear a lot of that with uh next js because that's who created next yes it makes sense you can host on firebase you can host on microsoft azure you can host on uh aws i guess it's s3 is like their blob storage stuff anywhere you can host just kind of regular uh assets and a cdn you can host that thing anywhere so it's really uh probably the easiest to host and then you get into gatsby with gatsby at something similar you go through this build process where you end up building these static pages and those static pages those assets can be hosted kind of anywhere you want also the same list of technologies that i just mentioned you can host gatsby in basically the same places because the output of a gaps we built is very similar to what the output of a create react app build would be in terms of just having static assets being that output next.js though gets a little bit interesting if you take advantage of serverless functions inside of nextgs you have to have somewhere to be able to host that now vercell obviously is kind of set up to be the easiest way i would imagine to go ahead and host a next application with serverless functions but you can also do the same thing in netlify netlify has serverless functions which are amazing by the way and i've got an article here that i'll reference that you can go through and see how to take your next js application and deploy to netlify as well now one key thing on the uh pricing for versailles if you host in versil on their free tier they only allow you 12 serverless functions per deployment so if you deploy a site two versailles each one of your server side rendered pages basically gets translated to a serverless function so between that and any api endpoints you have for serverless functions those take up uh slots in your 12 available slots that you have otherwise you have to go to the pro edition which is 24 that you get in that subscription and i think that's 20 a month but i'll have a link to the pricing in here in this limits page that you can check out as well so maybe this is what you've been waiting for let's talk about examples of when to use which now the one of the common examples that you'll hear of is a blog and lots of people recently have been building their blogs with gatsby js and i think that is a a very good way to go for building a blog gatsby again it's not limited to doing static sites but that is what it has kind of made its name for made its brand for and the community and the ecosystem around it is great there's so many plugins and things that come with gatsby to be able to do that sort of stuff that honestly that's probably still where i would point you but next.js has gotten better and better at the static stuff and it can do a lot of maybe all the same stuff so i think honestly if you you could kind of choose either way you want to go the only thing i would say gatsby probably has a better ecosystem and community around it specifically in the realm of doing a static site that might be useful for your blog so in that case you could really choose either one of them now if you get into an example of an application maybe like an email client like if i was building gmail or something like that where the data in gmail changes frequently like i don't know how many emails i get a day but several you probably get several a day too you're not gonna wanna have a static site for that you're gonna wanna have more of a dynamic site in terms of like going to the back end and retrieving data where you're wanting to do server-side rendering anytime you get into this need for server-side rendering you probably want to go to next js because you don't really get that ability in gatsby gatsby you can do hydration where you can serve a page and then it basically becomes react and you can make an api request to get back in data you could do that but i think nextgs is really optimized for doing that server side rendering to still have great seo value and to do that dynamic uh retrieval of data to generate the page that then goes back to the user so that's where i would jump for next js and i don't have a whole lot of examples in here but i just kind of want to end with i don't really have any scenario going forward where i would choose create react app i think all of the things that i do for myself maybe i'll do some more tutorials and things with create react app but all the things that i build for myself will either go next js or gatsby here's one of the simple things both of them have built-in routing so if i need routing i don't need to set it up like i would with create react app it's built into both even if i didn't take advantage of server side rendering or static page generation on either one of those options i get the benefit of just having routing taken care of for me and then some of the plugins and things that come along with each one so i don't really have a use case for myself going forward of why i would use create react app i can kind of choose either gatsby or nexjs and get the same functionality but have some other things taken care of for me so for me going forward i will use gatsby and nextjs and i will use gatsby more typically for static stuff things that will have a decent amount of static pages especially if i want to integrate with a graphql layer to some data source to go and get information my personal site jamesquick.com is a gatsby site but i think the more and more i see next.js and its capabilities and its flexibility to basically do whatever you want that's something that i'm looking at doing for almost any scenario it can take the static stuff it can do dynamic it can do server side rendering it can do apis and serverless functions it's really really powerful and it's more and more interesting to me so those are the two options going forward for me probably looking to do more nexujs than gaspi going forward but i don't really have a use case for create react app specifically so that's kind of where i am in comparing these different frameworks i'm looking forward to creating more content around this i'm curious let me know in the comments which one of those three options do you use the most maybe some of the reasons why you use each one especially if they're different than the things that i laid out here as always thanks for checking out the video look forward to having you come back if you enjoyed it like subscribe turn on the notification bell to see more videos in the future thanks for watching and i'll catch you in the next one

Channel: James Q Quick

Views: 49,579

Rating: 4.9351072 out of 5

Keywords: create react app, next react, next js, server side rendering, mastering nextjs, next js vs gatsby, next js vs react, server side rendering react, next js vs create react app, next js api, server side rendering vs static site generator, server side rendering next js, web development tutorial, create react app 2020, next react tutorial, gatsby hydration, jamstack, javascript, web hosting, web development, frontend, backend

Id: kFXQRONQqGA

Length: 17min 42sec (1062 seconds)

Published: Tue Sep 08 2020