Server and client pages in the same app

[andresgutgon]

What?

Hi, I'm trying to have a Phoenix app that can have some pages rendered on the server and other pages rendered on the client

SSR page (ssr: true)

  def index(conn, _params) do
    conn
    |> assign_prop(:first_name, "Bob")
    |> render_inertia("HomePage", ssr: true)
  end

When the page is ssr: true no warning is shown in the browser

Client page (ssr: false)

Same controller but with ssr: false I get this error in the browser.
Makes sense but I don't know how to handle both cases

These are my entry points

// assets/js/app.tsx
import axios from 'axios'

import { createInertiaApp } from '@inertiajs/react'
import { hydrateRoot } from 'react-dom/client'

axios.defaults.xsrfHeaderName = 'x-csrf-token'

createInertiaApp({
  resolve: async (name) => {
    return await import(`./Pages/${name}/index.tsx`)
  },
  setup({ App, el, props }) {
    hydrateRoot(el, <App {...props} />)
  },
})

import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/react'
import type { Page } from '@inertiajs/core'

export function render(page: Page) {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: async (name) => {
      return await import(`./Pages/${name}/index.tsx`)
    },
    setup: ({ App, props }) => <App {...props} />,
  })
}

Is there a way to have both modes (SSR and SPA) by page without the hydration error? Maybe I'm missing something basic that I didn't read in the README, but I don't know what it is

[pkayokay]

I think you would need to update your ssr.jsx file to conditionally exclude the specific components you want to render client side only.

[andresgutgon]

But when is not server render the problem is that ssr.tsx is not invoked at all no?

[derrickreimer]

Great question @andresgutgon! The way I handle selectively applying SSR in my apps is to assign an ssr page prop (in addition to the ssr: true option passed to render_inertia), so that my createInertiaApp setup function can key off of that when applicable.

conn
|> assign_prop(:ssr, true)
|> render_inertia("MyPage", ssr: true)

createInertiaApp({
  resolve: async (name) => {
    return await import(`./pages/${name}.jsx`);
  },
  setup({ App, el, props }) {
    if (props.initialPage.props.ssr) {
      hydrateRoot(el, <App {...props} />);
    } else {
      createRoot(el).render(<App {...props} />);
    }
  },
});

Your ssr.jsx (or ssr.tsx) file can stay the same.

[andresgutgon]

Cool. I didn't check the internals of this package, but it would be cool if the option passed to render_inertia is passed to react as a prop. Something like a renderOptions prop.
How hard would that be?

[derrickreimer]

It wouldn't be technically difficult, but I'm be a little leery of invading the props in a way that doesn't align with the protocol. It might be worth pitching the Inertia team on adding a higher-level ssr attribute to the page object spec, something like:

{
  "component": "Event",
  "props": {
    "event": {
      "id": 80,
      "title": "Birthday party",
      "start_date": "2019-06-02",
      "description": "Come out and celebrate Jonathan's 36th birthday party!"
    }
  },
  "url": "/events/80",
  "version": "c32b8e4965f418ad16eaebba1d4e960f",
  "encryptHistory": true,
  "clearHistory": false,
  "ssr": true
}

[andresgutgon]

I like the idea!

[andresgutgon]

Hi @derrickreimer I opened the discussion in Inertia's repo
inertiajs/inertia#2259

Feel free to correct anything that you think is not clear or incorrect. Again thanks a lot for your work here!