search

observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.12k stars 84 forks source link

Server-Side Rendering (SSR) #931

Open jheer opened 4 months ago

jheer commented 4 months ago

Thanks for the great work on Framework!

For even faster (perceived) page loads it would be valuable to render initial views of charts and other content on the server, then "hydrate" them on the client once corresponding runtime cells are ready. For example, I'd like to publish static SVG as part of the initial page content, which can then be replaced with "live" content upon load.

I realize there be dragons here, especially with arbitrary code that may involve randomness, generators, or otherwise cause strange changes of content upon hydration, and so on. Nevertheless, I see a lot of value in being able to knowingly opt-in to SSR.

I imagine one would have to instantiate a runtime during server-side compilation then extract resulting content. We do something similar in Living Papers using Puppeteer to extract and screenshot runtime-generated content, though a lighter weight approach (e.g., using jsdom and node canvas?) may be preferable and cover common use cases.

It looks like some work in this direction is ongoing, though I'm not sure of the planned scope. So, just wanted to share a plug for this!

mbostock commented 4 months ago

Related #234 #141.

Fil commented 4 months ago

As a complement/alternative/easy first step, I would like to think about registering cell dimensions #933.

jaanli commented 4 months ago

Agreed! This would support very cool use cases, added a discussion as well:

https://github.com/observablehq/framework/discussions/855