Mismatch with useHydrateAtoms on next13 with appDir and RSC

[timfee]

Summary

With a Next 13 app directory structure like:

// layout.tsx
"use client"

import { Provider } from "jotai"
import type { PropsWithChildren } from "react"

export default function Layout({ children }: PropsWithChildren) {
  return <Provider>{children}</Provider>
}

// page.tsx
// a trivial wrapper server-side to render our client code

import Picker from "./picker"
import { getFreeBusyData } from "@/utils/scheduler/busy"
import { mapDatesToStrings } from "@/utils/scheduler/helpers"

export default async function Meet() {
  const start = new Date()
  const end = add(start, { days: 14 })

  // calls google API and returns result
  const busy = await getFreeBusyData({
    start,
    end,
  })

  return (
    <SchedulePicker
      busy={mapDatesToStrings(busy)}
      start={start.toDateString()}
      end={end.toDateString()}
    />
  )
}

// page.tsx

"use client"

import { atom, useAtom } from "jotai"
import { useHydrateAtoms } from "jotai/utils"
import { useEffect } from "react"

// actual read/write primitive atoms
export const startDateAtom = atom<Date | null>(null)
export const endDateAtom = atom<Date | null>(null)
export const timeZoneAtom = atom<string | null>(null)

export const durationAtom = atom(30)

export const selectedDateAtom = atom(addBusinessDays(new Date(), 1))
export const selectedTimeAtom = atom<DateInterval | null>(null)

// atom we'll write to once from our server component
export const busyTimesAtom = atom<DateInterval[] | null>(null)

// derived helper functions
export const potentialTimesAtom = atom((get) => {
  const start = get(startDateAtom)
  const end = get(endDateAtom)
  if (!start || !end) {
    return null
  }

  return createAvailability({
    start,
    end,
    duration: get(durationAtom),
  })
})

export const availabileTimesAtom = atom((get) => {
  const allSlots = get(potentialTimesAtom)
  const busySlots = get(busyTimesAtom)

  if (!allSlots || !busySlots) {
    return null
  }

  return availabilityByDate({
    availability: returnAvailableSlots({
      allSlots,
      busySlots,
    }),
  })
})

export const selectedDateAvailabilityAtom = atom((get) => {
  if (!get(selectedDateAtom)) {
    return null
  }
  const allTimes = get(availabileTimesAtom)
  if (!allTimes) {
    return null
  }
  const selectedDateTimes = allTimes[get(selectedDateAtom).toDateString()]
  if (!selectedDateTimes) {
    return null
  }
  return selectedDateTimes
})

export default function SchedulePicker({
  start,
  end,
  busy,
}: DateAsStringInterval & {
  busy: DateAsStringInterval[]
}) {
  const [busyTimes, setBusyTimes] = useAtom(busyTimesAtom)
  const [startDate, setStartDate] = useAtom(startDateAtom)
  const [endDate, setEndDate] = useAtom(endDateAtom)
  const [timeZone, setTimeZone] = useAtom(timeZoneAtom)

  // useHydrateAtoms([
  //   [busyTimesAtom, mapStringsToDates(busy)],
  //   [startDateAtom, new Date(start)],
  //   [endDateAtom, new Date(end)],
  //   [timeZoneAtom, Intl.DateTimeFormat().resolvedOptions().timeZone],
  // ])
  // 
  // This code, when uncommented, causes hydration mismatches. 

  useEffect(() => {
    setStartDate(new Date(start))
    setEndDate(new Date(end))
    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
    setBusyTimes(mapStringsToDates(busy))
  }, [])

  return (
    <>
      <RequestForm />
      <div className='flex justify-between space-x-8 mx-auto'>
        <Timezone />
        <Duration />
      </div>
      <section>
        <Calendar />
      </section>
      <aside suppressHydrationWarning>
        {selectedDateAvailability.map(({ start, end }) => {
        const startString = formatLocalTime(start, { timeZone })
        const endString = formatLocalTime(end, {
          timeZone,
          timeZoneName: "short",
        })

        return (<>{startString} - {endString}</>)
        })}
      </aside>
    </>
  )
}

