Next.js : Get server component data in client component

// layout.tsx
export default async function QuoteLayout({ children }: QuoteLayoutProps) {
  const machine = await getMachine() // get a serialized XState machine from a DB

  return (
    <div
      className="container mt-14 w-full max-w-[600px]"
      data-machine={machine}
    >
      {children}
    </div>
  )
}

// layout.tsx
export default async function QuoteLayout({ children }: QuoteLayoutProps) {
  const machine = await getMachine() // get a serialized XState machine from a DB

  return (
    <div
      className="container mt-14 w-full max-w-[600px]"
      data-machine={machine}
    >
      {children}
    </div>
  )
}

// machine.ts

const localStorageValue =
  typeof window !== "undefined"
    ? document
        .querySelector<HTMLDivElement>("[data-machine]")
        ?.attributes.getNamedItem("data-machine")?.value
    : null

const stateDefinition = localStorageValue
  ? JSON.parse(localStorageValue)
  : flowMachine.initialState

const previousState = State.create(stateDefinition)

export const FlowService = interpret(flowMachine).start(
  previousState as typeof flowMachine.initialState
)

// machine.ts

const localStorageValue =
  typeof window !== "undefined"
    ? document
        .querySelector<HTMLDivElement>("[data-machine]")
        ?.attributes.getNamedItem("data-machine")?.value
    : null

const stateDefinition = localStorageValue
  ? JSON.parse(localStorageValue)
  : flowMachine.initialState

const previousState = State.create(stateDefinition)

export const FlowService = interpret(flowMachine).start(
  previousState as typeof flowMachine.initialState
)