Server-Side Rendering not working if you enable Client side hydration

[connecteev]

Following the guide here https://inertiajs.com/server-side-rendering , I have Server-Side Rendering working with Laravel and Inertia + Vue.

However, when I enable Client side hydration per the instructions above, my app breaks. I see one (often BOTH) of the following:

• the content is duplicated in the browser on a hard refresh, and
• warnings in console, like below

app.js:103 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <Layout errors= {} auth= {user: {…}} users= {current_page: 6, data: Array(10), first_page_url: 'http://127.0.0.1:8000/users?page=1', from: 51, last_page: 15, …} > 
  at <Inertia initialPage= {component: 'Users', props: {…}, url: '/users?page=6', version: '1d5096ae5d3c7d87eb0790bfc68dd5d0'} initialComponent= {components: {…}, props: {…}, __hmrId: '7a49e397', __file: '/Users/kunalpunjabi/Code/web/laracasts_build_moder…pps_using_inertia_js/resources/js/Pages/Users.vue', render: ƒ, …} resolveComponent=fn<r>  ... > 
  at <App>

I have followed the guide to a tee. Copying my app.js and ssr.js below, I am hoping the creators of Inertia can clarify what in the world is wrong here.

app.js:

import '../css/app.css';

import { createSSRApp, h } from 'vue'
import { createInertiaApp, Head } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; // resolvePageComponent needed to enable code-splitting (or lazy-loading) using Vite, see comment https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js/episodes/14?reply=21929
import Layout from './Shared/Layout.vue'

let enableCodeSplitting = true
const appName = 'MyInertiaApp';

createInertiaApp({
  title: title => `${title} - ${appName}`,

  // If using Vite instead of Webpack / Laravel Mix, the resolve function may look something like this
  resolve: (name) => enableCodeSplitting ?

    // Enable code-splitting: Using Async-Await format
    (async function() {
      let page = await resolvePageComponent(
        `./Pages/${name}.vue`,
        import.meta.glob('./Pages/**/*.vue', { eager: false })
      );
      if (!page.default.layout) {
        page.default.layout = Layout
      }
      return page;
    })()

    :

    // Disable code-splitting / Enable eager-loading (opposite of lazy-loading / code-splitting)
    (function() {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      let page = pages[`./Pages/${name}.vue`]

      if (!page.default.layout) {
        page.default.layout = Layout
      }
      return page
    })(),

  setup({ el, App, props, plugin }) {
    createSSRApp({ render: () => h(App, props) })
      .use(plugin)
      .component('Head', Head)
      .mount(el)
  },
})

ssr.js:

import '../css/app.css';

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

let enableCodeSplitting = true
const appName = 'MyInertiaApp';

createServer(page =>
  createInertiaApp({
    page,
    render: renderToString,
    title: (title) => `${title} - ${appName}`,

    // If using Vite instead of Webpack / Laravel Mix, the resolve function may look something like this
    resolve: (name) => enableCodeSplitting ?

      // Enable code-splitting: Using Async-Await format
      (async function() {
        let page = await resolvePageComponent(
          `./Pages/${name}.vue`,
          import.meta.glob('./Pages/**/*.vue', { eager: false })
        );
        if (!page.default.layout) {
          page.default.layout = Layout
        }
        return page;
      })()

      :

      // Disable code-splitting / Enable eager-loading (opposite of lazy-loading / code-splitting)
      // Note: When you run `npm run build` (which in turn calls `vite build`), it will output one large JavaScript bundle
      (function() {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        let page = pages[`./Pages/${name}.vue`]
        if (!page.default.layout) {
          page.default.layout = Layout
        }
        return page
      })(),

    setup({ App, props, plugin }) {
      return createSSRApp({
        render: () => h(App, props),
      })
      .use(plugin)
      .component('Head', Head)
    },
  }),
);

[DCdeBrabander]

I have almost the exact same problem.
The errors pop-up the moment I enable SSR and try to render anything..
Even if I add empty (so simple and no-need-to-hydrate) <div/> to render the error pops up

[hotmeteor]

Also still seeing this issue.

[raimomo]

Still seeing this error on latest Inertia and Laravel version.