00:09
so it may not be in our best interest to have one of those imports for our link component in every single component where we need to link from one page to another. Instead what we can do is register
00:18
it globally similar to our unplug and view component behavior so that it is readily available throughout our entire application as we need it. As a reminder that unplug and view components is looking
00:28
specifically inside of our components directory for components to automatically register globally. It's not looking inside of the inertia.js package with how we have it set up so any usages of our
00:38
link component will not be picked up by that hence why we would need to register this manually ourselves. So to do so what we want to do is jump into our app.ts file inside of our inertia
00:47
directory and just like any view application or whatever front end it is that you're working with you'll want to first import the component that you want to register globally and this is from
00:56
inertia.js view 3 and then just register that globally the same way that you would inside of your client side app. So right down here we are instantiating and mounting our view application
01:06
so this is where we're going to want to do that. So we can do dot component provide in the name of how we want to register this globally so link right there and then provide in the actual component
01:16
that we want to use with that name which is our link component. Now we're not quite done here yet but we're going to go ahead and pause here so that we can see exactly why it is we're not quite done
01:23
and then we'll go ahead and jump into our register and we can remove that link import from our setup script essentially deregistering it inside of this specific page and we'll leave
01:33
the implementation inside of our template. We'll do the exact same inside of our login page so we can just remove that import altogether and hit save. Okay let's go ahead and jump back into our browser
01:42
now and let's give it a go. So we'll do a refresh here for sanity's sake and then we can click on our login link and a register link and everything there is working a-okay. Furthermore if we right
01:51
click on it inspect go into our console we'll circle back to these errors and warnings momentarily what we want to do is make sure that this is still being used as an inertial link
02:00
rather than a straight anchor so we'll hit login once more and you can see it does an xhr request
02:05
rather than a full non-asynchronous request and the same there whenever we click our link again. So
02:11
it is still behaving as an inertial link now back to those warnings so let's do a full refresh here show our warnings and errors again and this is why we're not quite done. You'll notice that we
02:21
have a warning for hydration node mismatch this is that hydration mismatch that we've been talking about thus far this is just an example of it in practice now. Now what this warning is doing is
02:30
it's telling us specific usages where the hydration mismatched so we can see specifically that on the
02:36
server it rendered out as an empty string but on the client it expected a button and then we get a
02:42
call stack of where that occurred so we have a link as button method post icon slash register which is our post to register button right here so whenever our AdonisJS server renders out this
02:52
template and sends it back this is just coming through as an empty string rather than the button that is being shown here on the client so we can click on that and the behavior still works but it
03:02
isn't there on the actual server side rendering and we can confirm that by jumping into our network tab and go ahead and hide the console away there scroll up to our document right here where we see
03:11
our register page and taking a look at the response and you'll see that we get register
03:16
and a click me button our post to register and our have an account links are not there at all so
03:22
back to our hydration mismatch if we scroll up we will see that we have another one for our actual anchor from our href pointing to our login page so we're going to get a warning per mismatch that
03:32
we have and then we'll get a single error stating that there were mismatches so if you have your warnings hidden you will still see an error in your console stating that there were mismatches
03:42
with the hydration and then if you add your warnings in you'll start to see what each individual mismatch was along with what it rendered on the server what it rendered on the client and the call
03:51
stack with which net rendering occurred thankfully this particular hydration mismatch has a super
03:56
simple fix we made a change inside of our app.ts file to register this link component globally for
04:02
our view application well all that we need to do is register that link component globally on our server rendered application as well so i'm going to go ahead and copy that link import jump over to
04:12
our ssr.ts and paste it in up there at the top oh actually we already have an import from inertia.js so i'm going to go ahead and just add it to that link right there and then if we jump down into
04:22
our setup method here is where we are creating our view application on the server render so after
04:27
our use adding in our plugin we can just like we did on the client add in our component call
04:33
with the name of link and tell it to use the component link for that we can give all that a save and with that applied let's jump back into our browser give everything a refresh and you
04:42
can now see that we don't have any hydration mismatch warnings or errors happening our server render now matches our client meaning everything's a-okay furthermore if we jump
04:51
into our network take a look at our register response there's our link once again and there's our button to post to slash register
