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

Laravel  /  管理员 发布于 3年前   1704

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 的服务器配置文件，即资源/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 文件时，您都需要始终记住更新您的 SSR webpack 文件。 

现在，我们的 Node.js 服务器将使用的所有内容都将捆绑到 public/js/ssr.js。

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

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

...并通过将启用标志更改为 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 部分中讨论的所有内容。

https://github.com/geowrgetudor/laravel-inertia-vue-ssr

支持和关注我

转：

https://devdojo.com/geowrgetudor/server-side-rendering-with-laravel-inertiajs-vuejs