+
+ Pet Chooser
+
+
+ )
+}
+// assume MyCombobox is a client component that uses context
+```
+
+But they can't `use(Context)` themselves.
+
+This is a bummer because another benefit of context is avoiding prop drilling
+for things like the user object, theme, or localization.
+
+Luckily for us, Node.js has an answer. Again, this isn't a Node.js workshop,
+but this is a common problem that you'll experience when using RSCs and this
+is the solution recommended by the React team.
+
+The answer is [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html).
+Here's a simple example from the docs:
+
+```js
+import { AsyncLocalStorage } from 'node:async_hooks'
+
+const userStorage = new AsyncLocalStorage()
+
+// somewhere later in your code
+const user = await getUser()
+try {
+ userStorage.run(user, () => {
+ logUser() // Returns the user object
+ setTimeout(() => {
+ logUser() // Logs the user object
+ }, 200)
+ throw new Error()
+ })
+} catch (e) {
+ logUser() // Logs undefined
+}
+
+function logUser() {
+ const user = userStorage.getStore()
+ console.log({ user })
+}
+```
+
+It's a little magical, but the idea is that you can store a value in the
+`AsyncLocalStorage` and then access it from anywhere in your code, so long as
+the async operation was created within the `run` callback.
+
+๐จโ๐ผ Great, thanks Olivia! So what I want you to do is use this to make the
+`search` and `shipId` values available to all components in the tree without
+having to pass them down as props.
+
+๐จ First you'll want to create a module to create our async storage object. So
+let's start by creating
+
+
+
+
+Here's a bullet-point text version of this flowchart:
+ +- User goes to site + + - Browser requests document + - Server responds with document + - Browser renders loading spinner + - Browser requests client code + - Server responds with client code + - Browser updates UI components + - Browser requests data + - Server generates data response + - Browser sends JSON + - Browser updates UI with JSON data + +
+
+
+You'll notice these two flows are pretty similar. The biggest difference is in
+where we generate the UI.
+
+In the SPA case, UI = data + components on the client.
+
+In the RSC case, UI = data + components on the server.
+
+Of course, there are some parts of our UI that need to be interactive and
+that requires some of our code to be sent to the client. We'll cover this part
+in a future exercise. This is important because it's the reason React needs its
+own serialization format and can't just use HTML.
+
+## RSC Format
+
+Typically when you server render React, you render a string of HTML. However,
+React Server Components need to have a good mechanism for mixing components for
+client-side interactivity with components that are rendered on the server only.
+Additionally, React Server Actions also necessitate a way to send a reference
+to the client-side component that will be hydrated.
+
+To top it off, this all needs to be done in a way that allows for streaming the
+UI to the client in any order.
+
+So React Server Components use a custom serialization format that looks like
+this:
+
+```json nolang nonumber
+1:D{"name":"App","env":"Server"}
+0:{"returnValue":null,"root":"$L1"}
+2:I["/ship-search.js","ShipSearch"]
+5:I["/ship-details-pending.js","ShipDetailsPendingTransition"]
+6:I["/error-boundary.js","ErrorBoundary"]
+8:"$Sreact.suspense"
+a:I["/img.js","ShipImg"]
+3:D{"name":"SearchResults","env":"Server"}
+4:D{"name":"SearchResultsFallback","env":"Server"}
+4:[["$","li","0",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","1",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","2",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","3",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","4",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","5",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","6",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","7",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","8",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","9",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","10",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}],["$","li","11",{"children":["$","a",null,{"href":"#","children":[["$","img",null,{"src":"/img/fallback-ship.png","alt":"loading"}],"... loading"]}]}]]
+7:D{"name":"ShipError","env":"Server"}
+7:["$","div",null,{"className":"ship-info","children":[["$","div",null,{"className":"ship-info__img-wrapper","children":["$","img",null,{"src":"/img/broken-ship.webp","alt":"broken ship"}]}],["$","section",null,{"children":["$","h2",null,{"children":"There was an error"}]}],["$","section",null,{"children":["There was an error loading \"","0268fc4817ad1","\""]}]]}]
+9:D{"name":"ShipFallback","env":"Server"}
+9:["$","div",null,{"className":"ship-info","children":[["$","div",null,{"className":"ship-info__img-wrapper","children":["$","$La",null,{"src":"/img/ships/0268fc4817ad1.webp?size=200","alt":"0268fc4817ad1"}]}],["$","section",null,{"children":["$","h2",null,{"children":"Loading..."}]}],["$","div",null,{"children":["Top Speed: XX"," ",["$","small",null,{"children":"lyh"}]]}],["$","section",null,{"children":["$","ul",null,{"children":[["$","li","0",{"children":[["$","label",null,{"children":"loading"}],":"," ",["$","span",null,{"children":["XX ",["$","small",null,{"children":"(loading)"}]]}]]}],["$","li","1",{"children":[["$","label",null,{"children":"loading"}],":"," ",["$","span",null,{"children":["XX ",["$","small",null,{"children":"(loading)"}]]}]]}],["$","li","2",{"children":[["$","label",null,{"children":"loading"}],":"," ",["$","span",null,{"children":["XX ",["$","small",null,{"children":"(loading)"}]]}]]}]]}]}]]}]
+b:D{"name":"ShipDetails","env":"Server"}
+1:["$","div",null,{"className":"app","children":[["$","div",null,{"className":"search","children":["$","$L2",null,{"search":"m","results":"$L3","fallback":"$4"}]}],["$","$L5",null,{"children":["$","$L6",null,{"fallback":"$7","children":["$","$8",null,{"fallback":"$9","children":"$Lb"}]}]}]]}]
+c:I["/ship-search.js","SelectShipLink"]
+3:[["$","li","Bomber",{"children":["$","$Lc",null,{"shipId":"5c13d8b28a14a","highlight":false,"children":[["$","$La",null,{"src":"/img/ships/5c13d8b28a14a.webp?size=20","alt":"Bomber"}],"Bomber"]}]}],["$","li","Diplomatic Vessel",{"children":["$","$Lc",null,{"shipId":"6f375578ead88","highlight":false,"children":[["$","$La",null,{"src":"/img/ships/6f375578ead88.webp?size=20","alt":"Diplomatic Vessel"}],"Diplomatic Vessel"]}]}],["$","li","Mining Ship",{"children":["$","$Lc",null,{"shipId":"627c497212456","highlight":false,"children":[["$","$La",null,{"src":"/img/ships/627c497212456.webp?size=20","alt":"Mining Ship"}],"Mining Ship"]}]}],["$","li","Medical Ship",{"children":["$","$Lc",null,{"shipId":"0268fc4817ad1","highlight":true,"children":[["$","$La",null,{"src":"/img/ships/0268fc4817ad1.webp?size=20","alt":"Medical Ship"}],"Medical Ship"]}]}]]
+b:["$","div",null,{"className":"ship-info","children":[["$","div",null,{"className":"ship-info__img-wrapper","children":["$","$La",null,{"src":"/img/ships/0268fc4817ad1.webp?size=200","alt":"Medical Ship"}]}],["$","section",null,{"children":["$","h2",null,{"children":"Medical Ship"}]}],["$","div",null,{"children":["Top Speed: ",2," ",["$","small",null,{"children":"lyh"}]]}],["$","section",null,{"children":["$","p",null,{"children":"NOTE: This ship is not equipped with any weapons."}]}]]}]
+```
+
+This is not something you would want to write by hand. Instead, you'll use the
+`react-server-dom-esm/server`'s `renderToPipeableStream` function to generate
+this for you. Then on the client-side, `react-server-dom-esm/client`'s
+`createFromFetch` will take care of converting this format into React elements
+that can be rendered by React in the browser.
+
+