00:02
Now, linking between pages is a very common feature
00:07
for every single web application to have.
00:09
So it may not be in our best interest
00:11
to have one of those imports for our link component
00:14
in every single component
00:15
where we need to link from one page to another.
00:17
Instead, what we can do is register it globally,
00:19
similar to our unplug and view component behavior,
00:22
so that it is readily available
00:23
throughout our entire application as we need it.
00:26
As a reminder, that unplug and view components
00:28
is looking specifically inside of our components directory
00:30
for components to automatically register globally.
00:33
It's not looking inside of the InertiaJS package
00:36
with how we have it set up.
00:37
So any usages of our link component
00:39
will not be picked up by that,
00:40
hence why we would need to register this manually ourselves.
00:43
So to do so, what we want to do
00:45
is jump into our app.ts file
00:47
inside of our Inertia directory.
00:48
And just like any view application
00:50
or whatever front end it is that you're working with,
00:52
you'll want to first import the component
00:54
that you wanna register globally.
00:55
And this is from @inertiajsview3.
00:58
And then just register that globally
00:59
the same way that you would inside of your client side app.
01:02
So right down here,
01:03
we are instantiating and mounting our view application.
01:06
So this is where we're going to want to do that.
01:08
So we can do .component,
01:10
provide in the name of how we want to register this globally.
01:13
So link right there,
01:14
and then provide in the actual component
01:16
that we wanna use with that name,
01:17
which is our link component.
01:19
Now we're not quite done here yet,
01:20
but we're gonna go ahead and pause here
01:21
so that we can see exactly why it is we're not quite done.
01:24
And then we'll go ahead and jump into our register,
01:26
and we can remove that link import from our setup script,
01:30
essentially deregistering it inside of this specific page.
01:33
And we'll leave the implementation inside of our template.
01:36
We'll do the exact same inside of our login page,
01:37
so we can just remove that import altogether and hit save.
01:41
Okay, let's go ahead and jump back into our browser now,
01:43
and let's give it a go.
01:44
So we'll do a refresh here for sanity sake,
01:45
and then we can click on our login link and our register link
01:48
and everything there is working A-okay.
01:50
Furthermore, if we right click on it,
01:52
inspect, go into our console,
01:54
we'll circle back to these errors and warnings momentarily.
01:56
What we wanna do is make sure that this is still being used
01:59
as an inertial link rather than a straight anchor.
02:02
So we'll hit login once more,
02:04
and you can see it doesn't XHR request
02:05
rather than a full non-asynchronous request.
02:09
And the same there whenever we click our link again.
02:11
So it is still behaving as an inertial link.
02:13
Now back to those warnings.
02:15
So let's do a full refresh here,
02:16
show our warnings and errors again.
02:18
And this is why we're not quite done.
02:21
You'll notice that we have a warning
02:22
for hydration node mismatch.
02:24
This is that hydration mismatch
02:25
that we've been talking about thus far.
02:27
This is just an example of it in practice now.
02:29
Now what this warning is doing
02:31
is it's telling us specific usages
02:32
where the hydration mismatched.
02:34
So we can see specifically that on the server,
02:37
it rendered out as an empty string,
02:39
but on the client, it expected a button.
02:41
And then we get a call stack of where that occurred.
02:43
So we have a link as button method post hyphen slash
02:46
register, which is our post to register button right here.
02:50
So whenever our AdonisJS server renders out this template
02:52
and sends it back,
02:54
this is just coming through as an empty string
02:56
rather than the button that is being shown here
02:58
on the client.
02:59
So we can click on that and the behavior still works,
03:02
but it isn't there on the actual server side rendering.
03:05
And we can confirm that by jumping into our network tab.
03:07
We go ahead and hide the console away there,
03:09
scroll up to our document right here
03:11
where we see our register page
03:13
and taking a look at the response.
03:15
And you'll see that we get register and a click me button.
03:17
Our post to register and our habit account links
03:20
are not there at all.
03:22
So back to our hydration mismatch.
03:24
If we scroll up,
03:25
we will see that we have another one for our actual anchor
03:28
from our href pointing to our login page.
03:31
So we're gonna get a warning per mismatch that we have,
03:33
and then we'll get a single error
03:35
stating that there were mismatches.
03:37
So if you have your warnings hidden,
03:39
you will still see an error in your console
03:41
stating that there were mismatches with the hydration.
03:44
And then if you add your warnings in,
03:45
you'll start to see what each individual mismatch was
03:48
along with what it rendered on the server,
03:50
what it rendered on the client
03:51
and the call stack with which net rendering occurred.
03:53
Thankfully, this particular hydration mismatch
03:56
has a super simple fix.
03:57
We made a change inside of our app.ts file
04:00
to register this link component globally
04:02
for our view application.
04:04
Well, all that we need to do
04:05
is register that link component globally
04:07
on our server rendered application as well.
04:10
So I'm gonna go ahead and copy that link import,
04:12
jump over to our ssr.ts and paste it in up there at the top.
04:16
Oh, actually we already have an import from InertiaJS,
04:18
so I'm gonna go ahead and just add it to that link
04:20
right there.
04:21
And then if we jump down into our setup method,
04:23
here is where we are creating our view application
04:26
on the server render.
04:27
So after our use, adding in our plugin,
04:30
we can, just like we did on the client,
04:32
add in our component call with the name of link
04:35
and tell it to use the component link for that.
04:38
We can give all that a save.
04:39
And with that applied, let's jump back into our browser,
04:41
give everything a refresh.
04:42
And you can now see that we don't have any hydration
04:44
mismatch warnings or errors happening.
04:47
Our server render now matches our client,
04:49
meaning everything's a-okay.
04:51
Furthermore, if we jump into our network,
04:53
take a look at our register response.
04:55
There's our link once again,
04:56
and there's our button to post to slash register.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!