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
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
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.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.