fix: make location configurable

[jaulz]

This PR will add full SSR support.

[jaulz]

@bakerkretzmar this is my suggestion for #431 😊 It would be great if you could have a look!
@aarondfrancis maybe also interesting for you 😊

[aarondfrancis]

Love it, this would do the trick!

…

On Fri, Jun 4, 2021 at 2:22 AM Julian Hundeloh ***@***.***> wrote: @bakerkretzmar <https://github.com/bakerkretzmar> this is my suggestion for #431 <#431> 😊 It would be great if you could have a look! @aarondfrancis <https://github.com/aarondfrancis> maybe also interesting for you 😊 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#432 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGXKCZBYWDDRYPXOWNLDPTTRB5LFANCNFSM46CGGLLQ> .

[aarondfrancis]

Here's a workaround for now: https://aaronfrancis.com/2021/using-ziggy-with-inertia-server-side-rendering

[bakerkretzmar]

This isn't strictly necessary, right? As long as we check for null/undefined when we access it below with something like this._config.location?.host?

[bakerkretzmar]

Does this need to be public? The config object should be all people need in order to configure this functionality, so let's make this private if possible. Should be as simple as renaming to get _location().

[bakerkretzmar]

Thanks a ton for this PR @jaulz, and for your post @aarondfrancis! This looks great to me, I'll wait for you to take a look at my questions and I'm just going to push up some formatting tweaks and then it should be good to go.

Am I right that after this PR, using Ziggy with Inertia and SSR would look something like this?

import route from 'ziggy';

export default async function (event) {
    return await createInertiaApp({
        // ssr stuff...
        setup({app, props, plugin}) {

            const Ziggy = { ...event.props.ziggy, location: new URL(event.props.ziggy.url) };

            return createSSRApp({
                render: () => h(app, props),
            }).mixin({
              methods: {
                  route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
              },
          })
        },
    });
}

[aarondfrancis]

Thanks a ton for this PR @jaulz, and for your post @aarondfrancis! This looks great to me, I'll wait for you to take a look at my questions and I'm just going to push up some formatting tweaks and then it should be good to go.

Am I right that after this PR, using Ziggy with Inertia and SSR would look something like this?

import route from 'ziggy';

export default async function (event) {
    return await createInertiaApp({
        // ssr stuff...
        setup({app, props, plugin}) {

            const Ziggy = { ...event.props.ziggy, location: new URL(event.props.ziggy.url) };

            return createSSRApp({
                render: () => h(app, props),
            }).mixin({
              methods: {
                  route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
              },
          })
        },
    });
}

Yes, I think so! And it's beautiful 😍

Thanks @bakerkretzmar!

[jaulz]

@bakerkretzmar thanks for cross checking and I incorporated your feedback 😊

[jaulz]

@bakerkretzmar do you think we could merge it in this state? Otherwise I am happy to rework it.

[bakerkretzmar]

Thanks a ton @jaulz!

[yashiroiori]

Thanks a ton for this PR @jaulz, and for your post @aarondfrancis! This looks great to me, I'll wait for you to take a look at my questions and I'm just going to push up some formatting tweaks and then it should be good to go.

Am I right that after this PR, using Ziggy with Inertia and SSR would look something like this?

import route from 'ziggy';

export default async function (event) {
    return await createInertiaApp({
        // ssr stuff...
        setup({app, props, plugin}) {

            const Ziggy = { ...event.props.ziggy, location: new URL(event.props.ziggy.url) };

            return createSSRApp({
                render: () => h(app, props),
            }).mixin({
              methods: {
                  route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
              },
          })
        },
    });
}

From where import "createSSRApp", I'm using inertiajs with react

[bakerkretzmar]

I think SSR is still in early access for Inertia sponsors only: https://inertiajs.com/server-side-rendering

[yashiroiori]

I think SSR is still in early access for Inertia sponsors only: https://inertiajs.com/server-side-rendering

Yes, but in examples are in this page from where import createSSRApp??

[bakerkretzmar]

I would guess something like import { createSSRApp } from '@inertiajs/inertia-vue3' but I'm not in early access so I'm not sure 😅

[heychazza]

Hey guys,

Thanks a ton for this PR @jaulz, and for your post @aarondfrancis! This looks great to me, I'll wait for you to take a look at my questions and I'm just going to push up some formatting tweaks and then it should be good to go.

Am I right that after this PR, using Ziggy with Inertia and SSR would look something like this?

import route from 'ziggy';

export default async function (event) {
    return await createInertiaApp({
        // ssr stuff...
        setup({app, props, plugin}) {

            const Ziggy = { ...event.props.ziggy, location: new URL(event.props.ziggy.url) };

            return createSSRApp({
                render: () => h(app, props),
            }).mixin({
              methods: {
                  route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
              },
          })
        },
    });
}

trying this, I am told event doesn't exist, has anything changed since for configuring SSR?

[anburocky3]

What is the equalent of using React?