Vue 3 + Inertia SSR Layout File Causes Hydration Node Mismatch

Question

I was early into working on a Laravel 10/Inertia 1/Vue 3 SSR app, and I noticed a Hydration node mismatch error show up out of nowhere. After a fair bit of removing things, I was left with the following:

web.php:

Route::get('/', function () {
    return Inertia::render('Welcome');
});

Layout.vue:

<template>
    <div>
        <slot/>
    </div>
</template>

Welcome.vue:

<template>
    <section>
        <h1 class="text-3xl">Hello, World!</h1>
    </section>
</template>

Removing the layout from app.js fixes it, but I don't really see how. Additionally, it seems that adding the layout by just using it as a component, works fine.

Answer 1

Figured it out - I was adding the layout in the app.js file, but didn't update the ssr.js file to reflect those changes. So the app file was adding the layout, and the ssr file was not. For reference, this is what the ssr.js file looks like now (updated the resolve section):

import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue'
import {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";
import Layout from "./Shared/Layout.vue";

createServer(page =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: name => {
            const page = resolvePageComponent(
                `./Pages/${name}.vue`,
                import.meta.glob('./Pages/**/*.vue')
            );
            page.then((module) => {
                if (module.default.layout === undefined) {
                    module.default.layout = Layout;
                }
            });
            return page;
        },
        setup({ App, props, plugin }) {
            return createSSRApp({
                render: () => h(App, props),
            }).use(plugin)
        },
    }),
)

Also, note that you've got to restart inertia:start-ssr whenever you update the layout (as far as I can tell). Might be best to just disable SSR temporarily while working on the layout files?