00:05
All right, so as promised, let's discuss what the difference is between
00:07
server-side rendering and client-side rendering.
00:09
So as briefly discussed in the last lesson,
00:12
server-side rendering comes through with all of the initial markup needed for
00:15
the initial page load already rendered out and
00:18
provided directly inside of the document of our response.
00:21
Client-side rendering, however, just has the mounting element and
00:24
nothing inside of the mounting element for our view application, React or
00:28
whatever it is they may be using there.
00:30
Beyond that initial render with subsequent requests,
00:32
they both will behave the same.
00:33
They just come through with data needed to update the page accordingly.
00:36
So in the back here on the left, I have our actual plot my course application
00:40
that we'll be building out that we created in the last lesson.
00:43
Then on top on the right hand side,
00:44
I have a client-side rendered application with SSR disabled.
00:48
So if I were to expand my inertia application over here, go into app,
00:52
we just have an app.ts.
00:54
That would look the exact same as our app.ts on our server-side rendered
00:57
application, but we do not have a SSR application
01:01
on our client-side rendered as we don't need it.
01:03
Beyond that, the CSS and pages both look the exact same, and
01:06
they both have a separate TS config from our AdonisJS application as well.
01:11
Additionally, resources, views, and our initial layout looks the exact same too.
01:15
It's got our VEAP method adding in our scripts in our initial inertia page, and
01:19
then it also has the inertia head and the inertia tag as well.
01:23
If I go ahead and do Ctrl+tilde, open up the terminal, and
01:25
we boot these up, so npm run up there.
01:27
All right, so our client-side application is at 3333, and
01:30
we jump over to our server-side application, command-tilde, npm run dev.
01:34
This one will be at 52914.
01:37
If we go ahead and open up our server-side application now, so
01:39
I'm gonna command-click on it, and that will open up our browser here.
01:42
This is our server-side rendered application, and I'll go ahead and
01:45
just jump back into Visual Studio Code and hop over to our client-side one,
01:49
command-click on that to open that one up as well.
01:51
The left tab here is our server-side rendered application, and
01:54
on the right-hand side here is our client-side rendered application.
01:58
So if we open up the Inspect panel and take a look specifically at our network,
02:02
and it's the document request that we're most interested in here,
02:05
go ahead and give this page a refresh.
02:06
All right, you can see we have all of our scripts coming through here.
02:09
That looks fine.
02:09
Let's scroll up to our document though, and
02:11
let's take a look at the response, specifically the role response.
02:14
Within here, you can see our VEAP scripts getting added in,
02:17
as well as that initial page component right there.
02:20
And then inside of our actual body,
02:22
we have our InertiaJS application mounting point, and
02:25
that's provided all of the initial page data as a data page attribute.
02:29
So if we scroll over to the right though,
02:30
we can see that this element contains no information, it's just empty.
02:34
That's where the main differences between client and
02:36
server-side rendering happens.
02:38
Client-side rendering will come through completely empty for
02:40
our mounting element.
02:41
It's up to the client-side to then register all of the scripts for
02:45
the scripts to run and to render out the initial content.
02:48
If we were to jump into our expect panel, and
02:50
there is our app ID right there, take a look at the child content.
02:54
There is all of the content being rendered out, specifically on the client side.
02:59
None of what's inside of this app element here is rendered and
03:02
provided by our server whatsoever, as this element is completely empty.
03:07
If, however, we were to jump over to our server-side rendered application,
03:10
right-click on this, inspect, jump into the network panel,
03:13
expand this out a little bit, and give it a refresh.
03:15
All right, we see all of our scripts come through.
03:17
That's a-okay again.
03:18
Let's jump up to our document, take a look at the response, and
03:21
specifically the raw response.
03:22
Again, you see all of the scripts come through along with our initial page
03:25
component.
03:26
That looks fine, but inside of our body here now, we have our mounting element,
03:30
again with all of the initial page data as data page attribute right there.
03:33
But if we scroll over to the right-hand side, you'll see that this element is not
03:37
empty and actually contains all of that initial HTML that we see directly on
03:41
the page.
03:42
This was furthermore insinuated whenever we took a look at the actual preview of
03:45
the rendered content.
03:47
We see all of the content come through with the actual response,
03:49
whereas with our client-side application, all of the content is completely empty.
03:53
There's no content coming through with the document whatsoever.
03:56
And that's because with our server-side rendered application,
03:58
it's making that initial render on the server-side,
04:01
hence the name server-side render.
04:03
Now beyond the initial render, they both will behave the same.
04:05
We don't have any additional pages right now, but
04:07
it just comes through as an API response with the updated page data.
04:11
And then the client-side will make that update accordingly.
04:13
So it's just the initial render here that's happening server-side,
04:17
which is the same as any server-side rendered client application.
04:20
So what are the pros and cons here?
04:21
Well, server-side rendering requires the HTML generated on the server-side
04:25
to match the initial render on the client-side.
04:28
This is what we discussed in the last lesson as hydration mismatch.
04:31
Furthermore, packages may or may not support SSR or server-side rendering.
04:35
So you will need to check on a per package basis to see whether or
04:37
not it supports server-side rendering.
04:39
However, since the rise in popularity of Next and Nuxt,
04:42
a lot more packages have been taking SSR into consideration.
04:45
So this is less of an issue nowadays as it was back when it was a brand new subject.
04:49
Some of the pros of SSR though is since the HTML is initially rendered on
04:52
the server, we're gonna have a quicker initial load time since it doesn't need
04:55
to load all of the scripts to then render it out.
04:58
It already has the initial render ready to go directly from the document.
05:01
Because of that, SSR is generally recommended whenever SEO or
05:04
search engine optimization is important for your application,
05:08
which is typically important for content-rich applications, stuff like blogs,
05:13
marketing materials, and things of that nature.
05:15
Really anything that you would want search engines to be able to pick up on and
05:18
recommend your site for.
05:19
Now, yes, as a caveat, Google has been able to read JavaScript for
05:22
quite some time now.
05:23
But the scope and
05:24
effectiveness of it being able to read that has been up for debate.
05:28
And since you do have that initial render time being quicker with SSR,
05:32
it's still generally recommended.
05:33
Client-side rendered apps, on the other hand, are just much more straightforward
05:36
and easy to work with because you don't have the extra complexities of SSR to worry
05:40
about, and you don't have the hydration mismatches to worry about either.
05:43
It only ever needs to worry about serving content directly inside of the user's
05:46
browser rather than on your server.
05:48
So at a top level, the debate between server-side rendered and
05:50
client-side rendered for your application comes down to,
05:53
do you need search engines to be able to read and recommend your content?
05:57
In our particular case for our application, we don't need it whatsoever.
06:00
But because server-side rendering takes some extra steps,
06:03
we're gonna cover that throughout the series, so we are using SSR here.
Join The Discussion! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
fauzan-habib
This is exactly what I need, did a marathon on this series and I can't wait for the next lessons coming in
Please sign in or sign up for free to reply
tomgobich
Thanks so much, Fauzan!! I'm ecstatic to hear that! 😁
Please sign in or sign up for free to reply