Full SSR support

[jaulz]

Description

The library still uses window in some places and thus SSR will fail.

Suggestion

Maybe we can add a getLocation option to the config that will return window.location by default. Having that one could easily pass a static location to Ziggy while using SSR and thus it wouldn't fail.

Alternatives

n/a

[aarondfrancis]

I don't think it requires window.

I've got a full Inertia + SSR demo working with no changes to Ziggy. Basically you need Inertia to pass all the Ziggy config to the SSR function, and then redefine your route function to use it.

In PHP, add your routes to the page.

$page['ziggy'] = (new Ziggy)->toArray();

In your SSR, pull ziggy off the payload:

import route from 'ziggy';

return await createInertiaApp({
        page: event,
        render: renderToString,
        resolve: (name) => require(`./Pages/${name}`),
        setup({app, props, plugin}) {
            return createSSRApp({
                render: () => h(app, props),
            }).use(plugin).mixin({
                methods: {
                    // Pull the ziggy config off of the event.
                    route: (name, params, absolute, config = event.ziggy) => route(name, params, absolute, config),
                },
            })
        },
    });

You'll also need to alias ziggy in your webpack config:

const path = require('path')
const mix = require('laravel-mix')

require('laravel-mix-merge-manifest')

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
        },
    }
})

[jaulz]

Yep, thanks but that's more or less clear. However, you cannot use current() for example. See

ziggy/src/js/Router.js

Lines 72 to 74 in 147804d

	const url = this._config.absolute
	? window.location.host + window.location.pathname
	: window.location.pathname.replace(this._config.url.replace(/^\w*:\/\/[^/]+/, ''), '').replace(/^\/+/, '/');

So that's why I think a configuration possibility would be fine.

[aarondfrancis]

Yeah thats true, current doesnt work at the moment

[jaulz]

If one of the maintainers agrees, I could raise a PR but without their agreement on the approach I'm reluctant 😉

[aarondfrancis]

Yeah ideally the location would come from the config or the window, in that order.

[aarondfrancis]

@jaulz here's a workaround for now:

import Router from 'ziggy/Router';

exports.handler = async function (event) {
    return await createInertiaApp({
        page: event,
        setup({app, props, plugin}) {
            return createSSRApp({
                render: () => h(app, props),
            }).use(plugin).mixin({
                methods: {
                    // Pull the ziggy config off of the event.
                    route: (name, params, absolute, config = event.ziggy) => {
                        const router = new Router(name, params, absolute, config);

                        let original = router.current;

                        router.current = function (name, params) {
                            global.window = {
                                location: new URL(event.ziggy.url)
                            }

                            let result = original.call(this, name, params);

                            global.window = undefined;

                            return result;
                        }

                        return name ? router.toString() : router;
                    },
                },
            })
        },
    });
}

[bakerkretzmar]

I'm definitely open to a PR that addresses this! Is it basically just replacing window with some kind of getLocation() function like you mentioned, or is there more to it?

[aarondfrancis]

@bakerkretzmar reading it off of the config and then falling back to the window would be great for me!