Next.js Discord

Discord Forum

Use RSC to screenshot an iFrame?

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
I'm looking into alternatives to not use Pupeteer, and so far my best idea is to use RSC but output to "a place where I can screenshot" instead of sending to the user browser. Does that make sense? How would you make it?

I'm making an API where users can download some screenshots, and it is very tricky to do that.

16 Replies

fuma
RSC outputs RSC payload and html only, you can’t render html with RSC.
A headless browser is needed
Masai LionOP
is there a way to integrate RSC with OpenGraph? I don't want to rewrite anything, but at the same time all I have is inside an iFrame, so I guess Tailwind would work
how would you generate screenshots for a page that is is an iFrame (so I guess easier)?
Masai LionOP
I have 3 iframes on the client side and would like the user to click download images, it got an image from them and downloaded. So far I use puppeteer which is super slow. I could ask for the image for the frames somehow (but I have like 15 and only want the image from 3, so coordinating would be hard)
I wonder if I could do something in nextjs server that allowed me to do this
Like, how are they generating v0 previews when you send a link?
They are not using puppeteer, are them?
@Masai Lion I wonder if I could do something in nextjs server that allowed me to do this
fuma
Next.js apps are usually hosted on serverless runtime, which means you must use a fast html renderer that is fast enough for serverless runtime.

So far I only know getDisplayMedia can you capture image from iframe, it’s a client side stuff for sure, because iframes are only rendered client-side
You may not need a headless browser but the renderer is a must
@fuma You may not need a headless browser but the renderer is a must
Masai LionOP
Theoretically I could create an invisible iframe, wait until it loaded, grab the screenshot, etc. But iframes are always hard to deal due to their async nature.
fuma
And it prompts user due to security reasons
I guess vercel uses a html rendering engine like blink, servo on a serverful environment to render your website preview (or with some existing services)
And they have the infrastructure indeed