Disable SSR for some pages

[G33RY]

I realized that there is not documentation or anything for disabling SSR for some routes.

I have solved this with a workaround for now.

Add this before @inertiaHead in the blade layout file app.blade.php:

@php 
   if(Request::is('app/*')){ 
       $__inertiaSsrDispatched = true;
       $__inertiaSsrResponse = null;
   }
@endphp

@inertiaHead

If someone has a better alternative, please share!

[Slund]

This worked for me, thanks!

[valh1996]

Here is, I think, a better alternative :

Create a new HTTP Gateway where you want (e.g app folder):

namespace App\Inertia;

use Illuminate\Support\Str;
use Inertia\Ssr\HttpGateway;
use \Inertia\Ssr\Response;

class InertiaHttpGateway extends HttpGateway
{
    /**
     * Dispatch the Inertia page to the Server Side Rendering engine.
     *
     * @param array $page
     * @return Response|null
     */
    public function dispatch(array $page): ?Response
    {
        if (isset($page['url']) && Str::is('/dashboard*', $page['url'])) {
            return null;
        }

        return parent::dispatch($page);
    }
}

Last step, register the binding to your custom HTTP Gateway in your AppServiceProvider:

use App\Inertia\InertiaHttpGateway;
use Inertia\Ssr\HttpGateway;

class AppServiceProvider extends ServiceProvider
{
    public $bindings = [
        HttpGateway::class => InertiaHttpGateway::class,
    ]; 
}

Hope this helps.

[andrewizmaylov]

Respectos!! Muchas gracias!

[Mimachh]

That's brilliant, how did you find that?

[valh1996]

That's brilliant, how did you find that?

Honestly, I can't remember, but digging around on the github source code, you can learn a lot ;) !

[reinink]

My recommendation is to use the inertia.ssr.enabled config option for this, and then conditionally set it to false for certain endpoints. For example, I've done this to disable SSR for all Nova endpoints:

if (Request::is('nova/*')) {
    Config::set('inertia.ssr.enabled', false);
}

[Mimachh]

Interesting, and where do you put it ? In the ssr.js ?

[reinink]

In your Laravel app service provider 👍

[victor-falcon]

Maybe it's possible to create a Middleware to do this in some routes?

[oski646]

How does this apply to a Ruby application? We've followed all the suggestions provided, but unfortunately, none of them worked.

[stri8ed]

These solutions cause the page to log errors

Expected server HTML to contain a matching <div> in <div>.

I assume due to hydrateRoot

[mfazail]

Currently I'm doing a workaround like this (inspired by @valh1996 answer's) -

Folder and files structure

│   welcome.tsx
├───admin
│   │   dashboard.tsx
│   │   index.tsx
│   ├───auth
│   │       confirm-password.tsx
│   │   ...
├───customer.ssr  // 👈 every page inside this folder will render on server
│   │   home.tsx
│   └───auth
│           login.tsx
└───delivery
     │   index.ssr.tsx // 👈 only this page will render on server
     │   orders.tsx

Note: 👉 ssr on folder and file names

Prevent inertia from rendering page on server

// app\Http\Inertia\Gateway.php
use Inertia\Ssr\HttpGateway;
class Gateway extends HttpGateway
{
    public function dispatch(array $page): ?Response
    {
        // checks if page has `ssr` named on the
        // current page component
        if (
            isset($page) &&
            ! Str::contains($page['component'],'ssr')
        ) {
            return null;
        }

        return parent::dispatch($page);
    }
}

// app\Providers\AppServiceProvider.php
use Inertia\Ssr\HttpGateway;
use App\Http\Inertia\Gateway;
class AppServiceProvider extends ServiceProvider
{
    public $bindings = [
        HttpGateway::class => Gateway::class,
    ];
}

Let bundler know only build javascript pages for SSR which are marked ssr

// resources\js\ssr.tsx
createServer((page) =>
    createInertiaApp({
        ...
        resolve: (name) => resolvePageComponent(
            `./pages/${name}.tsx`,
            // 👇 pages for ssr
            import.meta.glob([
                './pages/**/*.ssr*/**/*.tsx',
                './pages/**/*.ssr.tsx',
            ]),
        ),
        setup: ({ App, props }) => {...},
    })
);

And at last hydrate or create root in client side setup

// resources\js\app.tsx
createInertiaApp({
    ...
    setup({ el, App, props }) {
        if (props.initialPage.component.includes('ssr')) {
            hydrateRoot(el, <App {...props} />);
        } else {
            createRoot(el).render(<App {...props} />);
        }
    },
    ...
});