What fetch data does? It calls fetch. So fetch now in React, Classic React, it has been a name for being just, you know, the native fetch we did Dublin. Meaning that you can store these in the cache. So whenever you have a fetch anywhere, but that fetch will have the same input of another fetch, those are not gonna be duplicated. So that data is not gonna be fetched twice, it's also, it's always gonna be fetched once, and then the rest is gonna just fall back to a cache.
It's what the names meant was like fetch now, because it's gonna be server side, it's gonna be saved in a way that is gonna always retrieve once rather than multiple times every time you pull it. That's why it's better to re, let's say, duplicate the fetch for the same route, for the same URL, API URL, in multiple pages wherever you use it, rather than having it at the top of the pattern, because it doesn't really matter, and it's better to like, you know, isolate your fetching data in general.
So, in this case, this is the leaf of my tree, because it's the last route that I'm gonna receive, and it's gonna be, you know, where I'm gonna fetch my data. Next, did something more. So, because Next is on top of React, what we did was to enhance fetch with two things, caching strategies and revalidating strategies. So, you can write, I will show you later, but you can write the fetch in a way that you decide how cache will work for that single fetch or how revalidation will work with that single fetch, which is not native to React, so it's in Next. What is this gonna do is just like gonna take the rest, serialize it back to the data, and then I can simply have this data pulled in.
Something that I need, and I spoke with Tim Nelkens about this just like a couple of days ago, so when I created this specific example, it wouldn't let me, it was a bit more complex to this, so it might have been something else, but it wouldn't let me have it static. It will always be dynamic for some reason, so it was opting in for dynamic, and we discovered that we needed this function to generate the static patterns. It can be in two ways. You can all generate the static parameters for that route, or basically list them, say, hey, the IDs of this post is gonna be the one, two, three, four, right? And for doing that, you can still fetch, right? Again, fetch the post, all the posts, and then list them here in this way. This needs to be the same name of the patterns, it needs to be the same name inside these brackets, or you can just opt for just having them dynamically created as static parameters, because Next.js 13 is still in beta.
Talking with Tim Nirken, we were thinking, should this be default, because theoretically, this should be the default, right? You should just always have static parameters because this is statically generated. So, yeah, the idea here is like, okay, if Next.js 13 is still in beta, they are deciding what to do, but consider that if you see that all of a sudden you are opting out of static, for some reason, try this piece of code to see if it will reopt in. Again, I'm gonna leave this here just so you know if you want to just create all your blog posts, you can, possible. But this is more than enough to opt in static. My code is ready. Gonna save it. I'm gonna switch to my terminal. My terminal just hot reloaded what I just changed and within my server components, now I have my posts.
However, did I say that before? You can see here, right? This is the render. And you can see when I change, it's just right now, it's changing, 2703, 2705. This is dynamic. What else I can check, oh, so big. Is whenever I code, see, there is a 200 here. That means it's not cached. That means that every single time it's gonna ask, ask, ask again. Why? Because I'm in dev mode. So every time you're like, oh, wait, why is not opted-in for static dev mode? So I'm gonna kill everything and let me clear it out and just build and then start. So build will create an actual production builder. So everything that's gonna be statically generated is gonna be static. Everything that's still dynamic, all ISR, everything, and then start is just gonna start. The application, consider that it doesn't have hot reloading, of course, so I will have to kill it again when I will have to go to dev mode, or when I change something, I always have to kill it again and restart it because it's gonna produce the new pages. Done, so I go back to my blog post and then look at this number, it's not changing, why? Because it's not gonna refetch it, it's not gonna rerender it. And if I inspect, what you can see, 304, cached, cached, cached because it's static.
So these were server components, by default, they're gonna always opt-in static. And they're gonna always fetch from the server side. So the server is gonna do the work, no waterfalls, nothing like that. And to test it, you test the production view. We are gonna go in client components because something that, for example, on the beta dock is not there yet, they're just like, hey, go to the SOR and check the SOR or React query, anything to just ask from the client component for your data. In that regard, I wanted... Sorry, no, Google, no, no, no. Hey, Google, stop. I should have switched off Google. Sorry, guys.
Comments