使用 Laravel + Inertia.js + Vue.js 进行服务器端渲染

SEO非常关键，因此在您构建单页应用（SPA）时应该始终具备SSR（服务器端渲染）。如果您使用的是Laravel的默认模板系统Blade，这不是一个问题，因为所有内容都在服务器上渲染，并且结果将直接发送到浏览器。

在我们的例子中，渲染是在客户端完成的，因此我们的DOM非常空。为了解决这个问题，并使我们的网站在没有启用JavaScript的情况下也能正常工作，我们需要将所有内容在服务器端渲染，并在页面加载时提供生成的所有HTML。

幸运的是，Inertia提供了一些工具来帮助我们解决此问题。

请将以下两个包添加到我们的项目中

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

我们不使用-D或--save-dev标志这两个包，因为我们还需要在生产的专用服务器上运行它们。作为一般规则，对于composer.json和package.json，分别安装在内置的require-dev和devDependencies中的包应仅用于开发环境。

接下来，我们需要在app.js相同的文件夹中创建一个名为ssr.js的服务器配置文件，即在resources/js文件夹中。这个文件将非常类似于我们的app.js文件，但它将由Node.js而不是浏览器处理。

我们的ssr.js文件应该看起来像这样

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);
        },
    })
);

请注意，我们不是使用createApp，而是从Vue中导入createSSRApp，并且还在createInertiaApp方法内部包装了createServer方法。我们还不再导入Inertia的进度条，因为在服务器端永远不会使用它。

接下来，我们还需要一个包来完全支持我们的Node服务器

npm install webpack-node-externals

现在我们将创建一个名为webpack.ssr.mix.js的独立的Webpack文件，该文件将由我们的Node.js服务器用于编译资源。

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();

如您所见，我们的webpack.ssr.mix.js文件与webpack.mix.js非常相似。您需要始终记住，每次您在默认Webpack文件中更新可能会在服务器端使用的代码时，也要更新您的SSR webpack文件。现在，所有将用于我们的Node.js服务器的内容都将捆绑到public/js/ssr.js中。

现在让我们发布Inertia的SSR配置文件...

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

...在config/inertia.php中启用SSR，将enabled标志更改为true。

现在所剩下的唯一的事情就是编译并启动我们的Node.js服务器

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

如果一切正常，您应该会得到类似的输出

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

现在您甚至可以禁用浏览器的JavaScript，您仍然能够浏览网站，因为所有内容都将由Node.js服务器在页面加载时在服务器端渲染并提供给您的浏览器。

就是这样了。

您可以在本< Hercule aide/ 中的Part 1 & 2中找到我们讨论的所有内容 repo。

支持并关注我