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! (3 Comments)
Please sign in or sign up for free to join in on the dicussion.
carlos-barbier
Hi Tom - how to do the same setup with react
Please sign in or sign up for free to reply
tomgobich
Hi Carlos! Though I haven't worked with React since its class days (years ago), unless anything recently has changed, I don't believe React has a concept of global components. So, unfortunately, I don't believe this same global registration will work with React.
Please sign in or sign up for free to reply
carlos-barbier
cheers!
Please sign in or sign up for free to reply