Hi, you issue is not completely clear, what do you mean by "sent it to backend"?

It's really blurry sorry so hard to answer

But from what I grasp, you want an API endpoint that produce HTML based on some React code

I don't think there is anything prevent you from doing exactly that

the tricky part may perhaps be handling JSX, I don't know if Next can bundle JSX code in API routes out of the box

Yeah, i do not clearly explain this, ill try do it better 😄 :

I have interactive pedigree template on frontend where i can customize it styles, colors, etc.., but i want to be able to download this template as PDF.

For now im sending request to backend => (Backend have his own templates), backend is generating pdf from template and responding with it to me, then im able to download it.
(Currently it doesnt have possibility to change styles)

But its hard to maintain two separate templates, one on backend, and one on frontend.

I have idea to: Customize my interactive pedigree template (add colors especially) => Generate HTML output from this react components with styles and data => Send it to backend => Backend generates PDF from it and responds to me with PDF to download. In this way we have one source of truth

In short: I want to somehow dynamically build (?) Component and send it as html/text to backend

I would do all that in the backend

not the frontend

you generate the HTML from some React code in the backend

doing that in the browser would be tricky as far as I can tell, you'd have to build a kind of React iframe, and use the DOM API to get this HTML, but I wouldn't go this way it's weird

that a purely server-side use case of React

Hmm, but on backend you mean nextjs "backend" like middlewares etc, or totally backend?

And how we will generate html from react on backend? 🤔 We will need two separate but identical templates anyway?

or im thinking wrong

w8, why? I'll generate html with correct classes now, in react, i just need to attach css styles of this component to this html file, because i have for example "<div class="mantine-xs8432d"/> ... etc with .renderToString or any other react method

So i dont need any iframes? Or im thinking wrong? 😄

you mentioned renderToString which is what you need to render in the backed

ok I got it, so you have a preview version, and the final version

why don't you just run some JS to get the rendered HTML?

you'll miss the CSS perhaps

Thats the point, i need to attach mantine "builded" styles to it, and attach it to result html file. On other hand i need to somehow add query client provider during generating to fetch all needed data

I found emotion/server functions and now im trying to do it

yeah got the issue, so you can either do it twice in backend with a frontend preview

or use a separate page + an iframe

so that you can maybe get the full HTML of the iframe

including styles

I don't know which is trickier, I would opt for backend + a frontend preview personnaly

You mean add template url where backend can download it?

no I meant more having a separate page that renders the template, then you can show the preview to your user using a iframe

and then you can extract the HTML for this page

so you you could request it from backend, or extract the HTML client side and send it

but I don't like this idea of generating the HTML client-side honestly

I would generate it server-side entirely, and then do whatver you want to show a preview to your user client side

you can call the backend and show the result, or reuse the same React components directly in your code, do an iframe, whatever

So nextjs will do it for me at most cases with SSR? (Currently i have app with plain react)

I get it and it probably works, its a great idea, thanks!

But can i somehow get latest styles/props on this separated page when i press "Download pdf" in my core component with editor?

Because when its serverside rendered we have big chance to not get actual data

?

Next SSR feature is for the page of your apps, not really to render templates this way

it's just server-side React

what do you mean to not get actual data ?

I think you need to try to build something and see where you are stuck more precisely