Tim Neutkens - Continuing to Innovate with Next.js 9.3

Full Stack Radio


The reason I wanted to have you on. The show is next chess. Nine point three came out recently which Just looking at the version number sounds like it might just be a small incremental change but in practice actually introduces some really kind of paradigm changing features. But the way people use next at least in the way that I understand it so Maybe I think the best place to start would be talking a little bit about the major sort of new editions that came in In nine point three and what they do and then we can just Kinda have some discussions around that. Because there's a lot of questions that I have about that stuff So how do you explain to people? What kind of the major Improvements are in next nine point. Three right so Basically this whole shift started with the release of next nine Ravi released basically Like Firdaus who don't know it next is a framework for react That makes it really easy. To build a web applications Psychos from websites so et CETERA. But from the very first release like the main thing that we focused on was making it really easy to use react but also to use server side rendering unabomb trend ring like every request comes in a a new render the react APP happened server. Sides said that allows you to like optimize for a search engine optimization To like got a foster pain to vie basically like sending the full html on the amount but Starting from next nine we Bisley started focusing on also providing you dislike not rendering only but rendering a dull time so static generation basically Like the first feature that we released to the chief dot is that patients that didn't have blocking data requirements. That you've got initial props. At the time Route to be exported statically medically at built time. The reason for that is if you didn't have a blocking data requirements. The facials already studied goes rerun ring the same thing every time on demand That would obviously like sources Be Slower Etcetera So basically that wasn't optimization so he called it the automatic static optimization And that means that if you don't have block and data requirements it's that yes. So maybe they like to get into that a little bit so people are clear on it at least the way I understand. It is like prior to that feature Basically you are paying like a penalty on any really simple pages Because everything was trying to be rendered the same way so everything was sort of working with this like lowest common denominator. Assuming like Oh we're going to need to be able to make. Api calls to fill in holes on the page before we render it and stuff like that so when we want to render are static marketing page or something. Now that has to go through. This node process on demand. That's going to boot up. React and figure out what the final rendering should be sending back so that where whereas reality. That wasn't necessary because it's never changes between deploys. So why not figure out how to just like cash that on a cdn basically somewhere and have that page delivered instantly? Essentially the people not what you can do as of next nine basically automatically it just detects whether or not you even need kind of run time server side code or not. Yes so basically the Like the example if you took a create very simple yet component that is like your page with like just exporting. Hello will like. Hey Sean will. That's it right Then that would have been rendered on the month for every request that comes in which makes like little sentence of course because It can be Expert Bill Time Using the same rendering as usual just generating steady. Html that can be served from like either a CD or from your Like edge network or something like that And that was like the first like initial step and in Next ONE TREE. Bisley like took that a step further by allowing you to do blocking data requirements so when I say booking day requirements I mean like fetching some posts from like your cms or fetching data from your database or something like that the lobbying you to make those static also so to do that. We introduced get stomach. Drops and get service at props ambitiously. The the way that works is it. Generates it statically adult Means Static Bill type and then get service site. Prompts means you've got the only manned when a request comes in it's rendered so that's mostly what we did before basically But we still like. We went a bit fitter and we made some adjustments in how semantics works says not exactly like get initial props which we had before a main difference is that for example. I should to do like actually call note. Functions like s or like extra set shows or something like that or even direct database We see people experimenting with that. Right now. Like doing a database query inside of gut service props inside of trump's Which is pretty cool. 'cause actually allows you to like get rid of overhead from fetching. Api calls for example like focusing on crops. I basically the way that it wreck says once you export function from page it will generate that page as steady interesting adult time and then If you have dynamic pot segments like Pages block slug for example right like dynamic date. I basically You can actually return. You can export another function that is called pods that Elisha to basically give back the pods left to be rendered adult time and yeah. That's the way directs like in a nutshell But there's a bunch of other optimizations that we did around. That's cool so I think maybe a good place to start would be kind of digging into some of these in. I can ask some questions about them. If that's cool and make sure that Everyone understands exactly kind of a cool benefits that you get from some of the stuff. So the way I understand it gets get static. Props anyways is trying to solve this problem that existed prior to next nine point three not really a problem per se but trying to help optimize for this situation where so next nine introduces disability for things to be automatic automatically statically generated if they don't have any data requirements so like a marketing page. No data requirements can be statically generated. When you try to deploy up thrown on the cdn somewhere goes works instantly but then like sometimes you have these like inbetween pages. I guess that or not like an internal application page to have real time data that needs to be we kind of refashioned every time you refresh the page or whatever but they do have things that change every sort of like Deploy it's possibly so like a good example of what people do a lot of the times with like headless. Cms's now and they want to build like a static output where all the articles are pre generated. But they're still coming from an API or a database at the end of the day it prior to next nine point three. You had to just use the get initial props to get that and that would be calculated every single time but get static. Props is giving you the opportunity to say. Well if you do have data requirements will let you get them once at Bildt's time but then from that point forward we're going to serve as a static pre generated page until you sort of intentionally want to refashion rebuild because like you know that the underlying. Data's changed show really. I guess it's optimizing for for for dynamic data that just changes very infrequently I

Coming up next