Hacker News Reader

How well does this work in SSG (static sites)? It would be cool to use this with Astro but not if it introduces client side content layout shift due to it not being SSG capable.

View on HN

I’ve updated the Getting started guide to give examples of both client- and server-side rendering, and there are links to CodeSandbox for code you can copy.

React: https://observablehq.com/plot/getting-started#plot-in-react

Vue: https://observablehq.com/plot/getting-started#plot-in-vue

As I mentioned in my other comment, this documentation site is built with VitePress, which is SSG, and we use a Vue component to render the plots statically so that you don’t get any reflow on the client.

Maybe I'm confused then, are these not components anyone can use? It's only for VitePress?

It’s a vanilla JavaScript library and you can use it with any framework or site generation tool that you wish. You’re welcome to copy the Vue component we wrote for our VitePress site, or to adapt the same technique for other frameworks. You can supply whatever DOM implementation you like using the document plot option as described here: https://observablehq.com/plot/features/plots

It doesn’t support SSR then, got it

In what sense? All the examples on the Plot documentation site are server-side rendered?

Reply on news.ycombinator.com