Page Loaders

Observable Framework documentation: Page Loaders Source: https://observablehq.com/framework/page-loaders

Page loaders are a special type of data loader for dynamically generating (or "server-side rendering") pages. Page loaders are programs that emit Markdown to standard out, and have a double extension starting with .md, such as .md.js for a JavaScript page loader or .md.py for a Python page loader.

By "baking" dynamically-generated content into static Markdown, you can further improve the performance of pages since the content exists on page load rather than waiting for JavaScript to run. You may even be able to avoid loading additional assets and JavaScript libraries.

For example, to render a map of recent earthquakes into static inline SVG using D3, you could use a JavaScript page loader as quakes.md.js:

import * as d3 from "d3-geo";
import * as topojson from "topojson-client";

const quakes = await (await fetch("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")).json();
const world = await (await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/land-110m.json")).json();
const land = topojson.feature(world, world.objects.land);