00:00 When you've got something that's global, like the request and the params as well as the query params, that sort of thing just kind of feels like you'd want to put it in context. Unfortunately, one of the limitations of running React inside of this React server environment

00:18 for React server components to work is that we can't use context. It's just a feature that's not available to server components. And so as a result, if you were to try, you'd get an error running RSEs on the server side. But it is kind of annoying to have to create these props and pass them down to app

00:36 and then app has to pass them down to their components. And in this application, it's not a big deal, but in a really big application, it could be. But there's actually another solution to this that makes it really not all that bad. So we can use async local storage. Now, you hear local storage and you're like, wait, browser local storage?

00:55 Browser does have local storage. This is a different thing. This is like a local context to a series of asynchronous operations. So everything that is asynchronous that is kicked off inside of this little block of code

01:09 can all be in the same sort of local storage or the storage that's local to that context. It's a little bit of a mind bend, but it is a feature of Node.js and other platforms as well, JavaScript runtimes as well. And I think it is pretty sweet. So this is our replacement for server context.

01:26 We're going to use that in this example. Now, we've got other uses of context. I just want to ease your mind a little bit that we can use context in our applications, just not in server components.

01:41 So when we get into supporting client components, your combo boxes and things like that that would implicitly share context amongst all these different components, that is still 100% a thing that you can do. They just have to be client components.

01:56 But for your server components, you're going to be using this async local storage utility from Node. So here we create an async local storage instance. We can call it whatever we want to.

02:08 And then somewhere in your code you want to call or you want to have some value that's available to all of the asynchronous pieces of that context. So here we have a user.

02:25 We're going to run our user storage with that user. And then everything that runs inside of this callback is going to have access to that user via the user storage. So here we have log user. Log user is going to retrieve the user from the user storage. And so we can log out the user.

02:43 And then we can even set up some asynchronous operation like a timeout or an async await with the file system read or something like that, anything asynchronous. And this log user will get called within that context,

02:57 and the user storage will still have access to that user even 200 milliseconds later. However, this catch is running outside of this user storage run call, and so this will end up logging undefined. And so that's the idea of async local storage. It's very interesting, super duper cool,

03:16 and it is going to allow us to kind of simulate a context environment in our framework. So you're going to start out by making a special file for our async local storage so that it can be imported in all of our UI components and as well as our server to set this all up.

03:35 So our server is going to do the storage.run, and all of our components are going to be doing storage.getStore to get those values for our ship ID and search. So these are the values you're going to be calling run with, and those are the values you're going to be able to retrieve out of the async local storage.

03:53 So let's get to it.