Support SSR

[cythrawll]

Summary

SSR is becoming more and more popular way to handle rendering, and having charts that can render both server and client side is really appealing for a number of reasons. While most SSR frameworks allow you to load client only libraries without SSR, apex in theory should be able to be used still client side only. (however in the case of react18s example, react-apexcharts seems to currently be broken as dynamic esm import seems to be broken there is a ticket for that already). However, making libs client side only is kinda a painful work around that isn't apparent when first using the library as docs don't mention anything about this gotcha.

API Changes

Make apex SSR friendly.

Intended Use Case

Better DX and UX when using apex charts in SSR frameworks like NEXT and Remix. Taking advantage of SSR frameworks caching and time to first render as well as other server side rendering benefits. I love using Apex, but this is probably going to cause me to abandon this in favor of other libraries.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rakirox]

+1

[oleg-savenok]

+1

[bf]

@cythrawll can you share what other libraries are like apexcharts but support SSR with frameworks like nuxt3?

[vignesh-gupta]

Guys, I think first @ApexCharts Please reopen the issue. and Any updates on this @bf @cythrawll. Because I'm using Next13 and I've added "use client" on top the file but still throws this error in my vs console-

- error node_modules/apexcharts/dist/apexcharts.common.js (6:379433) @ eval
- error ReferenceError: window is not defined
    at __webpack_require__ (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/webpack-runtime.js:33:42)
    at eval (./app/survey/result/page.tsx:9:74)
    at (ssr)/./app/survey/result/page.tsx (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/app/survey/result/page.js:457:1)
    at __webpack_require__ (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/webpack-runtime.js:33:42)
null

[robert-nash]

+1

[machour]

Would love to get SSR support on apex

[codesjedi]

+1

[sannajammeh]

Guys, I think first @apexcharts Please reopen the issue. and Any updates on this @bf @cythrawll. Because I'm using Next13 and I've added "use client" on top the file but still throws this error in my vs console-

- error node_modules/apexcharts/dist/apexcharts.common.js (6:379433) @ eval
- error ReferenceError: window is not defined
    at __webpack_require__ (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/webpack-runtime.js:33:42)
    at eval (./app/survey/result/page.tsx:9:74)
    at (ssr)/./app/survey/result/page.tsx (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/app/survey/result/page.js:457:1)
    at __webpack_require__ (/home/vignesh/Desktop/Code it/projects/hcl-form-proto/.next/server/webpack-runtime.js:33:42)
null

Next always renders "use client" on the server too, its just a way to tell Next to ship the JS to the client as well. You need to use Next.js dynamic import combined with {ssr: false}.

[abdulrehmanaxa1]

It create problem in Angular side as well, Got this issue

5:59:58 PM [vite] Error when evaluating SSR module /chunk-JAU2AQNA.mjs: |- ReferenceError: window is not defined at node_modules/apexcharts/dist/apexcharts.common.js

[Creative-Difficulty]

@apexcharts REOPEN

[daviddavid]

As @sannajammeh said, you can use apexcharts in NextJS by importing it like this:

import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

[BeSaRa]

any update for Angular Side ?? how to use it ApexChart with SSR ???? really it is very important feature

[ts-ben]

I am able to render and build react-apexcharts on the server in one route, but get a build error in another route.

for app/[[...analytics]] react-apexcharts is rendered on the server. I do get an error, but still able to build and render on the server. In another route app/dashboard, I get a build error and the build crushes. In this route, I have to use const ReactApexCharts = dynamic(() => import('react-apexcharts')) It makes the build work, but when I load the page, everything is rendered on the server, but the chart take a second to render, because it is rendered on the client. And it looks not very good.

It's weird because on the route app/[[...analytics]] the chart is rendered on the server together with the whole page, and I don't have to use dynamic loading.

What the hell is going on?

[phil-hudson]

Any update for React?

[WingsDevelopment]

As @sannajammeh said, you can use apexcharts in NextJS by importing it like this:

import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

This worked for me, but in production i don't see actual chart, only background... Any idea why?

[Creative-Difficulty]

Why is this even closed if it doesnt work for anyone?????

[Diyouf]

Does anyone know How can use the apexChart in Remix js ?

[BeSaRa]

any update here please about Angular SSR with Apexcharts

[kinan-almoalm]

+1

[IgnisDa]

I was using remix and got recharts working like so:

import { lazy, Suspense } from "react";

const ApexChart = lazy(async () => {
    const module = await import("react-apexcharts");
    return { default: module.default };
});

const MyChart = () => {
       return   <Suspense>
                <ApexChart
                    series={[
                        {
                            name: "series-1",
                            data: [30, 40, 45, 50, 49, 60, 70, 91],
                        },
                    ]}
                    options={{
                        chart: {
                            id: "apexchart-example",
                        },
                        xaxis: {
                            categories: [
                                1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999,
                            ],
                        },
                    }}
                    type="bar"
                    width="500"
                />
            </Suspense>
}

It is not typesafe but it works 🤷🏽‍♂️.

[TomazDimas]

+1