Astro’s SSR uses HTML streaming to send each component to the browser when available for faster page loading. To improve your page’s performance even further, you can build your components strategically to optimize their loading by avoiding blocking data fetches.
The following refactoring example demonstrates how to improve page performance by moving fetch calls to other components, moving them out of a component where they block page rendering.
The following page
awaits some data in its frontmatter. Astro will wait for all of the
fetch calls to resolve before sending any HTML to the browser.
await calls into smaller components allows you to take advantage of Astro’s streaming. Using the following components to perform the data fetches, Astro can render some HTML first, such as the title, and then the paragraphs when the data is ready.
The Astro page below using these components can render parts of the page sooner. The
<h1> tags are no longer blocked by data fetches. The server will then fetch data for
RandomFact in parallel and stream the resulting HTML to the browser.
Including Promises directlySection titled Including Promises directly
You can also include promises directly in the template. Instead of blocking the entire component, it will resolve the promise in parallel and only block the markup that comes after it.
In this example,
A name will render while
factPromise are loading.
personPromise has resolved,
A fact will appear and
factPromise will render when it’s finished loading.
Learn how to share state across framework components with Nano Stores.
Add an RSS feed to your Astro site to let users subscribe to your content.
Learn how you can import YAML data by adding a Rollup plugin to your project.
Learn how to build a custom image component that supports media queries using the getImage function
Learn how to build HTML forms and handle submissions in your frontmatter
Learn how to use Bun with your Astro site.
Learn how to call endpoints from the server in Astro.
Learn how to create an API route and fetch it from the client.
Learn how to build your Astro site using Docker.
Learn how to dynamically import images using Vite's import.meta.glob function
Learn how to install a rehype plugin to add icons to external links in your Markdown files
Use dynamic routing and content collections to add internationalization support to your Astro site.
Build a remark plugin to add the last modified time to your Markdown and MDX.
Build a remark plugin to add reading time to your Markdown or MDX files.
Learn how to share state across Astro components with Nano Stores.
Learn how to use streaming to improve page performance.
Learn how to use @tailwind/typography to style your rendered Markdown