AstroJS Integration

[MelihDarcanxyz]

Hi everyone, first of all, Payload is great. Thanks to the developers and every contributor.

For a while now, I've been using Payload with AstroJS, which is the ideal stack for me. Especially Astro's static first approach and optimizations are better fit for my use cases.

However, using the editor provided with Payload, it's not possible to use Astro components. I have to write React components that is present in Payload folder. I should be able to define my components as Astro components, use them in Payload editor, and use the types generated by Payload in Astro directly.

Not being able to use Astro components actually kills one of the most strong abilities of Astro, which isn't ideal in my opinion. At this points, why use Astro?

I'm interested in your opinions on this topic, please share your ideas. Wish you a great day!

[janus-reith]

However, using the editor provided with Payload, it's not possible to use Astro components. I have to write React components that is present in Payload folder

Well that won't be easy. Payload uses React Server Components, and you can't easily bake in Astro templating there.

What could work is to have a custom react wrapper which renders the Astro components, that however wouldnt really work in an interactive way either since Astro, contrary to React, isn't a clientside rendering library.
It might be possible to build something custom that is capable of clientside-rendering Astro in the browser, or provide a dedicated endpoint that renders them on the server and sends back the result on prop change.
But it's much more simple to just use the live preview with the actual dedicated Astro frontend then.

Not being able to use Astro components actually kills one of the most strong abilities of Astro, which isn't ideal in my opinion. At this points, why use Astro?

That part I don't really get. You can totally use pure Astro components in your frontend and don't need to use any React. Payload + Astro frontend works well for me.

[MelihDarcanxyz]

That part I don't really get. You can totally use pure Astro components in your frontend and don't need to use any React. Payload + Astro frontend works well for me.

That has something to do with one of the strongest features of Payload, rich text editor. I want to build Astro components for the content, but it's not possible to use them with rich text editor.

Astro components are totally usable, sure, except the content. That's what I meant. Having to seperate content components isn't really helpful in the case of Astro.

[janus-reith]

If Astro components within the editor would be possible, how exactly would you want to handle interactivity/ data editing?

Also for React components, by default the Lexical editor shows a field UI when you use Blocks there and not the frontend-facing component that is used on the page

[MelihDarcanxyz]

I'm not really well-versed with the interactivity as I do SSG 99% of the time, but I know Astro supports both SSG and SSR so I guess there might be an answer. Also, there are islands support which again might be an answer.

[janus-reith]

What I mean is, Astro has no concept of reactivity for props. It doesnt provide features to e.g. change some text field value and have the UI reflect that.

What I could see as usecase is if you are building a complete WYSIWYG editor and want to reuse your Frontend's components in the preview. But you would still have some React wrapper then for the actual editing, Astro wouldn't really make sense there.

So for this to work, you would either need a client-side implementation of the Astro Template language, or some React wrapper component which would fetch some endpoint that returns the created html for some Astro components for some props you send.
That could however be less seamless than React components which could just rerender clientside when props change.

[janus-reith]

Btw what's on my ToDo-List is to create a Lexical Renderer similar to https://github.com/atelierdisko/payload-lexical-react-renderer. It should work to build this as pure Astro component which uses <Astro.self />.
I used <Astro.self /> so far for block rendering of Astro components, but for Lexical Richtext content I simply used the react package.

A pure Astro Component variant would enable using Astro components as Blocks within Richtext Content.