Installing Inertia from Scratch
This episode is for members only

Sign up to access "Installing Inertia from Scratch" right now.

Get started
Already a member? Sign in to continue
Playing
08. Setting up server-side rendering

Episodes

0%
Your progress
  • Total: 1h 7m
  • Played: 0m
  • Remaining: 1h 7m
Join or sign in to track your progress

Transcript

00:00
Server-side rendering is pretty important if you need your content physically on the page for things like search engines to index your content. Just to demo this, if you're not familiar with the concept of server-side rendering,
00:12
if we view the page source of this rather than looking at it in the element inspector, and we look for one of the pieces of text that we have on the page, the only place this exists is within this object inside of our main application wrapper. So if we go all the way back over here, it's just within this data attribute.
00:32
Now, that's not good because this content now does not physically exist on the page. And if we look at this again, we don't have a title in here as well. The title is not being added within the actual page source. Now, contrast that to the element inspector,
00:46
where we do actually have this content on the page. That's because that is being injected in and is only available on the client side. Same with the meta description here as well and the title. So how do we get around this?
00:59
Well, what we need to do is run two separate builds, one for the client side and one for the server side. And then we need to serve our application using a node server. So let's go ahead and get this set up.
01:11
The first thing that we want to do is go ahead and install from the view organization, the server renderer. Let's go ahead and install that and we're done. Now, we have our app.js file.
01:27
This is specifically for client side. This is not for server side. So what we also want to do inside of our js file is create an ssr.js file as well. Now, this is going to be nearly identical to app.js.
01:42
So we're going to go ahead and copy over everything that we have into here. And we're just going to make some slight modifications. First thing that we can do is get rid of this progress because we don't need a progress bar on the server side.
01:54
That's purely for client side. Now, what we want to do is create an inertia app, but create this within a server. So this can actually serve our content.
02:03
So we're going to go ahead and import create server. And that is going to come from inertia.js view three and server. And then we're just going to wrap this create inertia app in a create server call. So let's go ahead and invoke create server here
02:19
into this, we're going to get the page. So this is the page context here. And then we're going to pull this down and we can just paste all of create inertia app into there.
02:29
So really, all we're doing now is running out inertia app, but doing this within the context of a server. We're going to pass the page down to this. So that gets fed in.
02:39
And we also need to pull in render to string from the view server renderer. So let's go ahead and import render to string. And that's going to come from view server renderer. And we're going to pass in render to string under render.
02:57
This will just be how this gets rendered. And of course, we want this as a string to be rendered out onto the page without HTML content in. Now, resolve can stay the same, setup here can stay the same.
03:09
But instead of create app, what we want to do is use create SSR app from view instead. So let's switch this over to create SSR app. And we'll go ahead and switch this over like this.
03:20
We'll go ahead and get rid of Ziggy just for now, because we need to modify that very slightly. But we should pretty much be done here. And this should work.
03:28
Now, we don't need to mount this to an element. That's the other really important thing, because remember, this is on the server side. So we can go ahead and get rid of that as well.
03:36
OK, so now that we've got this done, we might need to modify this later, but that's fine. We're going to head over to our Vite config. And under Laravel, we want to go ahead and give the SSR option.
03:45
And we want to point it to that file that we have just created. So that's resources.js and ssr.js. And of course, we'll just properly encase that.
03:56
And we are done. So how are we going to build this, not only for client side, but for server side? Well, to do this, we at the moment,
04:03
we've been doing npm run dev. When we want to build this for production, we use npm run build. We can demo this out now by running npm run build
04:11
and then just heading over here. And you can see that we get our app as it normally is. Now, of course, the only difference here is if we were to change this,
04:19
maybe add an exclamation mark in here, that doesn't do anything. We have hello as the message. But if we just add some other content down here,
04:28
that's not going to update, because we're not running npm run dev. That is now built for production. Now, when we also build our SSR for production,
04:35
we want to run the same command. So we want to run npm build, which behind the scenes does vite build. So if we just head over to package.json,
04:45
you can see build runs vite build. Now, to build this for server side rendering, we want to run vite build, but then we want to give in the SSR option in here.
04:55
That's going to build everything for the back end as well. Now, if we come over here, we might expect this to start working and rendering this out normally.
05:03
But if we just search for hello, you can see that we don't get any server rendered content at all. That's because we need to run a server
05:09
that actually serves this content. To get this working, we can run php artisan inertia and start SSR. So it's just a handy command
05:18
that we have to get that to work. Now, it looks like we've got an error here. And let's just take a look at this. So import create server.
05:26
Okay, so let's just go over to SSR. And yeah, that just needs to be this on its own. Let's go ahead and rerun npm run build. Let's rerun npm run.
05:39
And we could just do fight build SSR. We're going to put this into a handy command later, so we don't need to run all of these commands. And we should be good.
05:48
So we're going to rerun start SSR. And yeah, so we've got an error here. Window.axios is not defined. So window is not defined.
05:58
Now, this is a really important part of this, because on the server side, we can't use anything that accesses window because we're working with a backend server.
06:08
This is just something that you'll come to get used to as you build onto your apps. The reason that we're getting this error is either on app.js or SSR.js,
06:16
we imported bootstrap. That was purely by accident. But that just gives you a good idea as to how we can't use window inside of our server.
06:24
So let's go ahead and just rerun these commands again. And we should be good. So let's run fight build SSR. We'll run fight build again,
06:31
even though we didn't really change anything. And let's head over and give this a refresh. And we'll rerun start SSR. Okay, so that looks like it started.
06:41
Let's head over and give this page a refresh. We can keep an eye on errors in here. So you can see that we have got a few things in here. So property root was accessed,
06:49
but not render, not defined on instance. That is just because over on our homepage at the moment, we haven't set up Ziggy. So I'm actually gonna go ahead
06:57
and change that back over to dashboard. And we'll set Ziggy up in just a second. So again, let's just run fight build SSR. And let's just rerun our server,
07:07
give this page a refresh. And there we go, no errors. So we got there eventually. We can click through and this just works as normal.
07:13
Let's view the page source here. And let's look for hello. You can see now that this content is actually now being rendered out on the page
07:22
within a div within the body. So it does actually exist on the page, which is exactly what we wanted. We don't have our title or any other metadata
07:32
that we defined with our component here just yet, but we are gonna look at that. Now we've got things working. Now we spend a lot of time
07:39
running lots of different commands here. So a really good idea would be to add these to package.json. So what we're gonna do is say fight build SSR.
07:47
Now that now makes it incredibly easy for us to just run npm run build. And that's gonna build not only the client side, but also the server side as well,
07:56
using that SSR file that we've just created. And now all we need to do is run that and then run the command to start the SSR server, and we should be good.
08:06
Okay, let's just look at bringing back in some of the things that we're missing. So we modified this to get rid of the root helper because that doesn't exist
08:16
within the backend at the moment because we don't have any kind of a Ziggy stuff in here at all, but we can add that back in really easily.
08:24
So we're gonna go ahead and still import Ziggy view, and we're gonna go ahead and use the Ziggy view in here. But now what we're gonna do is pass through the roots from our globally shared props from inertia.
08:41
So remember we did that over in handle inertia requests in here. So we can pass this through. We get all of the props that we pass through globally
08:51
into this props argument just here. So we can grab that. We then wanna go through initial page. That's the initial page load props and then Ziggy.
09:00
So Ziggy is how we're sharing it. This is just how we access those props, those global props. So now that we've added this Ziggy back in,
09:08
we should be good. So we're gonna rerun NPM run build, which is gonna run both for client and server, start our server side rendered server,
09:16
and we shouldn't see any errors there. And we should just be able to click through as normal. So our root helper is there and we have all of our roots being passed
09:24
into that as well. Now, the reason that we're doing this instead of over in app.js, this, which remember Ziggy is that global object
09:35
that we had. We just look at our elements here. This global Ziggy object here with all of these is because we are on the server side.
09:46
So we don't have access to this Ziggy object that exists on the client side. That's why over in handler inertia request, we pass these in so we could then access them
09:56
over here with the props. So that works on both client and server now. The last thing that we want to do is get our meta and title working.
10:05
At the moment, it does display because that's rendered on the client side, but it doesn't exist within the actual server rendered content,
10:11
which is a problem because then search engines and anything else indexing our page can't read this data very easily.
10:18
So to do this, we have a really nice helper. We can head over to our app.blade.php file and include the inertia head directive. So we're going to go ahead
10:31
and rerun npm run build. We're going to rerun our server. So let's pull that back in here. And if we head over and give that a refresh,
10:41
view the page source, you can see we've got our title in here and we have also got our meta description as well. So now any content that you add on the page,
10:51
so for example, over on the dashboard, you will actually see this within the content itself. So if we just search for dashboard again here,
11:00
you can see we physically got this on the page, which means that anything indexing your pages will be able to see your content like a normal app.

