Routing & SSR: Prerendering a component in an SSR page

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

I had a server-rendered Astro page and I was doing quite an intensive calculation on it. It ran on every page load.

So I used a partial (new in Astro 3.4) and set the prerender flag on it:

---
export const prerender = true
export const partial = true
---

Then I included this partial client-side using HTMX (you could also just use a fetch() request and swap some innerHTML too).

0:	Introduction
1:	Dynamic routing
2:	SSR in Astro
3:	API endpoints in Astro
4:	▶︎ Prerendering a component in an SSR page
5:	Set cookie and redirect
6:	Render different HTML based on HTTP method
7:	Decide to render a partial or not dynamically in Astro
8:	Fetching data from the network