[SSR] Recoil doesn't work server side with Next.js 13 #2082

leonbe02 · 2022-10-28T01:33:08Z

The Gist

When using Recoil + Next.js 13, I'm encountering an error while pre-rendering the page server side. The app works as expected client side though so no issue there, just when Recoil is used during server side pre-render.

The Error

TypeError: batcher is not a function
    at MutableSnapshot.batchUpdates [as _batch] (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:3447:3)
    at eval (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:3981:12)
    at eval (webpack-internal:///(sc_client)/./app/RecoilProvider.tsx:17:9)
    at Snapshot.eval [as map] (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:3749:7)
    at freshSnapshot (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:3939:45)
    at initialStoreState (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:4397:20)
    at eval (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:4548:187)
    at useRefInitOnce (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:4078:19)
    at RecoilRoot_INTERNAL (webpack-internal:///(sc_client)/./node_modules/recoil/cjs/index.js:4548:19)
    at renderWithHooks (node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7621:16)

The Environment

next: 13.0.0
react: 18.2.0
react-dom: 18.2.0
recoil: 0.7.6

The Code

// app/layout.tsx

'use client';

import RecoilProvider from './RecoilProvider';

export default function RootLayout(
  { children }: { children: JSX.Element }
) {
  return (
    <html lang="en-us">
      <head>
        <title>Next 13 + Recoil Example</title>
      </head>
      <body>
        <RecoilProvider locale="en-us">{children}</RecoilProvider>
      </body>
    </html>
  );
}

// app/atoms/i18n.tsx

'use client';

import { atom } from 'recoil';

export const locale = atom({
  key: 'locale',
  default: 'en-us',
});

// app/page.tsx

'use client';

import { useRecoilValue } from 'recoil';
import * as i18n from './atoms/i18n';

export default function Home() {
  const locale = useRecoilValue(i18n.locale);

  return (
    <main>
      <p>The locale: {locale}</p>
    </main>
  );
}

// app/RecoilProvider.tsx

'use client';

import { useCallback } from 'react';
import { RecoilRoot, SetRecoilState } from 'recoil';
import * as i18n from './atoms/i18n';

export default function RecoilProvider({
  locale,
  children,
}: {
  locale: string,
  children: JSX.Element,
}) {
  const initializeState = useCallback(({ set }: { set: SetRecoilState }) => {
    set(i18n.locale, locale);
  }, [locale]);

  return (
    <RecoilRoot initializeState={initializeState}>
      {children}
    </RecoilRoot>
  )
}

The text was updated successfully, but these errors were encountered:

shifenhutu · 2022-10-29T14:41:19Z

same here

Soumajit2004 · 2022-11-01T13:01:46Z

It works for me if i use "use client at top" but doesn't work when i use server components can anyone explain

If i use "use client" in layout.js does it means the child components will be rendered in client

398noe · 2022-11-02T09:31:38Z

same for me :(

tpatalas · 2022-11-02T13:47:41Z

Just finished migrating one of my projects to 13. This is what I found:

All work fine as long as components using Recoil hooks have the directive 'use client'. That includes all the child components.
Using the 'use client' directive in layout ONLY will fail to load as mentioned above.
Now fetching with atomEffect works without turning off SSR through the dynamic import module, but will fetch twice... except the one pre-fetching with useRecoilCallback.
Does not need to use the 'use client' directive to atoms/selectors/custom hook using useRecoilCallback if they are in separate files. It is fine if the client directive is properly used within the component.

All work is the same as Next12 on my side except for some non-Recoil-related errors, such as some 'Modules are not found.' This is a known issue, I believe.

Next13's app directory is far from ready to use, and I will skip using it until it becomes stable.

leonbe02 · 2022-11-02T19:16:04Z

Upon further investigation, the issue appears to be specific to using the initializeState property on RecoilRoot. If I remove the function that initializes the atom, the page renders server side just fine. When I pass in a function and attempt to initialize the state, I get the batcher is not a function error.

leonbe02 · 2022-11-03T18:35:02Z

I've pinpointed the issue I believe to the usage of unstable_batchedUpdates from react-dom: https://github.com/facebookexperimental/Recoil/blob/main/packages/recoil/core/Recoil_Batching.js#L14

Nextjs appears to use the ReactDOMServerRenderingStub during SSR which does not export the unstable_batchedUpdates function.
https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L1106-L1115

Is that batchedUpdates function needed during SSR for Recoil? With React 18+, I believe all setState operations are batched automatically so my guess is it's not needed at all if you're using the latest React.

When I remove the unstable_batchedUpdates import and the batcher(() => ...) function from that Recoil_Batching.js file, everything works fine

kensoz · 2022-11-08T07:16:32Z

same here in SSG

…g SSR (facebookexperimental#2086) Summary: Resolves facebookexperimental#2082 Pull Request resolved: facebookexperimental#2086 Reviewed By: wd-fb Differential Revision: D41054948 Pulled By: drarmstr fbshipit-source-id: eb421deb5a84e9ff9390a1a8d88b28c720765cb1

leonbe02 · 2022-12-05T18:50:09Z

@drarmstr Any estimate on when this change will be released in a new NPM version?

devcaeg · 2022-12-28T15:30:14Z

Any news about not being able to initialize Recoil with data obtained in SSR in Next.js 13?

andreisoare · 2023-01-13T21:47:41Z

@drarmstr would you be able to help make a release that includes this fix? Still blocked by this. Or is there someone else who can help? Thank you!

rootical · 2023-02-08T12:39:35Z

Another vote for a release...

leonbe02 · 2023-02-16T03:19:01Z

Has this project died or something? There hasn't been a new version released since October of last year. I know Facebook had layoffs but I didn't realize they laid off the entire team behind Recoil...

jephjohnson · 2023-02-24T17:39:49Z

Any updates on this? Same Issues

Mng12345 · 2023-02-26T13:54:13Z

Same for me. Does it mean that the component has a head line with "use client" would not be rendered in the server side?

RizqiSyahrendra · 2023-02-27T02:30:12Z

for this issue, I ended up manually waiting the client ready before rendering from recoil state, I did this because the content I was rendering is not required to be SSR

…g SSR (#2086) Summary: Resolves facebookexperimental/Recoil#2082 Pull Request resolved: facebookexperimental/Recoil#2086 Reviewed By: wd-fb Differential Revision: D41054948 Pulled By: drarmstr fbshipit-source-id: eb421deb5a84e9ff9390a1a8d88b28c720765cb1

The issue due to facebookexperimental/Recoil#2082

khashayarghajar · 2023-03-20T10:00:33Z

any news ?

DjibrilM · 2023-04-18T14:00:31Z

Just finished migrating one of my projects to 13. This is what I found:

All work fine as long as components using Recoil hooks have the directive 'use client'. That includes all the child components.

Using the 'use client' directive in layout ONLY will fail to load as mentioned above.

Now fetching with atomEffect works without turning off SSR through the dynamic import module, but will fetch twice... except the one pre-fetching with useRecoilCallback.

Does not need to use the 'use client' directive to atoms/selectors/custom hook using useRecoilCallback if they are in separate files. It is fine if the client directive is properly used within the component.

All work is the same as Next12 on my side except for some non-Recoil-related errors, such as some 'Modules are not found.' This is a known issue, I believe.

Next13's app directory is far from ready to use, and I will skip using it until it becomes stable.

then why should we use Nextjs if we shall end up turning everything into a client component?

drarmstr · 2023-04-24T19:18:56Z

Fixed with #2086 and released with 0.7.7

elmcapp · 2023-05-17T03:18:08Z

This is not an issue. The way that Next.js works is server-side first. You can't just wrap the app in the <RecoilRoot> You do have to have use the follow "use client" however you have to put it in a wrapper component if you are using the app directory. According to Next.js state including state management must be handled on the client as there is no way to have state on the server side. Below is a working example that works for me

Create a wrapper file called RecoilRootWrapper.js

"use client";

import React from "react";
import { RecoilRoot } from "recoil";

function RecoilRootWrapper({ children }) {
  return <RecoilRoot >{children}</RecoilRoot>;
}

export default RecoilRootWrapper;

In the app directory edit the layout.tsx or layout.js file

- src/
  - app/
    - pages.tsx
    - layout.tsx

layout.tsx file should look like this:

import RecoilRootWrapper from "@/wrappers/RecoilRootWrapper";
import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};

export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
   <html lang="en">
     <body className={inter.className}>
       <RecoilRootWrapper>{children}</RecoilRootWrapper>
     </body>
   </html>
 );
}

By doing this we put the Recoil provider on the client (browser) and anything that is not marked with "use client" will be rendered as server side. You can not add "use client" to the layout.tsx or layout.js, page.tsx or page.js files

MattSteedman · 2023-06-08T07:40:01Z

This is not an issue. The way that Next.js works is server-side first. You can't just wrap the app in the <RecoilRoot> You do have to have use the follow "use client" however you have to put it in a wrapper component if you are using the app directory. According to Next.js state including state management must be handled on the client as there is no way to have state on the server side. Below is a working example that works for me

Create a wrapper file called RecoilRootWrapper.js
"use client";

import React from "react";
import { RecoilRoot } from "recoil";

function RecoilRootWrapper({ children }) {
  return <RecoilRoot >{children}</RecoilRoot>;
}

export default RecoilRootWrapper;
In the app directory edit the layout.tsx or layout.js file
- src/
  - app/
    - pages.tsx
    - layout.tsx
layout.tsx file should look like this:
import RecoilRootWrapper from "@/wrappers/RecoilRootWrapper";
import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};

export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
   <html lang="en">
     <body className={inter.className}>
       <RecoilRootWrapper>{children}</RecoilRootWrapper>
     </body>
   </html>
 );
}
By doing this we put the Recoil provider on the client (browser) and anything that is not marked with "use client" will be rendered as server side. You can not add "use client" to the layout.tsx or layout.js, page.tsx or page.js files

