Server-Side Rendering

Nuxt ECharts not only provides <VChart> which renders the chart dynamically in the browser with full functionality, but also offers components rendering charts on the server side which we may need in some specific scenarios:

• Reducing the FCP time and ensuring the chart is displayed immediately.
• Reducing code volume while complex interaction is required.

Server-Side SVG Rendering

<VChartIsland> is a Nuxt server component which renders an SVG chart based on its props. When its props update, this will result in a network request that will update the rendered SVG in place. Since it is static, no ECharts code needs to be loaded on the client side.

Since server components are rendered 'outside' the Vue component tree and don't contain JS on the client side, they don't have access to provide/inject. Thus we provide <VChartServer>, a wrapper component of <VChartIsland> which can inject data provided by its ancestor components.

Client Hydration

Lazy-Loading Full ECharts

We can have all ECharts functionality while still displaying the chart on the screen in a blink of an eye. If ssr is turned on, <VChart> will use <VChartServer> to render an SVG chart on the server to quickly output the first screen chart, and then on the client once <VChart> mounted in the browser, the same chart will be rerendered to achieve functionality from ECharts core.

Lightweight Client Runtime

Sometimes we don't need complex interactions implemented by the above solution, we can use VChartLight which hydrates the SVG rendered by the server via ECharts lightweight client runtime to achieve simple interactions like clicking and mouse-moving. The advantage is that the client no longer needs to load hundreds of KBs of ECharts code, it only needs to load a less than 4KB lightweight runtime code.

Summary

In this module, we introduced several different components. Let's summarize their respective applicable scenarios: