From Gatsby to Next.js: The Power of Incremental Static Regeneration

so i'm flying to seattle tomorrow and i was just thinking about how i was slacking on my work journal this week my website is a gatsby site and every week that i have to make these updates i have to open my gatsby site in my editor start running it and add all my new entries kind of in my code and i really want an easier way to make these work journal entries just using a dynamic back end so i think tomorrow on my travel day i'm going to try to rebuild my personal site from a gatsby site to an xjs site then try to whip together a back end and firebase for my work journal i have no idea how it's gonna go uh it's like past midnight here and i haven't packed yet i've been procrastinating i was watching some playoffs nba here but i think it might be pretty straightforward so uh we're gonna see what happens i'm gonna bring you along the journey and hopefully by the time i land in seattle i'll have a dynamic back end for my personal work journal all right i gotta go pack i'll see you in the morning [Music] all packed up and ready to go let's get some sleep almost forgot my switch that would have been tragic time to go so yeah your attention please all travelers if any unknown person attempts to give you any item including luggage to transport on your flight to not accept it and notify airline personnel immediately do not leave luggage unattended all carry on and check luggage subject to search for [Music] me [Music] all right so i made it to seattle and um i actually got pretty far on the plane yesterday i was kind of surprised actually but overall uh the switch from gatsby to next here is going pretty well i've got the home page all working my header navigation here's my projects page podcast and so all this is uh working pretty well the last thing i'm doing is getting the blog post to render and so this is the kind of thing where you know gatsby makes it really easy right out of the box next uh surprisingly seems to be going pretty easy as well you just have a little bit more code that you write on the node side but once i get this done the port will basically be complete and then i can start working on the firebase side and actually getting some data to drive my work journal so i'm going to try to finish this up here i got my two uh working from home buddies over there hanging out by the window and i got this really cool thing in case you know you need to take a little break so uh i got everything i need here let's see how fast i can knock this out and i'll see you in a little bit [Music] [Laughter] [Music] [Music] [Music] so i'm back in new york from my seattle trip i didn't get quite as much done as i had hoped but that's fine i kind of took it easy didn't work as much and really i basically got my whole site done um just from the few hours on the plane and at my friend's place on saturday and so at this point i think most of my site here is working with the exception of the journal i'm kind of leaving that for the end but i have my homepage here most of this react code just kind of worked projects and podcasts and talks are kind of these static pages and uh you know these just kind of worked as well in the same way and then my blog was the big thing that uh took the most time to figure out just how to source the content and i ended up going with just putting this content in pages under blog so i have kind of a folder for each blog post and that's nice because it lets me kind of co-locate assets uh with a post and so once i got that working you know all the blog posts are rendering just fine so my site is basically done and i even have this little mobile navigation up here which is a react spring animation and that seems to be working just fine as well so at this point i'm really ready to start on the dynamic part which is the whole point of kind of doing this rebuild was to get firebase in you know i don't think i necessarily needed to go to next just to add firebase i know gaps b supports you know rich react client-side applications but i figured once i did want to go dynamic and have some server components to my site it's good to have next just in case i need those api routes there and i just also kind of want to get more reps in with next because i really like the tool overall you know at this point i felt like it was just more fun and fast to work in next than gatsby i didn't have to wait for you know gatsby's cache or graphql queries to run or kind of deal with its idiosyncratic image component next feels very low level compared to gatsby and i like that it just felt fun to work with you know i did hit some snags when it came to like setting up mdx with my blog post but next has a lot of really good examples in their repo and those examples saved me hours of time if i would have had to figure out all the code in those examples on my own it definitely would have been a harder problem but i was able to find something that had you know an active link class on the next link because that's not kind of bundled in i was able to find the mdx example and then also pulling the list of blog posts from a post folder kind of in a previous version i did where i put my blog posts in a separate folder and queried that using node to get the list of all posts using get static paths and get static props so i kind of got some experience with those next apis and overall you know it just feels a lot lower level than a tool like gatsby it almost reminds me of the distinction between ember and react where ember is higher level and has more things out of the box for you but if you run into something you don't know it feels a little bit like whoa this is like a big surface area that this tool has and i'm going to have to read a lot of documentation to understand how to change it and modify it for my use case whereas with next there's really just a few functions that are kind of the public api of next you copy an example and it's very easy to change because it's all right there it's just one function that might be you know reading from the file system or using some node library and you can just do that and change it as well because you know you already know how to program and so a lot of it's right there as opposed to again the kind of gatsby specific apis like on page create or these other hooks that you have to read and understand at that higher abstraction level so personally i really like working with next so far for that reason so my last step here i'm hoping to wrap this up today is to add firebase to my site move the content uh of my work journal which is currently in just static jsx files basically in a work single work journal component put that into firebase query it from my next app and then be able to update that going forward dynamically without having to restart my local development environment and write more jsx i just want to be able to go to a page enter in entries and have it regenerate so i'm going to do that now and hopefully it won't take too long and i'll come back and let you know how it [Music] went [Music] [Music] all right so uh this is pretty cool i'm getting a little low on steam here but i did manage to get two weeks worth of data into firebase and i'm querying it from my next app and rendering it here so let me catch you up i had some trouble getting my firebase app set up for whatever reason i would create a new firebase app and then you know i had to decide between firestore and realtime database so that was kind of confusing at first and it seems like cloud firestore is kind of the newer thing here and so that's kind of what they're nudging you to but when i tried this it wouldn't work i hit this error i basically spent half an hour trying to get a project and an app set up with either firestore or database i think it has something to do with the regions like cloud firestore is not available in all the regions but it doesn't tell you that so i'm just not going to mess with it right now i had to create like a project called test and i was able to make a real-time database but once i did um i basically got this screen and you know i'm new new to firebase i've used it like several years ago but it's changed a lot since then so in terms of onboarding they don't give you much in terms of like creating new data so when i set up hasura it's nice because you have this whole like phpmyadmin like interface where you can just start modeling your data i can create like a work journal entries table and start setting my columns this is all nosql so it's nothing like that i don't know if i'm thinking like a sql developer here when i'm kind of creating my data in this flat way with just the facts even though it's it's queried in my app as like a tree structure so you could imagine storing the data like um having week the week be the root and then having that have three categories work learnings and interesting things and then having that nested underneath be the three entries right but i'm kind of doing it flat just because that's how i think about this data and also i want to do some more things with this i want the date to not just be the week i want to be the actual day it was published i want to be able to eventually add new entries throughout the week and then have it automatically publish on the following monday based on the date but i want to be able to see these ahead of time so there's other things i want to do i want a little more flexibility so i figured it was good to just go ahead and try to store it flat in firebase like this and then do the grouping and mapping and reducing and stuff on the client that's just kind of how i'm used to working so that's what i did here but anyways once i got it set up you know there's a little bit of stuff you have to do to get firebase running you import it i mean this part is pretty easy i did this with auth recently and it was the same kind of thing it was pretty easy so you throw this in a use effect one problem is like uh this breaks fast refresh so if i'm changing something here let's say i wanted to just i don't know change something right here and save this like fast refresh is going to re-run the effect and the effect here only runs once i have an empty array but uh fast refresh is going to re run this effect and sync it and because we do initialize firebase here firebase is going to tell us we already have an app so um ideally our effect would be able to clean up after itself and so um that would help fast refresh work so if the effects stopped we could like throw away our firebase app and then let it re-connect using the initialize app method here and that would make our app safe for fast refresh which is like a development only feature but could happen in an app right if you don't think about some ways that the user could get to this effect twice but unfortunately last time i looked the firebase cleanup was async so you really need some way here to clean up your app and then reinitialize it but it's async and so it's not going to work the last time i tried it wasn't easy to get it working with fast refresh that's kind of a bummer basically since i've been using this and working on this i just kind of have to hard refresh every time i want to see the changes so that's something i would like to figure out but you can see here if i refresh we are making the request on the client so it starts out static and then we fetch and i'm just basically querying all those pieces using a date functions here to find the week so i kind of just did this piece by piece but i ended up was with this is pretty nice i basically just find um the start of the week which fortunately is a function straight from date functions so i get that nearest monday that i use um to throw all the entries into kind of an object that groups them by date and then i filter out and you know group them into the different categories and then down here i can just uh iterate over my weeks and then render a new entry for each week and then render my three sections here based on uh the work for that week the learnings and the interesting things for that week so this is pretty cool i basically got this working with one week's worth of data here and then i just went and kind of copy pasted the raw data for the second week and i put it like this and i just kind of use my effect to go ahead and create that data like this i just get the database create a new key here and push it and then comment that out and that way you know i was able to just add it to firebase i saw it show up here in the console then i refreshed the page and i saw you know this new week worth of data so this is this is pretty cool you know i could do one more right here so if we go down to the week right before the 27th let's say i get the 20th and i just grab one more entry so then i'm just going to delete all this stuff and we could just create one entry right here which would be the 20th this is a work entry here is the href right here and here is the description and so just based on that date alone you know if i refresh right now we only have two weeks worth of data we have august 3rd and then we have july 27th but if i just push in a new entry that happens to be dated before the 27th and i uncomment this well first we can come over here firebase go to the bottom i'm going to save this we're going to come over and refresh so this runs but when it does we're going to see that new data right there which is pretty cool and now if i come back to my app we see a new week right down here so i need to update the ui and make sure we don't show these if there aren't any interesting things or learnings um but this is pretty neat that this is all basically derived from a flat list of entries in firebase now so i'm going to stop for tonight get some dinner and call it a day i think the last things that i want to do are basically use there's a revalidation feature in next that will let me pre-generate this so because this data doesn't change that much i'd like to pre-generate it so it's still static because you can see right now you know we get a white page and then the client fetches it but we should just build this once when i deploy the site and then there's i think there's a revalidation feature where in the background when people get the cached cdn version that's static as of some previous point in time if there happens to be a new entry that i've added since then it will check in the background and update that value and they'll get the latest version so that's what i'm trying to get with this whole setup and so i'm really excited and i think i'm pretty close to that so i'm gonna go figure out what to eat i've been out of my house for the last five days so i'm probably gonna order something from seamless um but i will see you tomorrow and hopefully we'll pick this up knock it out and i'll get this video up soon so you can enjoy it so thanks for sticking along and talk to you then [Music] all right so it's the morning i'm back from the gym got my laptop here and i'm ready to knock this out cup of coffee i think we can get incremental static regeneration working so that i can pre-generate my page and revalidate it in the background that way i can add new work journal entries without having to redeploy my site so let's see how long this takes and i'll let you know how it goes [Music] [Music] [Music] all right so i just basically moved the firebase code i had from use effect and to get static props which is an async function and runs at build time and it seemed to work basically with zero changes and now i can just refresh my work journal here and there's an initial render if i view the source the data is here in the payload so we're not waiting on react to render and then fetch it's all here and so this last part was just adding this little revalidation here on get static props and i'm basically trying to deploy this right now to versel to see if this does the trick so the idea is it'll be a static render but then i'm going to add something to firebase and see if it updates [Music] okay so let's see if this works uh i just deployed this to purcell um it feels like super fast um i mean everything is static but still somehow it's it's impressive how next makes things feel faster even when you're comparing static sites i think they might do some things with like pre-fetching links anyways it feels really great i ran into a few snags with my blog some blog post of mine that had like older d3 things i need to figure out how to make those work without using globals because it was just breaking the build but the work journal here is loading and you know if we refresh this uh or pop it open and you know an incognito window we can see here it doesn't render without the data so it is all being fetched but the real test here is to see if when i add an entry over here in firebase do we see the new data here after it revalidates so let's check this out so we just see august 3rd i'm going to go ahead and click add and now if i refresh what i'm hoping will happen is we'll see week of august 3rd and then it will update in the background with this latest entry so that was pretty cool what happened was my first refresh i saw the old version and you know it was uh still super fast served from cdn but then in the background the server on versailles revalidated that get static props uh code that i wrote right here it re-ran this kind of in the background so it didn't block the user from seeing uh this version of the page that was very recent but in the background you know ran this again and compared it and saw that it was new and so as soon as i refreshed this again we saw this new week right here and that's just really really awesome because now i can just you know everyone's going to get this static version let's come here and delete this right here and if i just refresh this boom there it is it's already updated so uh this is really impressive i mean this basically worked exactly how i was hoping it would i mean it was really easier than i even thought i literally copy and pasted the code from um my use effect down here to get static props and just added this revalidate one deployed it to versel you know with the exception of those few blog posts that didn't work which again was just due to some weird global stuff we get the static fast page and now i can update my work journal you know very very simply just with firebase so the next step for me is to make a little form somewhere in this app and add firebase off so that i can create new entries kind of from a user interface within my personal website but you know it's still locked down and everything so i'm super excited about this again i think gatsby is a is a great piece of technology and if you're not feeling a need i don't think there's uh a reason to overdo a big site that you've written in gatsby into next and gatsby still has that strengths relative the next but part of me wanting to do this was just to get some more reps in with next.js because i do love the tech so much and i'm really just impressed by it more and more every time i use it i think the boundaries are really clean the apis are really easy to understand and yeah i'm really happy with how fast this project took and excited to keep working on it and now i even have api routes which i haven't even gotten into yet um to give me kind of even more power if i want to do more kind of server-side functionality on my personal site so hope you enjoyed that uh if you have any questions let me know and i'll see you in the next video

Channel: Sam Selikoff

Views: 4,923

Rating: 4.931818 out of 5

Keywords:

Id: slILSIY_mQc

Length: 27min 9sec (1629 seconds)

Published: Tue Sep 01 2020