Файл макета Vue 3 + Inertia SSR вызывает несоответствие узла гидратации

Я рано начал работать над приложением SSR Laravel 10/Inertia 1/Vue 3 и заметил, что ошибка несоответствия узла Hydration появляется из ниоткуда. После того, как я немного удалил вещи, у меня осталось следующее:

веб.php:

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

Макет.vue:

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

Добро пожаловать.vue:

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

Удаление макета из app.js исправляет это, но я действительно не понимаю, как это сделать. Кроме того, кажется, что добавление макета, просто используя его как компонент, работает нормально.

vuejs3 server-side-rendering inertiajs laravel-10

19.04.2023 04:44

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Разобрался - я добавлял макет в файл app.js, но не обновлял файл ssr.js, чтобы отразить эти изменения. Таким образом, файл приложения добавлял макет, а файл ssr — нет. Для справки, вот как сейчас выглядит файл ssr.js (обновлен раздел разрешения):

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

Также обратите внимание, что вам нужно перезапустить inertia:start-ssr всякий раз, когда вы обновляете макет (насколько я могу судить). Может быть, лучше просто временно отключить SSR во время работы с файлами макета?

19.04.2023 05:33

Другие вопросы по теме

Откатывается ли Astro js к SSR, когда кеш недоступен?

Как передать параметры со стороны клиента в код на стороне сервера в Sveltekit?

Контент не обновляется до повторного развертывания в Next.js

Как установить cookie на стороне клиента в NextJS 13?

Рендеринг с использованием рендеринга на стороне сервера бесконечно загружается

Запрос axios Nuxt ssr asyncData не работает при перезагрузке страницы

Nextjs - получение значения файлов cookie при инициализации _app

Как я могу получить слаги с запрошенной страницы в getStaticProps или getStaticPaths?

Как определить и использовать язык страницы в nextJS (ReferenceError: окно не определено)

Nuxt: Как узнать, что гидратация закончилась?

Файл макета Vue 3 + Inertia SSR вызывает несоответствие узла гидратации

Ответы 1

Другие вопросы по теме

Похожие вопросы