Render components as HTML string (or any other technique to return a `Response` with custom HTML) | Astro Lounge | Page 1

stone crystal Mar 9, 2023, 5:55 AM

#

Hello Astro community,

After extensive searches... check the following case:

---
// ,,,
const data = await someDataFetchingFunction();
if (!data) {
  return new Response("not found", {
    status: 404,
    statusText: 'Not found'
  });
}
---
<MyStuff/>

it's a simple case of returning a 404 page in case some data fetching operation wasn't successful.
Now, the question is.. if I wanted to return a custom page / custom HTML instead of the not found string, what could be the best approach ?

Options I thought about:

using fs.readFile with a pre-generated single page html file
redirect to a /404 (very bad tho)
using conditions in the component, such as { data && ( <MyStuff/ ) || <My404/> } but i'd really rather not do that.

The ideal solution would be to have a 404.astro page being either exportable as HTML or returnable as component.
Something like:

import my404 from 'http404.astro'

return new Response(my404.render(), { status: 404 })

Is there anything like that around ?
Thanks !

burnt verge Mar 9, 2023, 12:55 PM

#

You can do something like this https://stackoverflow.com/a/74827712

Stack Overflow

Astro js server-side rendering custom error page

I've seen the custom 404.astro page. But how does this translate to server-side rendering? (Using the node.js adapter if that matters.)
Looking at the Response docs, I thought about writing something

stone crystal Mar 10, 2023, 4:24 PM

#

@burnt verge that works! the [...any] approach also in combination to being used as middleware works too

#

thank you a lot!

#

is there anything similar for 500 error pages?

#Render components as HTML string (or any other technique to return a `Response` with custom HTML)