Server-Side Fetching

[00:00:00]
>> Who wants to do something silly and dumb with server side rendering? Okay, do not do this today, this is kind of a preview of what's coming, but it was so easy to do that I think it's pretty compelling. What if you wanna show everyone the pets right away, you wanna learn, you wanna load the first load with everything there.

[00:00:21]
That would be pretty cool, right? The user is immediately getting the first set of pets right away. The way that you would do that correctly today is basically, you would have your server. So here in server JS, basically, write some method that calls that API every five minutes and cache the result.

[00:00:52]
And then go into your React app and make it so like, hey, if there is a cached version available somewhere in the HTML or something like that, use that first, otherwise, make that request. You can also give React query like a cached initial data, that's what you would do there, right?

[00:01:14]
And that would work today really well, but let's do this with basically no code. So we're gonna mess with suspense. You're not supposed to use suspense this way yet, the React team was very adamant that I should probably not show you this. I do not care. They don't pay me.

[00:01:33]
So, we're gonna do cool stuff together. All right, if you're on Node 18, you don't have to do this part, if you are in anything underneath, if you're on Node 16, you must do this. If you're on Node 14, this will just not work. So if you're on Node 16 like me, put node here and then put --experimental fetch, like that, okay?

[00:02:00]
Then I need you to pop into app.jsx And here we have queries, stale time and cache time. We're gonna turn on React queries, suspense: true. This is an experimental feature built into React query that allows it to interact with suspense as well. If you remember we have suspense right here, right?

[00:02:25]
So basically, what React query is gonna do is like, hey, if you're loading something, throw it into suspense mode, right? Which they don't want you doing yet, but it is possible, because all it does is throw a promise and suspense just catches promises, which is a weird API, but it's how they chose to do it.

[00:02:44]
Okay, build your client again, build your server again. [BLANK AUDIO] npm run start. All right, so you can see this experimental warning, fetch is an experiment. It's actually built into 18, so you won't get this warning in 18 anymore. Now if I refresh the page. There we go, it is now everything.

[00:03:16]
So if you look at the source here, you'll see here that we're getting, Luna is coming up in here, Havanese, Seattle, Bunnahabhain. They're all coming up here in the results. It's actually going in the browser or in our server, and it's calling fetch to the API on the server layer and then serving them complete HTML.

[00:03:42]
With all the results, with the breed lists, all that kind of stuff just pre-hydrated. Imagine if you were serving a request to Mars right now, you would definitely wanna do something like this because round trips are so expensive for tomorrow's, right? So this could be something really useful if you need something that's, you wanna send an all in one payload just right away.

[00:04:05]
This would be a cool way to do it. Calling fetch from your server on every request, probably a bad idea, probably I don't wanna do that, right? That's why I was saying here in your node code, you would much rather make all those requests in some sort of local cached way of doing it and just hold that in there and then hydrate it on every request, right?

[00:04:27]
Then you're not making, if you're getting 5,000 requests a second, you're not making 5,000 fetch requests. All the same, it's pretty entertaining that I was able to do this with just a couple of lines of code, right? So, that style of doing data loading with suspense is coming, trademark coming, right?

[00:04:50]
It's been coming for five years at this point, that they are getting closer. You can see now that it actually does work, but don't hold your breath, but it is coming. Basically what they're saying is that they don't like their throwing promises API and they're promising to change it.

[00:05:09]
So they don't want people to relying on it quite yet, that's the idea.