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');
}