I was experimenting with how we can server render external data in Webflow on the Server.
Checkout our demo here - https://ssr-cf-pages-weather-app.pages.dev/
How SSR Works WIth Webflow
When you open the demo URL, the server first gets where the request is something from. Then it takes the requester’s longitude and latitude. Then it requests weather API to get current weather data for the location.
Once the location data is there, we fetch the HTML from the Webflow site and create a virtual DOM in the server using Cheerio’s library.
Once we have this virtual DOM in the Server, we can interact with it, similar to how we would use document.getElementById() in browsers. However, in the server instead of the document we use the Cheerios object to interact with HTML.
When we retrieve elements from our HTML, we replace the inner text with the data from our weather request. It’s possible to do more, such as rendering lists, and removing or adding new sites, but for this demo, I’ve kept the logic simple.
You can clone the GitHub repo here - GitHub - thindHarminder/ssr-cf-pages-weather-app-demo: Render API data dynamically in Webflow site using Cloudflare Pages
Webflow Cloneable - Server Side Rendering in Webflow DEMO - Webflow
When To Use This
You can use SSR rendering when your external data changes frequently and you want to keep your site updated, plus want good SEO. The reason is that SSR rendering is slower than just serving static files. If your external data does not change much, just use Webflow’s CMS API to build a dynamic CMS.
Using External Headless CMS, many enterprise clients use Headless CMS to distribute their content to several platforms, you can use this code to server-side rendered CMS on top of the Webflow site. We can optimize the code to introduce our cashing layer using Cloudflare’s robust cashing infrastructure to improve performance.
Use cases are endless, you can build marketplaces that use server-side rendering for Good SEO, Web apps, directories and more.
I just thought this was very cool so wanted to share. If you have any questions, or doubts or need any help with custom integration with Webflow let’s have a chat in the comments.
Peace 