Laravel + Inertia：无法使用 Laravel Breeze 的默认脚手架实现服务器端渲染答案

【问题标题】：Laravel + Inertia: unable to implement server side rendering with default scaffolding for Laravel BreezeLaravel + Inertia：无法使用 Laravel Breeze 的默认脚手架实现服务器端渲染
【发布时间】：2022-10-25 00:13:40
【问题描述】：

在带有laravel/breeze 的全新 Laravel 安装中，即使使用 Laravel 文档中的默认脚手架，我也无法实现 SSR。

我是runningphp artisan breeze:install vue --ssr，它为所有东西搭建脚手架并毫无错误地构建资产。但是当我在浏览器中检查源代码时，我看不到服务器端呈现的内容（只有div 和app id）

内容是默认的（由breeze:install --ssr 命令生成）之一，我什么都没加：

// vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
});

// app.js
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

// ssr.js
import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ app, props, plugin }) {
            return createSSRApp({ render: () => h(app, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
        },
    })
);

// app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>

        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

构建脚本是vite build && vite build --ssr

【问题讨论】：

标签： laravel server-side-rendering vite inertiajs

【解决方案1】：

我认为在某些时候 Ziggy 改变了对象结构或类似的东西。面临同样的问题并设法通过更改来解决它：

location: new URL(page.props.ziggy.location),

至

location: new URL(page.props.ziggy.url),

如果你在方法之前 console.log(page.props.ziggy) 你会看到有一个 url 键而不是位置。我认为它们具有相同的目的。

【讨论】：