This is part of huge story where I tried and failed at using InertiaJS’ server-side rendering.
Here is my app.jsx code:
import '../css/app.css';
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
hydrateRoot(el, <App {...props} />)
},
progress: {
color: '#4B5563',
},
});
console.log('starting client')…and here is my ssr.jsx code:
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { route } from '../../vendor/tightenco/ziggy';
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}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup: ({ App, props }) => {
global.route = (name, params, absolute) =>
route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
});
return <App {...props} />;
},
})
);
console.log('starting server')My vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.jsx',
ssr: 'resources/js/ssr.jsx',
refresh: true,
}),
react(),
],
});I am using Laravel 10 and I’ve put HandleInertiaRequests into Kernel as required with this version of Laravel.
npm run build compiles everything alright, but when I run php artisan inertia:start-ssr, nothing seems to actually get rendered server-side. I could verify this by looking into the Page Source on my browser.
I cannot seem to understand why that is. I’ve gone so mad that I’ve copy-pasted a lot of code from a laravel breeze template InertiaJS SSR project – to no avail.
Can somebody please diagnose my problem? Why is it not running like it should? What am I missing?
Any help would be greatly appreciated. Let me know if you need any other bits of code from my project.
Thank you so much.
2