Discussion: Provide jotai/nextjs utils

[Thisen]

We already provide some examples about how to use Jotai with Next.js and SSR in general.

This issue looks to start a discussion if it's possible for Jotai for provide a better story for using Jotai in a SSR scenario - We believe we could start with Next.js.

I believe this would be mostly useful in the scenario, where you have async atoms, which fetch their state using e.g. fetch.

This is mostly inspired Next.js story for react-query: https://react-query.tanstack.com/guides/ssr

Let me think what you think - Should we provide something, or should we just document how to with our current API for "hydration" of atoms.

[Aslemammad]

We have something like initialData in react-query, which works in Provider; I think we update it to work with provider-less mode. I think we can put it in 1-useAtom(atom, InitialData) or 2-atom.initialData, I think I prefer the first option.

1- const [data, setData] = useAtom(atom, initialData)
2- atom.initialData = {}

[aulneau]

I would agree, I think there is a lot of room for improvement and I bet it could be such that ssr can work kind of just out of the box, eg I define an atom that has an ability to fetch its own state, and it just works with loading the initial data out of the box.

[Thisen]

I was thinking along the same lines @aulneau, but I didn't want to come with any solutions, as this should be a discussion.

[Thisen]

Btw, I'm happy to work on any ideas that comes out of this.

[Aslemammad]

Let's do more discussions on that with @dai-shi and other folks; then, we'll work on it. Thanks for the issue!

[aulneau]

For sure :~) I don't mean to imply any correct solutions, and would be happy to help out too!

[Thisen]

I believe a great place to start would be getServerSideProps and getStaticProps and give them a simplistic API to hydrate atoms.

Are there other use cases I'm not thinking of?

[dai-shi]

Thanks for opening this issue up @Thisen .

Let me think what you think - Should we provide something, or should we just document how to with our current API for "hydration" of atoms.

I'm pretty sure there would be something to provide, but instead of thinking what is the thing, we would like to work on the best practices (especially because I'm not super familiar with next, yet). So the steps are:

1. Discuss in this issue
2. Improve docs and examples
3. And then, add a new util if it makes sense.

[dai-shi]

I think we update it to work with provider-less mode.

@Aslemammad well, think it like the provider is left for use cases such as nextjs. we don't need to support provider-less mode and it's probably impossible. See the related discussion in zustand for example. Besides, changing the core api is the least thing we'd like to do. Keep it minimalistic. Let's do things on top of the core.

[sandren]

Keeping the <Provider> component in Jotai's core API kind of already is supporting SSR in core. In light of that I think any API improvements related to Jotai usage in an SSR context should continue to be a part of core rather than new framework-specific utils, especially since Next.js is only one of several React-based frameworks that support SSR. 😀

[dai-shi]

jotai/nextjs would be very specific to nextjs depending on functions from nextjs. If there were any generic SSR utils, we should put them in jotai/utils.

[Nazzanuk]

So I'm working on a semi large site and we are using the current philosophy which seems to work for us. Would appreciate thoughts on this:

_app.tsx has a top level provider

// _app.tsx
import { JotaiNextProvider } from "app/JotaiNextProvider";

const App = ({ Component, pageProps }) => (
  <JotaiProvider pageProps={pageProps}>
    <Component {...pageProps} />
  </JotaiProvider>
);

export default App;

This provider is custom, it wraps the Jotai Provider and sets initial state to an atom (appPropsAtom) which can then be used to derive new atoms.

// JotaiNextProvider.tsx
import { Provider } from "jotai";
import { useEffect } from "react";
import { useUpdateAtom } from "jotai/utils";
import { appPropsAtom } from "app/appAtoms";

const JotaiContainer = ({ pageProps, children }) => {
  const setInitialProps = useUpdateAtom(appPropsAtom);

  useEffect(() => {
    setInitialProps(pageProps);
  }, [pageProps]);

  return <>{children}</>;
};

const JotaiNextProvider = ({ pageProps, children }) => (
  <Provider initialValues={[[appPropsAtom, pageProps]]}>
    <JotaiContainer pageProps={pageProps}>{children}</JotaiContainer>
  </Provider>
);

export { JotaiNextProvider };

Top level atom and derived atom

// appAtoms.tsx
import { atom } from "jotai";

// We can just derive atoms from this
const appPropsAtom = atom({});

// Derived atoms
const apiContentAtom = atom((get) => get(appPropsAtom)?.apiContent);
const otherApiContentAtom = atom((get) => get(appPropsAtom)?.otherApiContent);

export { appPropsAtom, apiContentAtom, otherApiContentAtom };

Wherever we need SSR content we pass it into the top level atom and the use it in the page or any components without having to prop drill

// pages/index.tsx
import { useAtomValue } from "jotai/utils";
import { apiContentAtom } from "appAtoms";

// Works for the other SSR functions as well
export async function getStaticProps() {
  const apiContent = await fetchFromApi();

  return { props: { apiContent } };
}

export default function IndexPage() {
  // Read the atom and it will have the correct data when SSR
  const apiContent = useAtomValue(apiContentAtom);

  return <div>SSR content: {apiContent}</div>;
}

sandbox example