When using useHydrateAtoms, I was getting server / client mismatch errors (in this case I was using suppressHydrationWarning because timezones will intentionally differ).

Even when I was so bold as to add a typeof window === 'undefined' ? <></> : <ActualCode> to the return statement, it still would complain.

But when I use useEffect, it works.

There are a few things in play:

1. The present-state guidance for Next.js seems to differ between the docs, on-site examples, and Vercel examples (e.g. some docs suggest using , others omit it).
2. There is this particular issue (maybe I'm also doing something wrong, in fact -- I probably am :)).
3. The ultimate design I was trying to achieve was to set an atom once in a render function that would get params from a servercomponent. If there was some sort of isomorphic way of accessing atoms, I'd probably just set this variable server side, for instance.

Anyhoo -- thanks for reading through this far :-)

[dai-shi]

The present-state guidance for Next.js seems to differ between the docs, on-site examples, and Vercel examples (e.g. some docs suggest using , others omit it).

I wish someone can help on it. Can anyone?

[timfee]

The present-state guidance for Next.js seems to differ between the docs, on-site examples, and Vercel examples (e.g. some docs suggest using , others omit it).

I wish someone can help on it. Can anyone?

I'm not entirely sure what the recommended approach should be, but I'm happy to try and help write it up if you're able to provide some high-level pointers! :)

[dai-shi]

We are still exploring the best practice. Happy to help, but I'm still learning, so your help is appreciated.

At high level:

• For RSCs, "use client" is a must for client states to avoid server rendering.
• For SSR, useHydrateAtoms should work to avoid hydration mismatch.
• Otherwise, <ClientOnly> wrapper would do.

  jotai/docs/utilities/storage.mdx

  Line 50 in bf2ceec

  The suggested workaround for this issue is to only render the content dependent on the `storedValue` client-side by wrapping it in a [custom `<ClientOnly>` wrapper](https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions), which only renders after rehydration. Alternative solutions are technically possible, but would require a brief "flicker" as the `initialValue` is swapped to the `storedValue`, which can result in an unpleasant user experience, so this solution is advised.

[timfee]

We are still exploring the best practice. Happy to help, but I'm still learning, so your help is appreciated.

I'm also still learning :-) So I'm glad to explore together and see what we can do. Thanks for the pointers, I'll look into it more tomorrow!

[timfee]

I should add that the specific thing I'm stuck on and can't seem to resolve is the hydration errors that come into play when:

• we use useHydrateAtoms
• we have values (like dates and times) that we expect to differ between server and client

If there's anything that stands out in this use case I can investigate, I'd love some pointers!

[wootra]

I looked at your code and found your selectedDateAtom is initialized in the client rendering time with different time from the server. (new Date() will return different value). it is derived through selectedDateAvailability.map... line, and it is trying to make a different data from server data.
To prevent the hydration difference, try not to render selectedDateAvailability.map... part until the client hydration is finished.

And there is some more points that may help you below:

Not sure if my method is one of the best practice, but I am following this practice to avoid server/client mismatch. Hope this helps.

1. leave layout/page.jsx as server component as possible. push the client components as a "leaf" component. it is usually recommended for the performance reason.
2. pass all the server generated values into client components through props. At this moment, all props has to be serializable. in the other word, you should consider if the object should be reverted by JSON.parse(JSON.stringify(serializableObj)).
3. I made this wrapper and use it to prevent hydration mismatch. so far so good.

export const useMounted = (onMounted, onUnmounted)=>{
   const [mounted, setMounted] = useState(false);
   useEffect(()=>{
     onMounted && onMounted();
     setMounted(true);
     return ()=>{
       onUnmounted && onUnmounted();
     });
   }, []);
  return mounted;
}

// in the code
"use client";
...
const MyComponent = ()=>{
   const mounted = useMounted();
   return !mounted ? null : <div>mycomponent</div>
}