00:00 All right, let's take a look at the error that we're getting right here. So it's saying missing get server snapshot, which is required for server rendered content, will revert to client rendering. So the problem is that normally, if you're going to be server rendering a use sync external store, you need a third argument right here.

00:19 And, and that third argument is responsible for what the value should be. So we could say, hey, yeah, let's return false, I guess. And now, that works out except wait, what? It's started out, you're on a wide screen. But now it switches to narrow screen.

00:35 If I come over here, and now I'm on a wide screen, I refresh. And that works out. So the fact is that we guessed wrong. But now we're guessing right. But if we guess this way, like now we're on an error. Oh, actually, just kidding. Right. So this is not not desirable at all. We cannot guess this

00:53 is not something that you we can determine on the server side. So we can't have a third argument for use sync external store. So we're going to do something else. Instead, we're going to wrap our narrow screen notifier in a suspense component, a suspense boundary that comes from react.

01:10 And with a fallback of just an empty string, and you could do like some sort of glowy thing or whatever, it kind of depends on what you're looking for, for your loading experience. But by putting that in place, now, the app doesn't blow up. And it just takes a second,

01:27 we could also say loading, dot, dot, dot. And now we get that loading. And then when we finally get the JavaScript to hydrate and everything, then we can determine what the value actually is. Now, of course, this isn't going to necessarily be that slow, like it could be pretty fast.

01:43 We're arbitrarily slowing it down. But there's one more thing that I'm not a super fan about with this. And that is we still get this massive gross error that I don't like at all. And we're handling it like we're we're handling the problem. So react, would you please be quiet? And yes,

02:02 we can make react be quiet by adding an on recoverable error here. And so just with an empty string or a no op function right here, then that is enough to quiet the error. But sometimes there are like legit errors you don't want to miss. And so we're going to accept an error right

02:20 here, we'll add a console dot error, error, save that. And now we get that error, which is what what we would want if it was an unexpected error, but we are expecting this one. So we can say if the string version of the error stringified version of the error includes something like

02:39 missing a server side, get server snapshot, whoops, go back, there we go. Then we can just return exit early. Otherwise, you can go ahead and log it out. So if there are other kinds of errors, then we can be notified. But this kind, I don't want to see a thing about

02:57 it. And so we'll add this on recoverable error there. But the key takeaway of this one is the third argument to use sync external store is some mechanism for determining or for initializing what the value of the store is at server render time. Sometimes you'll know in our case, we didn't.

03:17 And when you don't, then you wrap the components that are using that sync external store with a suspense boundary like this. And that way you can provide a fallback. And if the error annoys you, then you can fix it like this. There you go. Good job.