astro-render-to-string

Warnings

1. This is not an official api, use with caution
2. Because of #1, it may have limitations or unknown side effects, use with caution
3. This is awaiting the works of Astro in an RFC which may replace this very soon.

How to use

import { renderToString } from 'astro-render-to-string'
import MyComponent from './MyComponent.astro'

console.log(await renderToString(MyComponent))

Use cases

All the use cases are implemented here to see them in action.

1. You want to use .astro file to render an svg and respond with a real svg file

The only way to build statically a file is to use static file endpoints but those require to return a Response with a string body. You can't pass any astro component there.

import { renderToString } from 'astro-render-to-string'

import MyComponent from './MyComponent.astro'

export async function get(context) {
  return new Response(...)  // <- the body should be a string
}

Solved this way:

import { renderToString } from 'astro-render-to-string'

import MyComponent from './MyComponent.astro'

export async function get(context) {
  return new Response(await renderToString(MyComponent, context))
}

2. You want to return a real 404 from an astro component in SSR

In static build, you need to build a src/pages/404.astro which builds into a valid html page then the server you deploy to needs to use that page as a 404 (with routing).

In SSR, the server will serve the content of the 404.astro page as a 404 when a page is not found, but there's no programmatic way to return that same 404 if a parameter would be invalid (in a src/pages/[...route].astro, for example).

The proper way would be to:

---
if (some_condition) {
  return new Response(..., { status: 404 }) // <- the body should be a string
}
---

<Page />

solved this way (you can make an utility function out of it).

---
import FourOhFour from '~/server-pages/404.astro'

if (some_condition) {
  return new Response(await renderToString(FourOhFour, Astro), {
    status: 404,
  })
}
---

<Page />