Theo's Typesafe Cult•2y ago

Next.js : Get server component data in client component

Hey, I'm trying the new app dir. It's pretty good, but I'm not sure how to get data from a server component and pass it to my XState machine? 🧐 For now the only way I found is to do it like this

// 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
)

4 Replies

sathuros•2y ago

You want your machine to be inside a client component. https://nextjs.org/docs/getting-started/react-essentials#client-components

Getting Started: React Essentials

An overview of essential React features for building Next.js Applications, including Server Components.

armand.salle•2y ago

Okay so I will be able to do some props drilling between my layout file which is a server component and my client component ?

async function Layout() {
  const machine = getMachine()

  return <ClientComponent machine={machine} />
}

function ClientComponent(machine) {
    useMachine(machine)
}

async function Layout() {
  const machine = getMachine()

  return <ClientComponent machine={machine} />
}

function ClientComponent(machine) {
    useMachine(machine)
}

sathuros•2y ago

Yep, you can send serializable props from server to client components

"use client";

function ClientComponent(machine) {
    useMachine(machine)
}

"use client";

function ClientComponent(machine) {
    useMachine(machine)
}

armand.salle•2y ago

aaah nice! Thank you 👍

Gaming

Programming

Next.js : Get server component data in client component