Vue and SSR cause hydration mismatches.

[gribbl]

Package version

1.2.4

Describe the bug

Hello.

Recently, I wanted to try Inertia with Vue and SSR. Everything was fine until I created a layout. As shown in the attached images, I encountered few hydration issues. I've also attached a repro, which is simply a new Adonis project using the Inertia starter kit. Then, I added a layout, located at inertia/layouts/MainLayout.vue, and defined it in app.ts and ssr.ts as described in the Inertia documentation for setting a default layout. I also updated the @adonisjs/inertia package to version 1.2.4

Basically, it seems that whenever I update the content of a page, HMR crashes. This forces me to manually reload the browser after every change. With the repro, if I update the ref in home.vue located at inertia/pages, for example, it doesn’t work. Additionally, even if no warning message appears in the console, the content of the home page still disappears.

I’m on Windows 11 and I use Node 22.11.0, Chrome 131.0.6778.109 and Firefox 133.0.

Reproduction repo

https://github.com/gribbl/adonis-inertia-vue-ssr

[Julien-R44]

It seems that the error only occurs when we have a layout and also only when upading a ref. If I update the layout itself or the HTML, no error occurs. Not sure to understand why now but I can confirm this looks like a bug

[andresgutgon]

I'm having a similar issue and after some debugging I realized this is cached between requests

resolvedPage.default.layout ??= MainLayout

1. So you render for the first time and everything is ok
2. Change something in the layout and the Vite client HMR and you see the change
3. But then you refresh again and you get a hydratation mitmach

In my case is Inertia + Phoenix + page SSR rendered + Vite

But i think is the same case

[andresgutgon]

After discussing with my buddy gpt I came to the conclusion that bundling all pages in one file for server (nodejs) environment is fine unless you have a massive app.

So this is my resolve page function for my InertiaJS app using Vite as a bundler. The key here is using eager: true to avoid hydration mismatches errors.

import { ReactNode, ComponentType } from 'react'
import Layout from '../Layouts/Layout'

type KindOfProps = Record<string, unknown>

interface PageModule {
  default: ComponentType<KindOfProps>
  layout?: (page: ReactNode) => ReactNode
}

type ClientPageModule = () => Promise<PageModule>
let pages: Record<string, PageModule> | Record<string, ClientPageModule>

if (import.meta.env.SSR) {
  pages = import.meta.glob<PageModule>('../Pages/**/*.tsx', { eager: true })
} else {
  pages = import.meta.glob<PageModule>('../Pages/**/*.tsx')
}

function buildSrrPage(pageModule: PageModule) {
  const { default: Component, layout } = pageModule

  const Wrapped = (props: KindOfProps) =>
    (layout ?? ((page: ReactNode) => <Layout>{page}</Layout>))(
      <Component {...props} />,
    )

  return Wrapped
}

async function buildClientPage(pageModule: ClientPageModule) {
  const { default: Component, layout } = await pageModule()

  const Wrapped = (props: KindOfProps) =>
    (layout ?? ((page: ReactNode) => <Layout>{page}</Layout>))(
      <Component {...props} />,
    )

  return Wrapped
}

export function resolvePage(name: string) {
  const pageModule = pages[`../Pages/${name}/index.tsx`]

  if (!pageModule) {
    throw new Error(`Page ${name} not found.`)
  }

  if (import.meta.env.SSR) {
    return buildSrrPage(pageModule as PageModule)
  }

  return buildClientPage(pageModule as ClientPageModule)
}