Sign up to access "Build a Forum with Inertia and Laravel" right now.

but doesn't actually exist when we view the page source or something crawls our application. So let's go ahead and just take the need help with view title and let's go ahead and inspect what we have on the client side, first of all. So if we come down to just generally inspect this element here, you can see that everything exists on the page and we might think that everything is fine. Now, we're going to go ahead and just view the page source here instead, and we're going to look for need help with view.

Now, this does exist within an object here, which is bound into an attribute, but you can see that there's only one instance of this on the page. This text does not actually exist on the page. Therefore, it's a little bit more difficult for search engines to crawl this information. You'll also notice if we head back over to the start here, in fact, we can search for the title that the title of our application just here doesn't reflect what we see over on the client side.

So what we want to do is build up our application now so it works with server side rendering so we can see that content on the page. So let's go ahead and get started by heading over to package.json and see what happens when we run our dev script. So this is what we've been running throughout the course. And all this will do is run Vite so we can build this locally and see everything reload on the page.

And when we build this for production, this runs Vite build, but it also runs Vite build with the SSR flag. Now, let's dive into this a little bit more. Over in app.js, which we have come over to in touch, this here is purely for the client side. It's nothing to do with the server.

What we do have, though, is an SSR.js file which we haven't opened just yet. Now, what this is doing is it's building this for our server. So it's creating an inertia app, but it's being wrapped by this create server function, which is going to run a server and render our content here using render to string. If we come up, this comes from view server renderer.

So basically, all this entry point for our server side rendered app is doing is rendering our application normally. So everything else pretty much looks the same. However, what it's doing is it's actually rendering this content out on the server, which we're going to run in a moment. So there are a few tweaks that we're going to need to make to our application to make it work for server side rendering.

As you add to your application, you'll find that you may get some errors when you are running your server side rendered server. That is just because on a server, we don't have access to things like the window object, which some plugins we pull in might use. We can't access window at all. That is purely for a client side browser version.

So pretty much everything in here looks the same. We're going to head over to our Vite config as well, because it's referenced here. This file is referenced here so everything can get built up as we need. And that's pretty much it.

We're just going to go ahead and build our app now and see what happens. So the steps to build your app to run server side rendering would be to run NPM run build that will build everything for production. So you won't see everything update in the browser if you make any changes. Let's go ahead and run that and wait for, first of all, the client and then the server to be built.

So that is done. Now, if we head over to the browser and give this a refresh, sure enough, we can still see everything. But we're not running a server which will actually dump out the HTML on the page. So everything here still looks the same.

We're purely now working with the client side app. So we're going to go ahead and run a really handy inertia command that's been registered for us, which is start SSR. We don't need to do this manually. We just run this command and that's going to boot up a server for us, which is going to allow that content to be rendered via that SSR entry point.

So I'm going to give the page a refresh here. And the first thing you'll notice is we've got some errors in here, which is exactly what I just mentioned. We're going to go ahead and fix them up soon. And actually, now, if we view the page source, you can see there is no difference.

So the thing with server side rendering is if there are any errors and the rendered content can't be shown, it's just not going to do it. So your app won't break, but you won't get the benefit of SSR. So we've got a couple of things here that are kind of going wrong. We're just going to go through and fix these up.

So the first one is just how imports are dealt with. And you can see that we're pulling in the view mention component over here. So let's go ahead and open up where we are doing that. So that is on the create discussion form.

And let's look for mentionable. And that's in our import here. So we're just basically going to remove the specific import for that. And we're going to do the same thing over on the create post form as well.

So let's look for mentionable. And we'll remove that as well. So it's really just about inspecting the errors that you get here and just doing something about them. Now, to get this to work, we're going to have to rebuild our application so that code gets rebuilt.

And then we're going to have to rerun our SSR server. So let's head over and give this another refresh and see what we get. OK, so let's have a look here. We've got another one from floating view here, which is used within that mentionable component that we just created.

So it looks like we've got a bit of an issue. And we're probably going to have to go and do some or perform some tweaks to this to get this to work. So essentially, what we're going to do here is revert what we've done. And we're going to exclude this from server side rendering.

If you think about the functionality that you're building into your app, something like, and yeah, that's broken at the moment. So let's just run npm run dev. Something like this functionality where we can add different users, of course, does not need to be rendered on the server side. The content that we're interested in rendering server side are things like the discussion titles, the content within these titles.

So search engines can pick these up. Anything that's client side, you can pretty much ignore from your SSR build. So we've clearly got a problem with this package where it's just not working with server side rendering. And it doesn't need to either.

So how do we fix this? Well, let's go over to our Vite config, which we've just looked at. We're going to go ahead and add in an SSR option to our Vite config. What we can do here is use the no external object or array in this case to give any of the packages that we do not want to use for SSR.

Essentially, in the most basic way I can explain that. So let's go ahead and add in ViewMention, which we're obviously working with. And we'll also add in floating view as well. So basically saying, do not use these for SSR.

So now let's go ahead and see the difference that we get when we run npm run build. Let's just close up our dev server. And we're also, of course, going to run our server as well. So let's go over and just give this a refresh and see what happens.

And there we go. The error has gone. And that doesn't mean that functionality is now not going to work. Now we've excluded it.

It is still going to work, but it's only being rendered on the client side. So if we just head over to our console here, we just want to make sure that we've got no errors here as well. So we're going to go ahead and open up and refresh this page. I always find it's a good idea to just refresh every single page that you are building within your app just to see if anything on that triggers an error over in your server.

And everything at the moment looks really good. But as you add to this, if you want to add to what we've built already, if you followed along, just bear in mind that you'll need to run your server-side rendered server and go ahead and make sure that you don't see any errors. So as we go on, if there are any other things that pop up here, we will fix them as we go. But for now, that is a little introduction to server-side rendering within a Laravel app using Vite, if you've not looked at it already, and just how we solve one of the problems that we've come across.