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

请注意，我们从 Vue 导入了 createSSRApp 而不是createApp，我们还将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 文件更新您的默认 webpack 文件时，您都需要始终更新您的 SSR webpack 文件。现在，我们的 Node.js 服务器将使用的所有内容都将捆绑到public/js/ssr.js。

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

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

并通过将 enabled 标志更改为 true 来启用 config/inertia.php 中的 SSR。

现在唯一剩下要做的就是编译和启动我们的 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 服务器在服务器端呈现，并在页面加载时提供给您的浏览器。

差不多就是这样。

您可以在这个 repo 中找到我们在第 1 部分和第 2 部分中讨论的所有内容。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://devdojo.com/geowrgetudor/server-...

译文地址：https://learnku.com/laravel/t/67179