Persistent layouts and shared data

[andresgutgon]

What?

Maybe this is possible somehow but I don't see how. Let's say I have this page

Docs:

• Persisted layouts
• Shared data

import { AppWrapper } from '@/Layouts/AppWrapper'
import MainLayout from '@/Layouts/MainLayout'
import { PageProps } from '@/types'

function DashboardPage(props: PageProps) {
  return (
    <AppWrapper {...props}>
      <h1 className='mb-8 text-3xl font-bold'>Dashboard</h1>
      <p className='mb-12 leading-normal'>
        Hey there! Welcome to Ping CRM, a demo app designed to help illustrate
        how
        <a
          className='mx-1 text-indigo-600 underline hover:text-orange-500'
          href='https://inertiajs.com'
          target='_blank'
        >
          Inertia.js
        </a>
        works with
        <a
          className='ml-1 text-indigo-600 underline hover:text-orange-500'
          target='_blank'
          href='https://react.dev/'
        >
          React
        </a>
        .
      </p>
    </AppWrapper>
  )
}

/**
 * Persistent Layout (Inertia.js)
 *
 * [Learn more](https://inertiajs.com/pages#persistent-layouts)
 */
DashboardPage.layout = (page: React.ReactNode) => (
  // 👉 Is there a way of having `currentPath` (a shared data) here? 👈
  <MainLayout title='Dashboard' children={page} />
)

export default DashboardPage

In this app I have a sidebar that has the main links of the app.

The page is SSR

This is the key part. I'm using a similar package to wayfinder to generate the URLs of my Phoenix app

This version of Wayfinder can tell if the current page (the one in the URL) is the one in one of the links in the sidebar. Would be something like this

import { home } from '@/actions/DashboardController'
// This is sub-component inside `<AppWrapper />` 
<MainMenuItem
  text='Dashboard'
  link={home.url({ currentPath })}
  icon={<CircleGauge size={20} />}
/>

home.url({ currentPath }) returns { path: string; isCurrent: true } and with that I decide how to style the link.

The problem I have is that I need to pass currentPath on the SSR page.

Before I had the sidebar in MainLayout but I don't see a way of passing props to persistent layouts. Is there one?

What I did instead is move it to an <AppWrapper /> but that defeats the goal of persistent layouts

While it's simple to implement layouts as children of page components, it forces the layout instance to be destroyed and recreated between visits. This means you cannot have persistent layout state when navigating between pages.

[andresgutgon]

Maybe for this case, having a dashboard is not critical to have the URLs of the links SSR, but for something more SEO focus is critical.

[RobertBoes]

Inertia gives you the current URL with usePage().url, also in SSR. See for example https://inertiajs.com/links#active-states and https://inertiajs.com/the-protocol#the-page-object

[andresgutgon]

Uhmm this sounds awesome. But I don't see how is set in the server. I see this
https://github.com/inertiajs/inertia/blob/master/packages/react/src/App.ts#L48

current.page comes from a useState

[RobertBoes]

Not sure what you mean, it's part of the Inertia protocol. Each navigation would have that property, each SSR render would receive that property as well.

For SSR the page would be passed along to the SSR server; https://github.com/inertiajs/inertia-laravel/blob/2.x/src/Ssr/HttpGateway.php#L22
This also contains the current URL https://github.com/inertiajs/inertia-laravel/blob/6e7606ffcc871dca1e55208ee8a4ceefeb51c22f/src/Response.php#L112

[RobertBoes]

Plus, you can access shared data using usePage() as well, you'd use usePage().props. This is also available in SSR. You could even inject the prop in a page component, although I'd generally avoid that, as the page isn't rendered with that prop, I'd only inject props that are specifically used to render that page.

[andresgutgon]

This is fantastic! Closing it

Thanks Robert 🙌

I can see SSR the URL