Although this might work as a hack there are some files or compomponents you want server-side so wont this wrapper essentially put all those {children} in the clientside in your layout.tsx file

elmcapp · 2023-06-08T08:26:33Z

@MattSteedman Nope even if you put it as a wrapper any child components will still be server unless you use "use client" in each component. This is not a hack or workaround. Recoil is state management tools and anything that use state must be rendered on the client.

facebookexperimental/Recoil#2082 (comment) recoil과 ssr 충돌 해결

Yedidya10 · 2023-08-12T01:16:07Z

Hi, There is another issue happening because of SSR

If I want to use the effects property, even though I specify 'use client' in the component I wrap in <RecoilRoot>, I still get an error:

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Is there a solution for this, or is there a PR about it?

import { AtomEffect, atom } from 'recoil'

export type ThemeMode = 'light' | 'dark'

const localStorageEffect =
  (key: string): AtomEffect<ThemeMode> =>
  ({ setSelf, onSet }) => {
    // Retrieve the value stored at the specified key
    const stored = localStorage.getItem(key)
    // Check if the value exists and is light or dark
    if (stored === 'dark' || stored === 'light') {
      // If the value is valid, the call the provided function setSelf which initializes the atom value
      setSelf(stored)
    }
    // Creates the callback triggered when the atom is changed
    onSet((value, _, isReset) => {
      if (isReset) {
        // If atom has been reset then remove it from local storage
        localStorage.removeItem(key)
      } else {
        // If value has changed then store the value in local storage
        localStorage.setItem(key, value || _) // the || is a fail-safe if for any reason value is null the value will revert to default
      }
    })
  }

