Nivo/Line in Next React Components

[caiocinel]

Recently I was bothered that the charts take almost 2 seconds longer to load than the page itself, as I currently use the "use client" directive at the top of my file that exports the function to return the chart, I did this because when I don't put it The exception of "createContext only works in Client Components" occurs, I saw in the FAQ that Nivo supports SSR, but how can I make this work?

My Code:

import { nFormatter } from '@/lib/utils';
import { LineSvgProps, ResponsiveLine } from '@nivo/line'


export default function LineChart(props: LineSvgProps) {
    return <ResponsiveLine
        yFormat={function (e) { return nFormatter(e) }}
        axisLeft={{
            format: function (e) { return nFormatter(e) }        
        }} 
        {...props} 
    />
}

[plouc]

nivo supports server side rendering, there's even a static HTTP API for rendering charts statically (experimental package), however I don't know how Next.js handle this, I have a very limited experience with Next.js.

[plouc]

Another major problem is that you cannot use responsive components, because there's no way to know the dimensions server side.