Throughout this course, we've discussed a number of different rendering modes in depth for Nuxt. Others we've only briefly mentioned. Now though, I want to tell you about a really cool feature called hybrid rendering. And this is the ability to set these different rendering modes per route.
That means you could have parts of your site, such as maybe an admin area, be rendered as an SPA. But then in public-facing pages with site content that should be indexed by search engines, you could have a universal app. And there are still more different ways we can mix and match this as well. Let's take a look at some of those in the docs here.
So the way we enable this hybrid rendering is by specifying a route rules option in Nuxt config. The key for each of the rules is how you target which route you want to set these rendering modes for. Notice they can be whole directories or single pages. One setting you can use is SWR set to true.
This means that a static page is generated the very first time the route is visited. And then for an unspecified amount of time, the cache version is served. And eventually, the cache version is invalidated. The cache version is still served to the individual requesting the page.
But then in the background, the page is regenerated. And the next person to visit the page gets the newly generated file. This is a pretty cool option to keep things both fast and fresh. With the static option, you can generate a page on demand once, and then it will never invalidate, always serving the page from the cache.
e. it'll be an SPA. Plus, you'll also notice some other cool features within these route rules, things like the ability to set different headers, configure cores, and add redirects with specific status codes. Wow, this sounds really powerful.
And to be a hundred percent honest, I've only started testing out this feature just a few minutes before recording this video. And let me tell you, it's really knocked my socks off. Let's give things a try to see exactly how this works for our application. All right, first I will need to upgrade Nuxt to RC version twelve because we started this project when RC version eleven was released.
But now we have to upgrade to version twelve because version eleven didn't support this hybrid rendering. In order to do the upgrade, we can type npx nuxty upgrade. you can see that Nuxt is automatically able to pick up on what package manager we're using, what the current version of Nuxt we have is, and then use that package manager to update to the latest version. json, and installs the appropriate version.
And yeah, and then we're all good to go. If you want to see any changes to the latest version, you can open up the change log here, printed to the console. json file, you can see that we are now working with version twelve. Awesome.
All right, so now let's create a few more pages to demonstrate these different route rules. view. Let's give it a heading of SPA. And then I'll give it a subheading with the current date.
And let's do the same thing for a page called SWR. We'll rename this one to SWR. Another for SSR. We'll rename this SSR.
And finally, another one called static. config to set up the route rules for each of these. All right, so I want my SPA route to act like an SPA. So we'll set SSR to false.
Then I want my static route to be static one hundred percent of the time after it's been generated on the very first visit. So we'll set the static option for this to true. Next for my SWR route. which, by the way, SWR stands for stale while revalidate, I want this route to serve the cached file until it revalidates.
So we can set SWR to true. Lastly, for our SSR route example, we don't have to set any route rule at all because the default is to be a universally rendered app. that is run on the server side every single request. All right.
Off camera, I will commit everything to GitHub and redeploy the app. Now I've got the app redeployed to production, and I'm visiting the slash SPA route. On the page, you can see that our timestamp is printed to the screen. But if I open up the source for this page, you'll notice that the timestamp does not exist there.
That's because we're in SPA mode, which means none of the content is rendered server side, but it's only generated in the client. Let's try visiting SSR. When I check line wrap here, you can see that we have some content actually generated on the page. And our timestamp printed out now is October, twenty, twenty, twenty-two.
And more importantly, the hour is twenty-one, minute is twenty, and second is fifty-one. So let me refresh the page and we should see this minute and second update. And indeed we do. Now it's twenty-one, thirty-two.
Let's try it once more. Now it's twenty one forty three. Great. So what this means is that the server side code is rerun on every request.
Now let's try the static route. All right. Now our minute and second is twenty two thirteen. This time when I refresh the page, I would expect that this stays the same.
And indeed, we still get twenty-two thirteen after a page refresh. Let's try it one more time, just for good measure. Yep, still twenty-two thirteen. That page is serving a cache page every single time.
Lastly, let's try our SWR route. Now we have the minute, twenty-three, and the second, seventeen. Let's refresh the page, and we should get the exact same thing. Indeed we do.
After just a little bit though, we should be able to see this update. So I'm going to continue refreshing this page a little bit off camera, and then I'll come back when things have changed. So turns out it's about a minute that that cache lasts, because now we have the minute, twenty-four, and the second, twenty. Finally, just to prove to you that static lasts indefinitely, When we visit it again, it still has the same minute and seconds as before.
config in order to specify different rendering modes per route. Just be aware that at the time of this recording, this is very new in Nuxt three. And so some of these might be subject to a little change.