Return Astro (HTML) components from API endpoints

[unbiased-dev]

Body

Summary

Enabling of returning Astro components (as stringified prerenderd html) from api endpoints.

Background & Motivation

This would allow frameworks such as HTMX to pair nicely with Astro.

Currently the only way to do this is to have your partials be Astro pages, which is finicky at best with pitfalls such as the partials having their own hardlink (which you can mitigate by redirecting to 404 if the HTMX headers are not there), or you have to write yet another abstraction of said partials in another markup (string litterals, vhtml, ...) which is far from ideal.

Goals

• Allow importing of Astro components in api route files, this can be handled one of three ways
  • Allow executing said Astro files to plain html (ignore client directives)
  • Allow .tsx files to be api routes if they are inside pages/api folder
  • Or provide a renderToString like method

Example

Proposal 1 (pseudo code):

import type { APIRoute } from "astro";
import SearchResults from "../components/SearchResults.astro";

export const post: APIRoute = () => {
  return { body: SearchResults.toHTML({ your Astro props }) };
};

or

Proposal 2

// /api/searchresults.tsx
import type { APIRoute } from "astro";
import SearchResults from "../components/SearchResults.astro";

export const post: APIRoute = () => {
  return { body: <SearchResults {your Astro props} /> };
};

or

Proposal 3

import type { APIRoute } from "astro";
import { renderToString } from "astro"
import SearchResults from "../components/SearchResults.astro";

export const post: APIRoute = () => {
  return { body: renderToString(SearchResults, {your Astro props} )};
};

[wassfila]

Relates to Support for Partials #697

[Klrfl]

Currently using partials works fine, but it gets harder when you try to implement a RESTful API with it. You need to define different endpoints for different HTTP methods. You certainly can switch(Astro.request.headers) but it gets hard when you try to render different HTML to respond different methods.

[ematipico]

Closing as this is achievable with the container API

[Klrfl]

I have to ask, because it's an experimental API, is it ready for production use?

[ematipico]

It's still experimental