SSR for React; adapter differences between React + Vue

Discussed in https://github.com/inertiajs/inertia/discussions/1081

<div type='discussions-op-text'>

^{Originally posted by ZeoKnight February 4, 2022} Having read @aarondfrancis comments here https://github.com/tighten/ziggy/issues/431 and useful blog post https://aaronfrancis.com/2022/using-ziggy-with-inertia-server-side-rendering for dealing with global scope window issues.

How do we approach this in React? the features available within the vue adaptor simply aren’t present in the react adaptor?

#Vue adaptor
import {createInertiaApp} from '@inertiajs/inertia-vue3'
createServer((page) => createInertiaApp({
    page,
    render: renderToString,
    resolve: name => require(`./Pages/${name}`),
    setup({app, props, plugin}) {
        const Ziggy = {
            // Pull the Ziggy config off of the props.
            ...props.initialPage.props.ziggy,
            // Build the location, since there is
            // no window.location in Node.
            location: new URL(props.initialPage.props.ziggy.url)
        }
 
        return createSSRApp({
            render: () => h(app, props),
        }).use(plugin).mixin({ 
            methods: {
                route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
            },
        })
    },
}))

#React Adaptor
import {createInertiaApp} from '@inertiajs/inertia-react'
createServer((page) => createInertiaApp({
  page,
  render: ReactDOMServer.renderToString,
  resolve: name => require(`./Pages/${name}`),
  setup: ({ App, props }) => <App {...props} />,
}))

Note the setup method does not have plugins or uses a helper method createSSRApp - react setup simply returns the component + props.

</div>

[rdgout]

To offer another solution: I followed parts of @aarondfrancis his blog post but swapped out the end for this:

createServer(page => {
    globalThis.Ziggy = page.props.ziggy;

    return createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: name => require(`./Pages/${name}`).default,
        setup: ({ App, props }) => <App {...props} />,
    });
});

You see, ziggy by default already tries to find a ziggy instance in globalThis (see https://github.com/tighten/ziggy/blob/b3ebdd831a9da9dd9839c611f7aff7d82d1bf159/src/js/Router.js#L17). This allows me to use the regular route function from ziggy without having to write a wrapper. Hope it helps someone!

[vampiregrey]

@ZeoKnight @aarondfrancis I am not sure if this is the right approach but this worked for me.

import React, {useState} from 'react'
import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/inertia-react'
import createServer from '@inertiajs/server'
import route from "ziggy-js";

createServer((page) => createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: name => require(`./Pages/${name}`),
    setup: ({ App, props }) => {
        const Ziggy = {
            // Pull the Ziggy config off of the props.
            ...props.initialPage.props.ziggy,
            // Build the location, since there is
            // no window.location in Node.
            location: new URL(props.initialPage.props.ziggy.url)
        }

        global.route = (name, params, absolute, config = Ziggy) => route(name, params, absolute, config);

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