Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

just1po1nt0's avatar

Can't get Inertia SSR to work, using React and Laravel 10 stack.

I am struggling with implementing Inertia's SSR into my application. I tested on new Laravel applications and I'm getting same results - content is not rendering on server side. I checked by disabling JavaScript and it definitely isn't working.

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.url),
                });

            return <App {...props} />;
        },
    })
);

console.log('starting server')

here is my app.jsx code:

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

import React from 'react';
import { hydrateRoot, createRoot } 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 }) {
      createRoot(el).render(<App {...props} />);
    },
    progress: {
        color: '#e05847',
    },
});
console.log('starting client')`

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(),
    ],
});

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr && vite build && vite build --ssr --ssr"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-react": "^4.3.1",
        "axios": "^1.7.2",
        "bootstrap": "^5.2.3",
        "esbuild-loader": "^4.2.0",
        "laravel-vite-plugin": "^1.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.56.1",
        "vite": "^5.0.0",
        "vite-plugin-externalize-deps": "^0.8.0"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.11.1",
        "@inertiajs/react": "^1.2.0",
        "autosize": "^6.0.1",
        "jquery": "^3.7.1",
        "jsdom": "^24.1.0",
        "laravel-mix": "^6.0.49",
        "popstate-direction": "^1.0.0",
        "react-helmet": "^6.1.0",
        "react-router-dom": "^6.24.1"
    }
}

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The skeleton application for the Laravel framework.",
    "keywords": ["laravel", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "inertiajs/inertia-laravel": "^1.3",
        "laravel/framework": "^10.10",
        "laravel/sanctum": "^3.3",
        "laravel/tinker": "^2.8",
        "tightenco/ziggy": "^2.2"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "laravel/ui": "^4.5",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.1",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}

I am not seeing any changes that would indicate SSR is running, no error messages, no change of the code, nothing.

Does anyone have any suggestions?

0 likes
1 reply
nexxai's avatar

Not sure if this is the same problem you're having, but I posted how I got Inertia SSR w/ React working here

Maybe compare your config to that?

Please or to participate in this conversation.