Astro.waitFor() #707

lilnasy · 2023-09-18T03:09:25Z

lilnasy
Sep 18, 2023

Summary

A low-level hook into the rendering process that allows a component to affect response headers and <head> rendering.

Background & Motivation

Due to Astro's streaming, we only wait until the page's frontmatter has run before generating the element. Frontmatter of a component cannot add scripts or stylesheets because by the time it's run, the is already sent to the browser so that it can start loading assets.

This becomes an issue when a component uses the content collections API. The render() call adds styles and scripts relevant to the content entry to the <head> element. Therefore, it must be used nowhere other than the routed page's frontmatter, as that would lead to missing assets: withastro/astro#7761.

Goals

Allow components to use content collections.
Allow components to change response headers and status.

Example

---
import CallsRenderOnPost from "../components/Post.astro";
import { getCollection, getEntry } from "astro:content";

const posts = await getCollection("posts");
---
<main>
    {Astro.waitFor(posts.map((post) => <CallsRenderOnPost post={post} />))}
</main>

---
// src/components/post.astro
const { post } = Astro.props
const { Content } = await post.render()
---
<h2>{post.data.title}</h2>
<Content />

The above example is from the reproduction of the meta-issue withastro/astro#7761. An array of component render results has been passed to Astro.waitFor(). Each one of them should be able to mutate the Astro.response object and allow contentEntry.render() to add required assets to the <head> element.

Alternative

export const addsToHead in the component.

---
// src/components/post.astro
const { post } = Astro.props
const { Content } = await post.render()

export const addsToHead = true
---
<h2>{post.data.title}</h2>
<Content />

For

Simpler API - users wouldn't have to think about where to put Astro.waitFor().

Against

Would work only for astro components, not framework components.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Astro.waitFor() #707

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Astro.waitFor() #707

lilnasy Sep 18, 2023

Summary

Background & Motivation

Goals

Example

Alternative

For

Against

Replies: 0 comments

lilnasy
Sep 18, 2023