Support the ongoing development of Laravel.io →

Server side rendering with Laravel + Inertia.js + Vue.js

24 Feb, 2022 4 min read

SEO is really important so you should have SSR (server side rendering) whenever you are building a SPA (single page application). This is not an issue if you are using Laravel's default templating system, which is Blade, because everything is rendered on the server and the result gets directly shipped into the browser.

In our case the rendering is done on the client side so our DOM is pretty empty. To solve this problem and make our website work even without Javascript enabled we'll need to somehow render everything on and the server side and serve all the resulted HTML on page-load.

Luckily Inertia ships with some tools to help us tackle this issue.

Let's add the following two packages to our project:

npm install @vue/server-renderer
npm install @inertiajs/server

We are not using -D or --save-dev flag on these 2 packages because we also need to run them on our production sever. As a general rule for composer.json and package.json, the packages that are installed inside require-dev respectively devDependencies should be used only in a development environment.

Next we need to create a server configuration file called ssr.js inside the same folder as our app.js, meaning resources/js. This file will look very similar to our app.js file, but instead of being compiled and handled by the browser, it will be handled by Node.js.

Our ssr.js file should look like this:

import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import createServer from "@inertiajs/server";

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => require(`./Pages/${name}`),
        setup({ app, props, plugin }) {
            return createSSRApp({
                render: () => h(app, props),
            })
                .use(plugin)
                .use(ZiggyVue, Ziggy)
                .component("Link", Link)
                .component("Head", Head);
        },
    })
);

Notice that instead of createApp we import createSSRApp from Vue and we're also wrapping our createInertiaApp method inside createServer method. We also no longer import Inertia's progress bar because that won't be ever used on server-side.

Next we'll need one more package to fully support our Node server:

npm install webpack-node-externals

Now we'll create a separate Webpack file called webpack.ssr.mix.js which will be used by our Node.js server to compile the resources.

const path = require("path");
const mix = require("laravel-mix");
const webpackNodeExternals = require("webpack-node-externals");

// Rezolve Ziggy
mix.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
});

// Build files
mix.options({ manifest: false })
    .js("resources/js/ssr.js", "public/js")
    .vue({ version: 3, options: { optimizeSSR: true } })
    .alias({ "@": path.resolve("resources/js") })
    .webpackConfig({
        target: "node",
        externals: [webpackNodeExternals()],
    })
    .version();

As you can see our webpack.ssr.mix.js file is really similar to webpack.mix.js. You'll need to always remember to also update your SSR webpack file everytime you update your default webpack file with something that can be used on the server-side. Now eveything that's gonna be used by our Node.js server will be bundled to public/js/ssr.js.

Now let's publish the Inertia's SSR config file...

php artisan vendor:publish --provider="Inertia\ServiceProvider"

...and enable the SSR in config/inertia.php by changing the enabled flag to true.

The only thing that's left to be done now is to compile and to spin up our Node.js server:

npx mix --mix-config=webpack.ssr.mix.js
node public/js/ssr.js

If everything's fine you should get a similar output:

Starting SSR server on port 13714...
Inertia SSR server started.

Now you can even disable the browser's Javascript and you'll still be able to navigate through the site because everything will be rendered on the server side by the Node.js server and served to your browser on page load.

That's pretty much it.

You can find everything we've talk about in Part 1 & 2 in this repo.

Support & follow me

Buy me a coffee Twitter GitHub Linkedin

Last updated 1 year ago.

driesvints, geowrgetudor, lantrinh1999 liked this article

3
Like this article? Let the author know and give them a clap!

Other articles you might like

March 27th 2024

Viewing Laravel Databases in VS Code

The majority of VS Code users prefer to use the integrated terminal rather than the system terminal/...

Read article
March 19th 2024

Create a Node package on your local Laravel environment

How to set up a local development environment to test your Node package classes or utilities in a lo...

Read article
March 16th 2024

Modularizing Your Laravel Application: A Balanced Approach

Watch Video Here Navigating the complexities of developing sophisticated applications presents a si...

Read article

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.