TLDR
It’s always better to go with NextJS for SSR, It's one of the best out there! 💯
But for those who have already built their E-commerce or Blog apps with Client-Side Rendering, Don’t worry there’s still hope. 🙂
Why need SSR?
What is SSR?
Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side), instead of rendering them in the browser. SSR sends a fully rendered page to the client. Most of the web applications we use these days run on SSR for performance & SEO.
We had a requirement to support Rich Media Previews so that we can share & promote our website products on social media for promotion. But at that time, our E-commerce web application was built using VueJS with CSR, so it didn't support SSR natively. We started looking into other ways to achieve this.
We had 2 options
1) Move components from VueJS to NuxtJS.
NuxtJS is SSR based framework for VueJS like how NextJS is for React. It took us time to learn the new framework and move the existing components from VueJS to NuxtJS, but we realised it wasn’t feasible.
*2) Rewrite everything from the scratch. *
But this wasn’t possible too, as we have developed components for more than a year and it would take too many resources to start from the first.
Rendertron comes to Rescue
We were about to give up but then I remembered, around 2-3 years back when I tried to build a personal blog using Angular, I faced a similar use case and I wasn’t able to render the Rich previews with it. That’s when I came across Rendertron.
Thanks to Fireship.io 🔥
(One of the best Youtube Channels out there for Modern App Devs)
Jeff Delaney was the first I could remember to talk about Rendertron and how we can make our existing CSR to SSR for rich previews.
At that time, I didn't pursue much since it was more of a weekend project but now we didn't have any other choice, so we tried experimenting.
How?
Little about Rendertron :
GoogleChrome
/
rendertron
A Headless Chrome rendering solution
Rendertron
Rendertron is a headless Chrome rendering solution designed to render & serialise web pages on the fly.
🔨 Built with Puppeteer
☁️ Easy deployment to Google Cloud
🔍 Improves SEO
Rendertron is designed to enable your Progressive Web App (PWA) to serve the correct content to any bot that doesn't render or execute JavaScript. Rendertron runs as a standalone HTTP server. Rendertron renders requested pages using Headless Chrome auto-detecting when your PWA has completed loading and serializes the response back to the original request. To use Rendertron, your application configures middleware to determine whether to proxy a request to Rendertron Rendertron is compatible with all client side technologies, including web components.
Demo endpoint
A demo Rendertron service is available at https://render-tron.appspot.com/. It is not designed to be used as a production endpoint. You can use it, but there are no uptime guarantees.
Contents
Rendertron is a headless Chrome rendering solution from the Google Chrome team which is designed to render & serialise web pages on the fly. Internally it makes use of Puppeteer to handle the page renders.
Architecture
The plan is to distinguish between users 😼 & bots 🤖 using User Agents in Nginx and to serve normal CSR pages to users and serve the rendered SSR page to the bots.
So whenever a Bot hits the server, Nginx will proxy the request to our Rendertron server & it will generate the parsed HTML with meta tags and give the response to the Bot, similarly to how NextJS works.
Going Live
We were a little skeptical about how it would work, the load & scaling but once we tried putting everything together and did a small POC, everything worked effortlessly with almost no code change.
There were few shortcomings,
- Security
- Page Response Time (Can be solved by Caching)
- Cloaking
- DDoS
After weeks of intensive load testing & monitoring logs & by implementing multiple fallbacks & backups plans - Yes, we have deployed it to production.
Currently, we are serving rich media previews for more than thousands of users on a Client-Side Rendered App.
Again this solves the purpose of Rich Previews & SEO and it might not work for your use case, so I'd still suggest you go with something like NextJS. ( It's my go-to framework) but for others, you can rely on Rendertron.
Credits 👏
If you're interested to know the more detailed architecture and insights or if you have better ideas, I'd be happy to discuss them, let's catch up in the comments.
Good Day 🙌
Top comments (0)