SSR with Inetia JS

[zumbidoweb]

Trying to get the inerita ssr.js to render the initial state for React instant search and send it as props, as decribe here for Next and Express server. But I can not replicate it to inertia.

https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#appjs

[Haroenv]

Inertia does not have a node backend right? I'm not sure how it could be implemented. If you have an application that shows the setup clearly but doesn't yet have server side rendering working, we can have a look

[devidimitrov]

Any update on this ?

[Haroenv]

There has been no other questions about this. What did you try, where did you get stuck?

[jobyh]

Hi @Haroenv @zumbidoweb & @devidimitrov I was facing the same issue and now have this working. Just posting for any others who end up here. 🙂 RE: Node backend, yes Inertia does achieve SSR using a Node backend.

I’m using Laravel with React / TypeScript powered by Inertia so if you’re using Vue or Svelte you’ll need to adapt the examples but the principle should be the same.

The initial state render needs to be done in the setup method of the options object passed to createInertiaApp in the SSR entrypoint file e.g. resources/js/ssr.tsx

SSR Entrypoint

// resources/js/ssr.tsx

import Layout from './Pages/Layout'
import ReactDOMServer, { renderToString } from 'react-dom/server'
import { getServerState } from 'react-instantsearch'

createServer(page => {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: async name => {
      const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
      const page = pages[`./Pages/${name}.tsx`]

      // @ts-ignore
      if (page.default.layout === undefined) {
        // @ts-ignore
        page.default.layout = (page: React.ReactNode) => <Layout>{page}</Layout>
      }

      return page
    },
    setup: async ({ App, props }) => {
      props.initialPage.props.serverState = await getServerState(
        <App {...props} />,
        { renderToString },
      )

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

A gotcha when using TypeScript is that setup is flagged as an error because the Inertia types don’t include an async variant of the method; Inertia actually does support this. I think I’ll open a PR with them to propose correcting this shortly.

Below is the Layout component rendered both server & client side which consumes the rendered state:

Layout Component

// resources/js/Components/Layout.tsx

import * as React from 'react'
import { usePage } from '@inertiajs/react'
import algoliasearch from 'algoliasearch/lite'
import {
  InstantSearch,
  InstantSearchSSRProvider,
  InstantSearchServerState,
} from 'react-instantsearch'
import GlobalProps = App.Data.Pages.GlobalProps

interface LayoutProps {
  children: React.ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const { url, props } = usePage<GlobalProps & { serverState?: InstantSearchServerState }>()
  const searchClient = React.useMemo(
    () => algoliasearch(props.algolia.appId, props.algolia.searchKey),
    [props.algolia.appId, props.algolia.searchKey],
  )

  return (
    <InstantSearchSSRProvider {...props.serverState}>
      <InstantSearch
        key={url}
        searchClient={searchClient}
        indexName="your-index"
        initialUiState={props.searchState}
        future={{ preserveSharedStateOnUnmount: true }}
      >
          {children}
      </InstantSearch>
    </InstantSearchSSRProvider>
  )
}

Hope that helps!