MobX and Next.js App Directory: Using enableStaticRendering in Server and Client Components #4539

codeBelt · 2025-03-25T16:55:59Z

codeBelt
Mar 25, 2025

I’m working on a Next.js app using the App Directory structure and trying to integrate MobX. I’m wondering about the best way to use enableStaticRendering in this context, especially when dealing with server and client components.

I have a few questions:

Should I wrap my entire app in a MobxProvider (which calls enableStaticRendering) in the layout.tsx file to handle SSR concerns for MobX?
Is this the recommended approach for preventing reactivity issues and memory leaks during SSR?
If my MobX store is instantiated inside a 'use client' component, do I still need to worry about enableStaticRendering, or is it only necessary for global stores that might be used during SSR?
How do I verify that enableStaticRendering is working correctly? Are there any debugging techniques or tools to ensure MobX isn't setting up unnecessary reactive dependencies during SSR?
Are there any other best practices or potential issues I should consider when using MobX with SSR in Next.js?

Here’s how I’m currently setting it up (I think it works 🤷):

`layout.tsx` (Root Layout)

'use server';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <MobxProvider>{children}</MobxProvider>
      </body>
    </html>
  );
}

`MobxProvider.tsx`

'use client';

import {enableStaticRendering} from 'mobx-react-lite';
import type {ReactNode} from 'react';

enableStaticRendering(typeof window === 'undefined');

type PropsType = {
  children: ReactNode;
};

export const MobxProvider = ({children}: PropsType) => {
  return <>{children}</>;
};

`MyComponent.tsx` (Example Usage of MobX Store)

'use client';

export const MyComponent = observer(() => {
  const [localStore] = useState(() => new MyStore());

  useEffect(() => {
    localStore.mount();

    return () => localStore.unmount();
  }, [localStore]);

  return <div>{/* ... */}</div>;
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

MobX and Next.js App Directory: Using enableStaticRendering in Server and Client Components #4539

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

MobX and Next.js App Directory: Using enableStaticRendering in Server and Client Components #4539

Uh oh!

codeBelt Mar 25, 2025

layout.tsx (Root Layout)

MobxProvider.tsx

MyComponent.tsx (Example Usage of MobX Store)

Replies: 0 comments

codeBelt
Mar 25, 2025

`layout.tsx` (Root Layout)

`MobxProvider.tsx`

`MyComponent.tsx` (Example Usage of MobX Store)