Jamstack Fridays with T&T | Questions we get from clients: Gatsby vs Next.js

hello tony what is up welcome back to gemstack fridays hey tim what's going on all good all good busy week but time to wrap it up exactly as you do with busy weeks so let's get rolling with our intro and we'll be back in a sec this is gem stack friday with tnt so tony after that busy week um can you tell us what happened in the news yep let's go i got some cool news to share with you from jamstack world starting with the nexjs newest release 10.1 three times faster refresh what does that mean nexgs updates the code only in the file that you edited they also improved the installation time now installation size is 58 smaller number of dependents is 56 smaller also automatic image optimization to the next jet is now powered by web assembly support for m1 macbooks next just also introduce commerce shutter shopify integration and you can now do custom 500 pages that's pretty nice next we got netlify build plugin of the week is lighthouse so you can easily add it to your site and run on every deploy i would really recommend that i'm running it on my website it's really cool it's part of your build logs and you can see your results right away right there once your build is running next we got swelt kit it's a public beta now so you can get your hands on it swelt is a swell kit is a framework to build apps with swelt so if you're familiar with sapper i guess will have to transition from sapr to swelt kit the way they claim it it's something similar to nexjs for swelt as i browse the websites and the internet weekly i stumble upon different new sites and the site of this week that i found was contentmodel.io you can take your existing content model that has been shared and easily import that into your site especially into your contentful site and you can see how visually your content type structure looks the relationship between different content types it's really nice before you import anything you can kind of visualize and see how it looks so let's browse one click on this blog one and as you can see i can even zoom in and see how nice it is i can see how everything is connected and then as soon as i'm importing it to contentful all my content types are created i think it's pretty nice this reminds me of microsoft access by the way last but not least you can participate in 100 day of gatsby and create a gatsby theme this will be really cool if you're interested in getting started with gatsby and you're kind of entering the jamstack world you should definitely participate if you find this news useful give us a like and don't forget to subscribe to stay up to date with the latest news from jamstack world that's it from me in this week um no and then oh tony what's happening to me you destroyed me so in in this week's gemstack fridays um we decided to talk about the questions that our clients ask us all the time and we wanted to sculpt that down a bit and so we're going to be talking about gatsby versus next and that's what you see on the slide here so the questions we get all the time are things like what is the difference between gatsby and next how does data fetching work in those systems and which one should i choose based on my knowledge of that or how do images work or how does internationalization work and then finally where do i host it are we going to go gatsby cloud or we do for sell or netlify please help us and it's kind of interesting for us being seasoned developers for us those questions are relatively clear what we should choose when but there are so many different people around and everybody has different expectations based also on the marketing by gatsby or next for example so let's talk about generally what the difference is between gatsby and next and i also know that i have a specific preference for stuff and tony as well so tony feel free to jump in if you feel like hey but this is better in next or this is better in gatsby so let's see you know yeah i will i just want to make sure that this is not a comparison a recommendation it's more of hey this is what we know and this is what we are sharing with you based on our experience and it's you're the judge at the end you choose what is best for your project exactly so this is not hey but tony said it had to go this way and everything went wrong well it's not one of those it's just let's compare based on our knowledge okay so is it fight club or what let's see so let's start with gatsby right what is the difference so what i feel like that gatsby is really for is to build gemstack sites right so it generates two a static website and it does that really well um so what gatsby came up with at least in my experience is that they started with a lot of like smart defaults so things that are relatively easy to get started with and get you to quality like super fast so the way you fetch data for example or the way you get your stuff from let's say your cms or whatever is always through plugins like everything in gatsby is plugin focused so if you say let's say okay i have content full and i'm well let's say i have content tool and i want to make a blog you just find the source plugin for content full you put it in your configuration and you're off to the races so that's really interesting by gatsby that it's it's relatively easy to also get like a pwa and plug a source plugin for this plug another plugin for something else and you have something and so it basically uses a local graphql schema which means on build it will actually query through the source plugin it will query that cms that you have grab all the data and that plugin will make a local graphql data schema for you in the gatsby instance and then the only thing you have to do while you're coding is actually query your local graphql database basically so let's go to next and this is quite different because next basically doesn't give you any sort of restrictions or however you want to use something it kind of you can go anywhere you want and so it really is more of a tool belt or a tool set to build whatever you want it can be static it can be dynamic if you want to fetch your data a certain way do whatever you want it's more of like almost a library of really cool tools to put together so it feels like you need to be slightly more senior to work with next but you can also go any direction you want and so this is what i wrote but it might not be true because it seems like it's slightly less friendly than gatsby for beginners it has slightly less smart defaults because these smart defaults also have opinion you have to do something a certain way to get the result but if you use next you might know exactly what you want and you want to code it a certain way and then you don't like those smart defaults right so next can also be a jam sex site but it can also just run dynamically as a node server somewhere so that was a whole mouthful there so maybe let's switch to tony and talk a bit about this data fetching yeah the way the way the first thing i want to kind of piggyback of what you just said is the plugins right like when i started back in the day i know it's off topic a little bit but it was angular it was a full framework you have everything built in and then react started coming up and the react was okay you need to install this dependency that dependency this library that so gatsby reminds me of that and i was scared to go into react because okay what if this library or this plugin is not up to date it's not maintained it's out of date it's built by community and then i'm kind of now dependent on that open source project are they supporting you or not with next what i and kind of come into a gasbian next now what i really like about next you have built-in apis uh everything is built into a framework you can just use for data fetching for example you have static props you have static path you have server side props and you just build it in there and that's it you have i guess flexibility to go any direction you want and with gatsby you go into the gatsby plug-in library you find what suits you and you install it it doesn't work you go for the next plugin you know yeah like you hope for the best but maybe we can just compare a little because sorry go for it like because the locals came so this is quite different right where in gatsby you need to use this graphql thing which is actually kind of fun but if you're not used to it that's again like why are you forced to do it right yeah then what else we got we got also the data fetching yeah the source plug-in abstract data fetching a way so one thing uh that i wanted to kind of by doing my kind of research and working with these frameworks what i seen is that gatsby is towards like blogs and static pages when we're talking like in jam stack kind of terms right static site and that's it like can you do some rendering client client side rendering yes you can you can do it with gatsby as well but will you write more code probably uh well you have to like kind of range in not re-engineer but like make make more like you have to write more lines of code with next.js i think it's much more straightforward very easy you just choose however you want to fetch data and that's it yeah that's the one thing i noticed using gatsby which like this ease of use thing it actually up to a certain point it's amazing you just plug in something and you have your website is just there because the data is fetched but what if you want to go like one percent off it doesn't work anymore and i've actually had to write my own plugin put that on npm and then get it to work and of course there's flexibility around it but that was kind of annoying to me yeah that reminds me of you're working with a platform there's not enough good documentation you pull up especially like your files you decompile those dlls and you're trying to figure out how everything is working or you build something of your own that you don't like that's the way it's built for uh in within that framework i love that you went to dlls by the way it gives away where you come from but anyways let's go to next because you already talked about the static props right so just how does that work so static props is pretty much uh it's build time everything at build time you're able to connect to api endpoint everything just pull the way you need to and then at build time you're building your pages what if you want to keep your website kind of dynamic a bit and have client-side rendering it's still a jam stack site it's all kind of static but that one component on your page is needs to be alive like commerce for example right scenarios yeah you need to make a call to end point to grab uh pricing that's where you will use probably uh the uh the dynamic functionality of it so for example server side props uh you fetch data on each request every time page reloads you make a call and then it's it's available for you right yeah what i kind of like in the get server side props one is basically it's like when you do ssr this is the first thing that fires it gets the data almost like sync and then adds it as props to all your components to render so it's it's really quite easy like all your complexity has to be in that function and the rest is just props and run right this is pretty cool one thing to mention is if you're gonna be fetching like dynamic images for example you might run into a problem of our favorite google live house score with um like a layout shift so if you have just yeah it's just loading and then boom picture just shows up later then that's not good so you need to well you're going to have to do aspect ratio stuff in css and you can probably solve it right but it's it's good that you say this because let's talk about images now there's a really nice bridge you made there it's almost like you know this deck [Laughter] okay so talk about images for us man so images well what i heard every time i asked developers also because i need to do my research what is your choice like how do you compare image or not just image how do you compare gasbian next first thing that always pops up gatsby has a nice plugin you even said it to me a few times and then other developers told me it's just it's there really easy it's all optimized it does everything for you so it is another plugin that you have to install and yeah and what i wonder about like i i think this plugin works i've used it you put it in there's not much to worry about you can lazy load stuff all that stuff however what if i wanted to plug in let's say cloudinary into that plugin would it then just work or do i need to build something around this plugin or do i need to find another plugin what if there is no plugin then suddenly you are doing custom code but you have to have these plugins and that kind of worries me sometimes even though this works fine how do you feel about that yeah for me everything that i have to customize for a framework that's out of kind of out of the proportions that i have to do it myself what if i'm not following any best practice what if tomorrow is a new release and then now i have to maintain that so in my the plug-in way in my opinion is a little bit risky but hey the thing is i i probably disagree on some point because if you have a plug-in the responsibility is with them so you can kind of finger-point then again it's all open source so maybe there's no support system there right but so let's have a look at what next does because they i think they have now a component but like framework native right yeah it's a it's a they refer to it like api like okay next image api and they introduced it i think in version nine i can't remember which version but the great thing about it was we have 50 of our website load is images and that's why we kind of performances affected right what do we usually do for images we just drop the image tag in there we add a source alternative alt text and then width and height that's it that's the best way we can do it but how can we take a next step and make sure that we have the right we have the appropriate images appropriate sizes for every single uh viewport right with with next image api you are able to do that and when we talk about cool yeah and automatic image optimization right so if you have a large image and you need to for that specific component you need an image that's 150 by 150 you specify that in the tag that's it that's it will be okay so are you next image will actually generate that stuff locally and put it in your package that gets deployed yes oh that's very interesting i tend to because i'm kind of an image nerd if i can say so myself i've been working with images and lazy loading and optimization for years now and i'm sometimes a bit worried that that these kind of frameworks come with something like this um because i always want to do it myself but i might be one of the only ones like i might be in that one or two percent that wants to go completely crazy on images and really do that specific thing it actually is pretty decent that this next image thing just comes out of the box with really good setup that people don't really have to worry about it anymore it's actually really cool yeah and as as i mentioned the news uh with the new release 10.1 now you can get support to run them on they they added support for m1 macbooks so now okay that's interesting how so the support that they need there is probably because that little software that runs to compile the images is now optimized for apple silicon right that's it okay so it's like a node process somewhere that that needs some sort of binary that needs to be good for apple silicon i'm just learning this as you say it so thanks so this is a big one let's talk about internationalization for a bit and i think a lot of people don't really need that but then when you work in software like tony and me we are kind of more in the enterprise level of things and i've had websites that have 60 markets and that doesn't mean 60 languages but it's different content for maybe certain markets have different languages or like it's it's really quite crazy and we need to deal with that right so tony what do you think about gatsby versus next in this scenario let's start with gatsby uh i think the way uh actually we just had a project and this is exactly where this came up from which would i use because my specific requirement is internationalization the routing how do i do the navigation how do i do this and that like will it work will the browser auto detect it oh yeah both both frameworks support it in a similar way uh that's you add a plugin of some sort you install a dependency right but then next js what i really like you uh you have a a way to add a module uh that's what they call you have a module international and then you'd specify different routes in there and you can say but isn't that the same with gatsby that's on the screen right now it's like the gatsby plug-in how does that differ from next isn't that similar because i think the main difference is well let's just continue into slide here because if we now look at gatsby it's another plugin again right that makes sure you can have dynamic routes based on language but they don't do anything else so you need like a package like react internationalization but if you now look at next here on the slide and there's likely built in right yeah and the reason i took like a pause there is i just want to kind of highlight that documentation on gatsby definitely needs to some improvement uh okay just my my two cents it's just when you go to next it's just so easy to read so easy to navigate with uh with gatsby you have to go around find out what exactly you need to do it's like you're doing your own research it's all there for you exactly because we just did that of course because we had to prepare this a little and i looked at that documentation then it says yeah there's a plugin that's it and then use the other plugins like react internationalization or internationalization next or whatever actually gatsby says the same thing on their docs but then i have to click on the plugin documentation and then i go to a github page without much documentation and i then actually don't know what to do and i felt next was a little bit more clear in that sense you're totally right yeah so in next right so we have a module internationalization that you can specify locales default accounts domain what i really like is domains you can specify domain so if you think about it going like forward to our later topic on hosting you can specify different sub domains you can have next kind of manage your routing that is amazing and then and so sorry to interrupt but so that works well with for cell right so if you have this document like this this configuration of domains does for cell then understand that i had an experience working with netlify versailles a lot and one of the things that i i noticed if you're using next host hosting on versailles was just uh just super smooth now netlify obviously supporting them they just exactly i think few weeks ago that now it's they can run natively next next year without any issues but like images for example i don't know what they do there on the platform but images just work on versailles or next but on netlify it would break so i had to kind of redo stuff now it's working okay cool it's like yeah that's uh for routing i would probably say that versailles will handle it better but we'll have to try it give it a try and so if you had to choose between let's say gatsby cloud or for cell or netlify let's say we have a gatsby website would gatsby cloud actually be the best one or would i also go with gatsby and put it on netlify which i have done previously because guess we cloud didn't exist what would you choose i'll tell you my experience and there we go i'll tell you my so uh what i thought about when i started with gatsby cloud with the announcement i was okay gatsby gatsby cloud that's it it's going to be smooth right let's go ahead and deploy i deployed it deployment failed why because i installed another plugin for gatsby cloud and that's kind of i don't know that's kind of annoying right you have to install something to run on their own cloud so then i deployed it on netify the same stuff gatsby without any extra plugin i deployed notify no problem done okay interesting yes so their approach to this is maybe they keep the core lean and they just put plugins everywhere to enrich it right is that the approach you think how do you maintain all that then what if you have stuff that's outdated what if you grab the plugin that's maintained by open source group of folks and they just gave up on this framework now they're working on something else yeah that's problematic you got to do it yourself well it's problematic if you're in the world where we are right because we don't really just do a small blog no we actually build bigger websites enterprise-like great stuff yeah if then suddenly a plug-in doesn't work and your build fails we have problems right exactly delay in delivery yeah and so if you were going to next js for sale would probably be the best choice i'm assuming as they are so tightly coupled together yeah i think they're they're building their framework around their own hosting provider so but i would i would i would not uh say that netlify cannot have net device is there it's a very very strong platform and oh clearly i use it all the time i actually use both and they're both working really well for different things and as you can see on my hat i'm more on the fuji s land i use a lot of nuxt and next worked well on both of those platforms so it's to me they're almost equals um but that's just my two cents right yeah netlify for me if i had to choose i'll probably stick with netlify it's just like whatever you start with the first journey uh is always the best journey and that's what happened uh in the past with gatsby for example if since this is our topic today when i started working with gaza back in the day it didn't go very smoothly so i just kind of abandoned it and then i moved on to other frameworks and same thing here netlify it was just this best smooth right you just drag and drop a folder into your browser and you have a website ready like in isn't that crazy i think um we went over this quite fast but i hope we kind of delivered on those questions and then potentially the clients or customers that ask us stuff about this we can point them to this lovely video so tony awesome thanks for preparing this and for going over everything do we have some last thoughts that we want to share before we end i would just say whenever you ask a question uh from an expert or someone think about this that the response that you're gonna get is based on their experience and there is no such thing as you use this for everything there is if you want to use one framework for building a blog use that because it's kind of built for that and it was with that mind built out use another platform for something else every project has their own platform framework cms whatever yeah and you're that's a really really good point because the stuff we just talked about is our experience right there must be somebody here who works at next or with gatsby that's like dudes that's just not right look look at this and honestly i kind of hope that they do because then we can be better for the community and have the good information out there so um thanks for joining me this friday tony and yeah i'll see you next friday cheers see ya all right bye

Channel: Uniform

Views: 637

Keywords: gatsby, next, react, jamstack, netlify, gatsby cloud, jamstack fridays, vercel

Id: EOHudN8Apm4

Length: 26min 32sec (1592 seconds)

Published: Fri Apr 02 2021