Full example of using useHydrateAtoms in Next.js 14 with the app directory router

[jschuur]

I've seen the page on SSR, but I'm still not sure how to implement seeding a jotai atom on the server and hydrating it back on the client side via useHydrateAtoms.

There is a CodeSandbox embedded on that page, but it says the account is out of credits and trying to fork it says permission denied. The Vercel example doesn't use SSR and all the other examples I've found use the pages model.

I've also seen this thread and it's a bit confusing with all sorts of options.

This Stack Overflow thread seems to cover the gist of passing it from a server component to a client component via props, and their client component seems to call useHydrateAtom before useAtom, which makes sense, but if the client re-renders, this runs again:

"use client";

export function ChildComponent({ initialState }) {
  useHydrateAtoms([[myAtom, initialState]]);
  const [data, setData] = useAtom(myAtom);
  return <>{data.id}</>;
}

From other discussions, this sounds fine, but are there performance implications of this? Should I attempt to avoid this?

In short: seeing a short example repo would really help news users of this library like me.

[dai-shi]

but are there performance implications of this?

I don't think so. useHydrateAtoms is effective only for the first initialization and no-op afterwards.

seeing a short example repo would really help

Yeah, I agree. I can help reviewing if someone creates a small one.

[jschuur]

Yeah, I agree. I can help reviewing if someone creates a small one.

I successfully used a nested approach in this sample repo to share this across the entire app via layout.tsx. Is this a good solution?

'use client';

import { Provider } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import React from 'react';

import { helloAtom } from '@/store';

type Props = {
  initialState: string | null;
  children: React.ReactNode;
};

function StateWrapper({ initialState, children }: Props) {
  useHydrateAtoms([[helloAtom, initialState]]);

  return children;
}

export default function JotaiProvider({ initialState, children }: Props) {
  return (
    <Provider>
      <StateWrapper initialState={initialState}>{children}</StateWrapper>
    </Provider>
  );
}

I needed a second wrapper, because it wouldn't work if I called useHydrateAtoms at the same component level as jotai's own Provider wrapper. I.e. this did not work:

'use client';

import { Provider } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import React from 'react';

import { helloAtom } from '@/store';

type Props = {
  initialState: string | null;
  children: React.ReactNode;
};

export default function JotaiProvider({ initialState, children }: Props) {
  useHydrateAtoms([[helloAtom, initialState]]);

  return (
    <Provider>{children}</Provider>
  );
}

Of course, in this example, page.tsx is a client component, so that I can use useAtomValue.

However, if you wanted to keep page.tsx a server component and export metadata e.g., you can remove 'use client'; from it and client child components still get the hydrated state successfully.

[dai-shi]

Yeah, the first code snippet looks good to me.

I'm not sure what you mean by the last paragraph.

[theogravity]

Can I get an example on how to do this with use server in Next 14? I currently get:

Error: (0 , jotai_utils__WEBPACK_IMPORTED_MODULE_13__.useHydrateAtoms) is not a function

src/app/api-keys/page.tsx (17:19) @ ApiKeysPage

  15 |   const organizationId = cookies().get(ORG_ID_COOKIE_NAME) as unknown as string;
  16 |   const result = await ApiKeysApi.getApiKeys(organizationId);
> 17 |   useHydrateAtoms([[apiKeysAtom, result?.apiKeys ?? []]]);
     |                   ^
  18 |
  19 |   return (
  20 |     <PageFrame>

"use server";
import { apiKeysAtom } from "@/atoms/api-keys.atom";
import ApiKeyActionBar from "@/components/api-keys/ApiKeyActionBar";
import ApiKeyHeaderContent from "@/components/api-keys/ApiKeyHeaderContent";
import ApiKeysTable from "@/components/api-keys/ApiKeysTable";
import PageFrame from "@/components/common/page/PageFrame";
import PageHeader from "@/components/common/page/PageHeader";
import TablePagination from "@/components/common/table/TablePagination";
import { ORG_ID_COOKIE_NAME } from "@/config/constants.common";
import { ApiKeysApi } from "@/lib/api/ApiKeysApi";
import { useHydrateAtoms } from "jotai/utils";
import { cookies } from "next/headers";

export default async function ApiKeysPage() {
  const organizationId = cookies().get(ORG_ID_COOKIE_NAME) as unknown as string;
  const result = await ApiKeysApi.getApiKeys(organizationId);
  useHydrateAtoms([[apiKeysAtom, result?.apiKeys ?? []]]);

  return (
    <PageFrame>
      <PageHeader title="API Keys" subtitle="" rightColumn={<ApiKeyHeaderContent />} />
      <ApiKeyActionBar />
      <ApiKeysTable />
      <TablePagination />
    </PageFrame>
  );
}

[dai-shi]

Hooks like useHydrateAtoms don't run on server.
You need a client component under the tree and use the hook there.

[theogravity]

I thought the point of it was for to run on the server since the documentation points to it under SSR

https://jotai.org/docs/utilities/ssr

[dai-shi]

Yeah, the concept is very confusing. SSR is basically for rendering both server components and client components. With SSR, hooks in client components are just ignored. What you are doing is technically not related to SSR, and it can be called RSC, which runs only on the server (we can't render client components with RSC).

We should eventually have a docs about RSC, but the best practice is still uncertain.

[theogravity]

Thanks for the response. I did some research and found this article to resolve my misunderstandings. Makes sense why I couldn't do it now.

https://www.joshwcomeau.com/react/server-components/

[KagamiChan]

I also falled into this "useHydrateAtoms is not a function" error thinking this hydration method is a server side magic. I think it would be clearer to add 'use client' in the example code of the document https://github.com/pmndrs/jotai/blob/main/docs/utilities/ssr.mdx

[dai-shi]

Hm, instead of adding the directive in the example code, can you add a warning section? Would be happy to take a PR.

[KagamiChan]

please help review #2761