A New Pay of Building on Webflow

in my past 6 years of experience with Webflow, it was been always challenging to build SEO-friendly websites that integrate with external APIs. We were always left with using Javascript on the front end to make API calls and display data on-site or build an integration with Webflow MCS to show your external data with Webflow's server-side rendering.

However, both solutions I mention above are limiting. Let's evaluate

Making requests on the front end: Well, this is not good for SEO, still in 2024 many crawlers don't love JS rendering on page load. So, let's say a Google web crawler comes to your page and due to some issue your response from external API is slow or JS does not get loaded, or anything. You are now not getting Good SEO.

Integrate with Webflow CMS: This is tricky, if your external data does not change often, then yeah go and build an integration with Webflow CMS, so on any share in external data you update the CMS and Webflow will show server-side rendered data. But, now what if your data changes multiple times a minute, or your external data has relations or fields that are not possible in Webflow CMS, or the amount of CMS items can fit your request? or you just simply want to use a headless CMS.

Server Side Rendering Can Solve This

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 - https://github.com/thindHarminder/ssr-cf-pages-weather-app-demo/

Webflow Cloneable - https://webflow.com/made-in-webflow/website/thind-styleguide-v2-766e0fe6400f2a5409b

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 ✌️