00:00 So you may remember that we don't actually have a router in this app. And so every time you click on one of these, it does a full page refresh if you want to do a full page search. Or when you do a search, it does a full page refresh there too. Not my favorite thing to do here. And so we're going to add a client-side router now

00:18 that we have the ability to have client components. And so we can do prevent defaults on link clicks and form submissions. We can even make this input better to actually update the URL as the user's typing, things like that. So we're going to be implementing a router. There are a couple of things that we're going to be given to you and things

00:37 like that in this exercise, because you don't need to worry about building utilities and stuff. My goal here is just to help you understand how to update the stuff that came from the server. So pretty much most things on the screen came from the server. And if we change what our search term is,

00:56 then this stuff that came from the server should actually be revalidated. Same thing with when we select a different item here. Not only would this get focused, and so it would get bolded, but also the data over here gets revalidated. And all of that came from the server. So we have to go say, hey, server, go get me some more

01:16 data or some more UI, and then bring that back. It's actually not too different from the way that things work traditionally with a SPA. With a SPA, you're actually requesting data. You bring that data back. You combine it with your React components on the client, and then you render your UI. With this, you are making another request to the server. It's the same. It's just you're not requesting data this time.

01:36 You're requesting UI. And so there's not a whole lot of changes architecturally from that angle. But the user experience is going to be a little different. And I want you to understand how all of that stuff comes together. And I said the user experience will be a little different. The user experience actually shouldn't change a whole lot.

01:55 It's just your capabilities as a component or as a production engineer will be vastly improved, because you have infinite components that you can use, because they're all running on the server. And you also have the composability of use client and server components and things,

02:14 and the co-location, and the streaming, and all of that cool stuff that we talked about already. So anyway, it is much improved. But we're going to be implementing a simple client router in this exercise. I think that you're going to enjoy it. So let's get into it.