const themeModeState = atom<ThemeMode>({
  key: 'themeModeState',
  default: 'light',
  effects: [localStorageEffect('themeMode')],
})

export default themeModeState

It should be noted that in (RootLayout) layout.tsx I do not use 'use client' because I use a server function:

async function getSession(cookie: string): Promise<Session> {
   const response = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/session`, {
     headers: {
       cookie,
     },
   })

   const session = await response.json()

   return Object.keys(session).length > 0 ? session : null
}

There is no recoil component on the layout.tsx page

bennidhamma · 2023-11-04T08:13:22Z

Is there any way to share recoil state across multiple recoil roots? This suggests no:

Multiple RecoilRoot's may co-exist and represent independent providers/stores of atom state; atoms will have distinct values within each root.

https://recoiljs.org/docs/api-reference/core/RecoilRoot/

Does this mean recoil state can only apply to a single client subtree of a next app? My use case is that I have a SSR app, with different tree nodes rendered on client using the 'use client' directive.

Server Component
 |     |     |
 A     B     C

Where child components A and C are client components. Is it possible to share recoil state between A and C? it seems like that could theoretically work - they are both in the same browser process after all....

(this seems like a pretty common use case for state - updating a navigation sidebar if a item is consumed / interacted, or a shopping cart count, etc....)

…g SSR (#2086) Summary: Resolves facebookexperimental/Recoil#2082 Pull Request resolved: facebookexperimental/Recoil#2086 Reviewed By: wd-fb Differential Revision: D41054948 Pulled By: drarmstr fbshipit-source-id: eb421deb5a84e9ff9390a1a8d88b28c720765cb1

drarmstr added help wanted Extra attention is needed server rendering labels Oct 31, 2022

drarmstr changed the title ~~Recoil doesn't work server side with Next.js 13~~ [SSR] Recoil doesn't work server side with Next.js 13 Oct 31, 2022

leonbe02 mentioned this issue Nov 4, 2022

Adding a fallback for when unstable_batchedUpdates is undefined during SSR #2086

Closed

youngminss mentioned this issue Dec 11, 2022

[#1] Next13 Migration & Enviroment Modify YAPP-Github/21st-ALL-Rounder-Team-1-Web#2

Closed

3 tasks

youngminss mentioned this issue Dec 19, 2022

[#1] Next13 Migration & Enviroment Modify YAPP-Github/21st-ALL-Rounder-Team-1-Web#3

Merged

3 tasks

hyochan added a commit to hyochan/github-stats that referenced this issue Mar 11, 2023

refactor: remove recoil

4d51adb

The issue due to facebookexperimental/Recoil#2082

drarmstr removed the help wanted Extra attention is needed label Apr 24, 2023

drarmstr closed this as completed Apr 24, 2023

Paperkeem mentioned this issue Jun 14, 2023

[Feat] YW2-22 provider 생성, TS 5.1 버전업 YAPP-Github/dangledangle-client#17

Merged

fnobi mentioned this issue Jul 5, 2023

Next13 (App Router)導入 fnobi/hinagata-next#59

Open

junhea added a commit to SWM-SMART/watchboard-front that referenced this issue Jul 13, 2023

✨ feat: RecoilRootWrapper

cb34d19

facebookexperimental/Recoil#2082 (comment) recoil과 ssr 충돌 해결

kay0829 mentioned this issue Aug 9, 2023

🎉 FE_2_기본세팅) FE 프로젝트 세팅 - next.js codestates-seb/seb45_pre_034#17

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SSR] Recoil doesn't work server side with Next.js 13 #2082

[SSR] Recoil doesn't work server side with Next.js 13 #2082

leonbe02 commented Oct 28, 2022 •

edited

Loading

shifenhutu commented Oct 29, 2022

Soumajit2004 commented Nov 1, 2022 •

edited

Loading

398noe commented Nov 2, 2022

tpatalas commented Nov 2, 2022

leonbe02 commented Nov 2, 2022

leonbe02 commented Nov 3, 2022 •

edited

Loading

kensoz commented Nov 8, 2022

leonbe02 commented Dec 5, 2022

devcaeg commented Dec 28, 2022

andreisoare commented Jan 13, 2023

rootical commented Feb 8, 2023

leonbe02 commented Feb 16, 2023

jephjohnson commented Feb 24, 2023

Mng12345 commented Feb 26, 2023

RizqiSyahrendra commented Feb 27, 2023

khashayarghajar commented Mar 20, 2023

DjibrilM commented Apr 18, 2023

drarmstr commented Apr 24, 2023

elmcapp commented May 17, 2023

MattSteedman commented Jun 8, 2023

elmcapp commented Jun 8, 2023

Yedidya10 commented Aug 12, 2023 •

edited

Loading

bennidhamma commented Nov 4, 2023 •

edited

Loading

[SSR] Recoil doesn't work server side with Next.js 13 #2082

[SSR] Recoil doesn't work server side with Next.js 13 #2082

Comments

leonbe02 commented Oct 28, 2022 • edited Loading

The Gist

The Error

The Environment

The Code

shifenhutu commented Oct 29, 2022

Soumajit2004 commented Nov 1, 2022 • edited Loading

398noe commented Nov 2, 2022

tpatalas commented Nov 2, 2022

leonbe02 commented Nov 2, 2022

leonbe02 commented Nov 3, 2022 • edited Loading

kensoz commented Nov 8, 2022

leonbe02 commented Dec 5, 2022

devcaeg commented Dec 28, 2022

andreisoare commented Jan 13, 2023

rootical commented Feb 8, 2023

leonbe02 commented Feb 16, 2023

jephjohnson commented Feb 24, 2023

Mng12345 commented Feb 26, 2023

RizqiSyahrendra commented Feb 27, 2023

khashayarghajar commented Mar 20, 2023

DjibrilM commented Apr 18, 2023

drarmstr commented Apr 24, 2023

elmcapp commented May 17, 2023

MattSteedman commented Jun 8, 2023

elmcapp commented Jun 8, 2023

Yedidya10 commented Aug 12, 2023 • edited Loading

bennidhamma commented Nov 4, 2023 • edited Loading

leonbe02 commented Oct 28, 2022 •

edited

Loading

Soumajit2004 commented Nov 1, 2022 •

edited

Loading

leonbe02 commented Nov 3, 2022 •

edited

Loading

Yedidya10 commented Aug 12, 2023 •

edited

Loading

bennidhamma commented Nov 4, 2023 •

edited

Loading