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, Including the platform which you're reading on - Hashnode runs on NextJS. 👻

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 :

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 👏

• Fireship.io
• Google Rendertron
• Google Dev Team
• Kenny.is

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 🙌