Build a Forum with Inertia and Laravel
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
60. Reviewing SSR (Server-side rendering)

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
Because we use Laravel Breeze with the SSR option, we actually have server-side rendering built in to our application. All we need to do is make sure we build this for both the client and the server and then run the SSR server. Now, if you're unsure what server-side rendering is, let's just take a look at the page we've got here. We know that everything is on the page, but all of this is being hydrated on the client side,
00:27
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.
00:56
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.
01:26
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.
01:49
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.
02:07
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.
02:30
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.
02:54
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.
03:13
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.
03:25
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.
03:46
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.
03:57
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.
04:17
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.
04:29
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.
04:46
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.
04:59
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.
05:12
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.
05:24
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.
05:41
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.
05:57
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.
06:24
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.
06:38
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.
06:56
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.
07:08
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.
07:22
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.
07:27
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.
07:49
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.

Episode summary

In this episode, we dive into server-side rendering (SSR) in our Laravel application set up with Laravel Breeze and Vite. We start off by explaining what SSR actually does: instead of just rendering everything on the client (in the browser), SSR lets us pre-render our pages on the server. This is helpful for things like SEO and faster perceived load times, because the HTML is already there for search engines and users when they first load the page.

We take a look at how things appear differently in the browser and when you view the page source, emphasizing that not everything rendered client-side shows up for crawlers. Then, we check out the different entry points in the project—app.js for the client, and ssr.js for the server. We look into how SSR builds work by running npm run build and how to actually start the SSR server.

Of course, things never go 100% smoothly the first time: we get some classic SSR errors, like trying to access the window object on the server, or using components that just aren't compatible with SSR. You'll see how we debug these, isolate client-only features, and (most importantly) tell Vite to exclude certain packages from SSR with the ssr.noExternal flag.

The main takeaway is how to recognize and solve SSR compatibility issues—some parts of the app are totally fine being client-side only, and for the rest, we tweak our build configuration to make everything play nice together. By the end, our SSR setup runs without errors, giving us a solid SSR foundation for our Laravel app.

Episode discussion

No comments, yet. Be the first!