Nivo unable to SSR with Next 13+

[HeyParkerJ]

Describe/explain the bug

Attempting to render any Nivo charts (including non-responsive and Canvas) without the use client directive in Next 13+ results in an error:

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This StackOverflow post captured Next's reasoning for this, but the Next documentation in question has been updated and is no longer present.

https://stackoverflow.com/questions/74311376/using-react-context-with-nextjs13-server-side-components

In Next.js 13, context is fully supported within Client Components, but it cannot be created or consumed directly within Server Components. This is because Server Components have no React state (since they're not interactive), and context is primarily used for rerendering interactive components deep in the tree after some React state has been updated

From my research, it appears that the global wrapping of all Nivo components with MotionConfigProvider (irrespective of if the component intends to use transitions/animations) is the cause of this collision with Next 13+.

To Reproduce https://codesandbox.io/p/devbox/issue-example-yswjvy?file=%2Fapp%2Fexample%2Fpage.tsx%3A90%2C11

Expected behavior Nivo components are SSR compliant with NextJS. The Nivo FAQ https://nivo.rocks/faq/ states that they are SSR compliant, but ensuring that they are compliant with the most popular SSR framework would be very nice.

Additional context Thanks for looking at this! I understand that conforming to the ever changing requirements of various frameworks can be frustrating, but from my (incredibly) cursory glances, it does appear that we do not need to wrap canvas components in an animation purposed context. My specific use case (static report generation) does indeed require SSR and I cannot bypass with the use client directive. Thanks again!

[frapsMatheus]

I'm running into the same issue and would love to hear about a fix on this or maybe a workaround without using use client

[plouc]

Removing contexts from nivo would require quite a rewrite unfortunately. Yes, Next is one of the major frameworks out there, but I feel that they don't offer a proper alternative or suggest any alternative for library maintainers. I feel that's an issue that Next should solve, not each library. At least they should offer clear guidance on how to make third party libraries compatible with the framework without removing contexts or having to import next specific code.

[J4v4Scr1pt]

So what you are saying @plouc is that Nivo will never support SSR with NextJs?

[plouc]

@J4v4Scr1pt, what I'm saying is that for now I'm going to wait for proper guidance on how to do it, I guess other libraries will face this issue, so I suppose such guidance will eventually become available.

Also this is an open source project, so if someone wants to give it a try, it could happen earlier.

[J4v4Scr1pt]

Ok, do you know how to highlight this issue to them? I do not, but maybe create a ticket or something. Just to progress this and hopefully other libraries that has this issue can join the ticket. Just to make some progress on this, otherwise it feels like it's pointing fingers on NextJs and not taking action on a quite significant feature in Nivo.

I would love to contribute to this great library, but feel I lack the proper knowledge to do so.

Edit: I'm sorry any of the text above come off as offensive, was not! my intention!

[BEEFF]

What about the HTTP API ? That can still be used to render charts on the server? Or perhaps upgrade, to communicate with a NextJS backend ?

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[CarlosMartel7]

bump

[plouc]

@BEEFF, the http API isn't well maintained as it's barely used, but also, this would basically mean generating static SVG images, there would be no reconciliation between the server and client component trees.

[plouc]

Looking at next.js official guide on using contexts, they have to be wrapped in client components.

Since I'm not planning to remove contexts which I use for theming, animations, and tooltips, it does mean that nivo won't support next.js SSR unless it allows context for server components, but I guess there's a good reason for not supporting them.

I'm going to close this issue for now as I don't think I can do anything about it. However I'm open to suggestions.