armand.salle Posts - Answer Overflow

armand.salle

•Created by armand.salle on 5/12/2023 in #questions

Next 13.4 problem with loading state after content is visible & hydration problem

Hey, I have a small app with Next 13.4 with Shadcn Ui 😍 it's really really good. But I'm also using XState with a provider that I init on my layout.tsx file because I save and read the machine from a DB (don't ask why I'm just trying things). As you can see on the video, when I navigate, the content is first shown with the right data, AND AFTER, the loading state from loading.tsx is shown... And I have an hydration problem... I fixed it with a dynamic import but it feels wrong. I'm using the "use client" directive on my page and layout. I found this article but it didn't help me much... https://nextjs.org/docs/messages/react-hydration-error Another question : How to get data from a server component and "add it" to react query as initial data ? 🧐

1 replies

TTCTheo's Typesafe Cult

•Created by armand.salle on 5/9/2023 in #questions

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
)

6 replies

TTCTheo's Typesafe Cult

•Created by armand.salle on 11/17/2022 in #questions

How do you handle loaders and 'flash' with TRPC?

Hey 👋 I'm working with the T3 stack and I'm bored about loaders everywhere. When the data is not cached, I need to show a loader or a skeleton for ≈ 1s, it feels slow and there is a lot of "layout shift". I didn't find a way to avoid them. Is full SSR the way to go? How do you handle that?

4 replies

TTCTheo's Typesafe Cult

•Created by armand.salle on 11/12/2022 in #questions

Next Auth not working in production only

14 replies

Gaming

Programming