1

I enabled the SSR in InertiaJS and am now facing an issue on when the SSR returns app.blade.php without .tsx file content and then renders it the client side on. It causes the "Hydration failed because the server rendered HTML didn't match the client" error.

Logs don't show any error. npm run build, npm run dev, php artisan inertia:start-ssr and php artisan serve also don't show any errors.

In inertia.php ssr config enabled and 'http://127.0.0.1:13714' URL accessible with status NOT_FOUND.

I have used Laravel 12 official starter kit with React and SSR options.

app.tsx


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

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot, hydrateRoot } from 'react-dom/client';
import { initializeTheme } from './hooks/use-appearance';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(
        `./pages/${name}.tsx`,
        import.meta.glob('./pages/**/*.tsx')
    ),
    setup({ el, App, props }) {
        hydrateRoot(el, <App {...props} />)
    },
    progress: {
        color: '#4B5563',
    },
});

// This will set light / dark mode on load...
initializeTheme();

ssr.tsx

import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import ReactDOMServer from 'react-dom/server';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(
            `./pages/${name}.tsx`,
            import.meta.glob('./pages/**/*.tsx')
        ),
        setup: ({ App, props }) => {
            return <App {...props} />;
        },
    }),
);

pages/home.tsx

export default function Home() {
    return (
        <>
            <div></div>
        </>
    )
}

HomeController.php

public function index(): \Inertia\Response
{
    return Inertia::render('home');
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.