Next.js Discord

Discord Forum

Generating static HTML from RSC

Unanswered
GetPsyched posted this in #help-forum
Open in Discord
Avatar
I want to have an "Export as PDF" option in my app. One way to define what to render for the PDF is using React components itself. But this was an issue as I couldn't figure out how do I convert the RSC to HTML.

My current solution is using renderToStaticMarkup:
https://github.com/nitkkr-dev/nitkkr/blob/d40570d7dd6d049efe6a4dbd05511f0ade9d3f0d/components/export.tsx#L15-L18

But the way I'm importing is hacking out of the problem that is react-dom/server not being allowed to be imported due to perf and/or security reasons, giving me the following error:
ReactServerComponentsError:

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/getting-started/react-essentials


Is my solution safe? If not, please suggest alternative(s), thanks!

11 Replies

Avatar
Maybe I can skip rendering to HTML entirely?
Avatar
Tried jsPDF but it's client side unfortunately
Avatar
Can explore [react-pdf](https://react-pdf.org/) though it has a heavy vendor lock-in
Avatar
just wondering could it be better to just call the print api and letting user export to pdf (this is assuming your saving the page as pdf)
Avatar
Can't use print because this abstraction is gonna be used on both DOM and not-in-DOM elements
Avatar
Either way, to hide all the other stuff that I don't want to print, I'd have to do display: none or some component swapping which TBH feels hacky
Avatar
i mean isn't there a css selector for print?
which i didn't think was too pain to use
Avatar
That's correct. But what if I want to download X from the grid view of Xs without opening the full view
In that case I'd have to redirect to the full view first
Avatar
ahh i see