Episode summary

In this episode, we dive into setting up server-side rendering (SSR) for our Inertia/Vue app (with Laravel in the backend). First, we go over what SSR actually is, and why it's a big deal: stuff like SEO and search engines actually seeing your content, rather than just relying on client-side JavaScript. We check the page source before SSR and see that almost nothing useful (like the page title or meta tags) makes it to the actual HTML that gets served up — not great!

Next, we walk through the steps required to set up SSR in the codebase. We install the necessary server renderer from Vue, make a new ssr.js entry point (which is mostly a copy of our client code, with a few tweaks like using createSSRApp instead of createApp, and removing anything window-related), and wire it all up so both client and server bundles get built. There's a bit of troubleshooting around typical SSR gotchas, like not being able to use window or other browser-only globals on the server.

We adjust our Vite config to point to our new ssr.js file, and update our npm scripts to make running both builds a breeze. Then, we run the SSR dev server to actually serve up the server-rendered content, and finally confirm that our page source now includes all the juicy bits for SEO!

We also set up all the Ziggy/Laravel route stuff so it's happy in both client and server environments, and get our titles and meta tags rendering correctly on the server (using the Inertia head directive in our Blade templates). By the end, everything is working as it should: the page source shows real content, the title, and meta tags — just like we'd expect from a "real" SSR app. This means search engines and crawlers will get all the info they need, improving discoverability of our pages.

Episode discussion

No comments, yet. Be the first!