Using Rscs and Suspense for Partial Pre-rendering
The tip demonstrates how to make use of Rscs and Suspense to partially pre-render a page for better performance. The aim is to reduce the unnecessary loading of data, such as a session, when not needed which can lead to statically rendering a page.
An asynchronous function named 'tip list actions' is propounded which will contain the required loading operations. This snippet will be placed in Suspense without utilizing a fallback as it's not required in this scenario.
The next step involves the setting up of another asynchronous function called 'tip lists' which loads the tips module and returns it. The tips module doesn't need secondary arguments as it’s just loaded as it is.
The tips can have tags added to them which can be revalidated whenever editing or alterations are required. This is done by using fetch calls for the tags and utilizing TRPC for the tips. After that, the caching system allows the revalidation of these tags and tips.
Upon creating a tip, it’s vital to revalidate tag and its tips at the same time. Remember that these validations must be conducted on the server side. The process is replicated during an update as well.
Once this approach is implemented, loading the tips page should execute with greater speed due to static rendering, and updates can be fulfilled as necessary on the server-side. The key benefit here is that the cache can pick up and load the data as required, and this won’t affect the loading of the tips module across multiple components.
Consequently, if you have to load a tip multiple times, it’s not a fresh load each time; instead, it's loading cached data. This provides better performance and improved user experience.
Transcript
[00:04] So on the tip list page, we lose the ability to get full advantage of the partial pre-rendering because we're doing this work here and we're getting the session. And in this case, we only really need the session for this, right, like this create tip box, and we don't need to do that work, load that data. And we could actually statically render this if it wasn't for that work being done. So this ends up looking like this, where we're going to say async function. And we'll call that tip list actions.
[00:48] And what this takes in is nothing. We don't need anything here. Do that. I'm just gonna migrate this bit, this whole kind of bit. I don't know what that is.
[01:04] I didn't want any of that. There we go. And we don't need that but we do want that so We can bring that down here. Now we have the ability. And what we'll do is we can use suspense and toss our actions in there.
[01:29] We don't really even need any of this stuff because if it doesn't exist then it's fine we don't need a fallback. Not worried about layout shift here because it's behind behind this but this is all going to be server side so nice and secure and all that fun stuff so that's good. Same is true here. Technically we can load this up top but we probably want to instead do something like this. So that's the page, and we can do function, we'll do async, function tip lists.
[02:16] Do that like that, and then we're going to I'm just going to grab that so return and So we'll return. And then we want the tips module. So we'll bring that here. Do that like that. And then we'll just say tips.
[02:54] There we go. Curious how this gets loaded. So I'm gonna go look. It's just normal. Like it doesn't have any secondary arguments.
[03:02] If you look over here, we have a few in that we can add tags and that sort of thing. And frankly, like to me, like this would probably something like this, where you're then tagging tips, same up here for that. And the nice thing about this is that you'll then get the ability to revalidate when you do any editing or whatever. That all happens. We're adding these tags.
[03:39] These are fetch calls, so it'll get passed in with our fetch calls. The way caching works is we get this ability to revalidate these. And in our case, we're using TRPC. So you come in here in your routers, tips. So you have a get, you have the chat, you have the create.
[04:00] And after you create a tip like that, you'd want to revalidate a tag and its tips. There we go. This has to be on server side. Found that out the hard way. You'd also want to do this when you update.
[04:22] So we'd go ahead and revalidate our tag here. Nice. Yeah, so now I'm pretty sure when I Load the tips page, let's bust this out over here Go to tips We should get like a much faster load performance on this page on the server when we push this. Reason being, this will now all render statically. So this entire list will render statically and then update as needed on the server side because we are invalidating our cache so we get that kind of incremental static generation with partial pre-rendering and all that kind of fun stuff and I think the important thing here is that the page itself is generally speaking not going to load data or do any work we're passing that down and then the benefit here is that the cache will pick that up and will load it so it's not you know like if we had to load the tips module again, it wouldn't be a hit because we could load that across many components.
[05:40] That's less of an issue here than it is over here, for instance, where we load the tip several times, but every time it's going to get the cache right like so you know it it isn't it isn't loading that fresh it's loading cache data for us and you get that that kind of cascading nicety I'm not 100% how that affects generate metadata but I I'd assume it works there too.