Looking for a way to render VueJS components back-end into both a functioning webpage and a PNG image. Is using a separate Node service with a headless browser ideal?
i gave node+puppeteer a try and it worked ok for both webpage and png renderings. might need extra tweaks on performance if scale increases though.
Based on my experience, using a headless browser is a viable implementation but may introduce unnecessary complexity if the primary use is static rendering. I experimented with server-side rendering directly in a Node environment, which proved efficient for generating both web pages and image outputs. This method provides more granular control over the rendered content and reduces overhead by eliminating an extra service layer. It is essential to implement robust caching and error-handling mechanisms to ensure the solution scales well under increased load.
Based on my own trial and error implementation, I’ve found that while a separate Node service with a headless browser offers flexibility, it may introduce challenges in terms of performance and maintenance. An alternative approach that worked well for me involved using Vue’s own server-side capabilities to generate HTML, then employing a lightweight rendering tool to convert the output to a PNG image. This approach reduced the overhead associated with running a full browser in the background, and it allowed me better control over resource management and error handling during both the rendering and image conversion processes.