Current section: Sync External State 36 exercises
Problem

Handling Server Rendering

Loading exercise

Transcript

00:00 Okay, so we're kind of toying with the idea of server rendering stuff and so Kelly put together an example of how we could server render or at least test things out with server rendering and It's totally borked our page, but here's what's going on. So now we create our element

00:17 We append it to the root, but we're gonna simulate server rendering by taking the root L setting its inner HTML To react on slash server what yeah that totally runs in the browser it works Render to string app. Okay, great. So we generate the string of HTML and then we're going to pretend that we're

00:38 Loading JavaScript for a second and then we can hydrate our root element right here, right? So Yeah, so we're kind of pretending that we can serve a render Alright great. And that is so that we can see how we use that third argument to use sync external store

00:56 Another thing that you're going to maybe be doing if you want to do the extra credit is handling errors on recoverable errors, so what happens is When there's a problem loading the Or if you're not providing a third argument to use sync external store

01:15 So like there's we we cannot actually determine what the users screen width is so we can't provide a third argument So when you don't do that react is like whoa. Whoa, we're on the server. You're supposed to provide that But what you can do is you can add a suspense boundary Yeah, we haven't really talked about suspense yet, but we're gonna kind of get a little peek today

01:37 We'll do a suspense boundary around the the particular UI that is throwing that error And it will render the fallback Instead and then when it shows up on the client, then it will render the actual thing But it's going to give us a big honking error, and I don't like it

01:56 So if you want to do the extra credit you can add this on recoverable error so yeah, if you want to dive into the world of suspense and feel free to check out the react docs, but we have a Emoji in here to kind of help guide you on your journey in using suspense if it's your first time and

02:16 Yeah, we'll see you when you're finished with this one Not a lot of code changes unless you want to get into unrecoverable error But even then not a lot that needs to change there. We'll see you soon