[Question] Does it support server side rendering?

[ZeRego]

I want to render in the server a react page that includes a Vega chart. Is this possible?

At the moment the example code only returns an empty div.

<div style="width:100%;height:100%;min-height:300px"/>

Server

const html = renderToStaticMarkup(<VegaViz spec={vegaSpec}/>);

Component

const VegaViz = ({spec}: { spec: vega.Spec }) => {
    return (
        <Vega
            style={{
                width: '100%',
                height: '100%',
                minHeight: 300,
            }}
            spec={spec}
            renderer={'svg'}
        />
    );
};

[jardelva96]

Rendering a Vega chart on the server-side using React can be a bit tricky because Vega (and Vega-Lite) relies on browser-specific APIs (like the DOM) to render charts. The renderToStaticMarkup function from react-dom/server renders components to static HTML and doesn't execute any client-side code or lifecycle methods, which is why your Vega chart isn't appearing.

However, you can achieve server-side rendering (SSR) by using a workaround that involves pre-rendering the chart on the server and then hydrating it on the client.

[JakeAdler]

Like @jardelva96 said, vega-embed relies on browser APIs. This library is a thin wrapper around vega-embed so this issue is out of the scope of this library.