hello. I have a question about how to use jotai in server component, SSR environment in Next.js 13 and later versions.

[donggyu1998]

hello. I'm new to jotai,
so I have a question if this is the right way to go about it, so I'm posting it in Questions, Answers.

Here's what I'm trying to do

I also checked what akkadaska posted, but I don't understand.

1. Fetching data in a server component environment

page.tsx (server component)

const getFetchData = async() => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/5`);
    const data = await response.json();

    return data;
}

export default async function StudioTestSSRPage({
... 
const data = await getFetchData();
...

2. Before rendering, register the responded data with jotai so that subcomponents use the registered values.
   Using additional libraries : https://www.npmjs.com/package/jotai-ssr

page.tsx (server component)
        <HydrationBoundary
            hydrateAtoms={[[atomName, data]]}
        >
            <ClientComponentTest />
        </HydrationBoundary>

4. Use in subcomponents

"use client";

export default function ClientComponentTest() {
    
    const item = useAtomValue(atomName);
    console.log("ClientComponentTest")
    return (
        <div>
            ClientComponentTest
        </div>
    )
}

The error text is OK & the ClientComponentTest log is called 2 times in the browser console

Is this the correct way to do it ?
Detected multiple Jotai instances. It may cause unexpected behavior with the default store. #2044

[dai-shi]

Maybe @akkadaska can help?

[akkadaska]

@donggyu1998
Your usage is mostly correct, but there's one point that needs to be adjusted: you need to wrap the tree that contains HydrationBoundary with a Provider.
See https://www.npmjs.com/package/jotai-ssr#creating-a-safe-store-for-each-request
In your case, try wrapping the page component with Provider.

This should prevent the "Detected multiple Jotai instances." warning from appearing.