Server-Timing observability

This request

span	duration (ms)
db.query	40.0
cache.get	19.0
render-prep	0.0
total	59.0

Verify from curl

curl -sI https://demo.bext.dev/examples/server-timing | grep -i server-timing

Source

// Loader does a few measured spans, returns a Response wrapping
    // the rendered HTML, with the Server-Timing header threaded through
// bext's response pipeline. Chrome devtools' Network tab shows each
// span as a labeled bar under the request's "Timing" subtab.

export async function loader({ request }: LoaderArgs) {
            const t0 = performance.now();
            await wait(40);              // pretend: db.query
            const t1 = performance.now();
            await wait(15);              // pretend: cache.get
            const t2 = performance.now();
            // ... build body ...
            const t3 = performance.now();
            return new Response(body, {
                            status: 200,
                            headers: {
                                            "content-type": "text/html; charset=utf-8",
                                            "server-timing": [
                                                            `db;dur=${(t1 - t0).toFixed(1)}`,
                                                            `cache;dur=${(t2 - t1).toFixed(1)}`,
                                                            `render;dur=${(t3 - t2).toFixed(1)}`,
                                                            `total;dur=${(t3 - t0).toFixed(1)}`,
                                            ].join(", "),
                                },
                });
}