Any way to use dynamic routes?

Design help Data API
1

Currently scoping out options of using Webflow in combination with an external, headless CMS.

The most popular approach seems to be some kind of syncing the data from the external system into the Webflow CMS, which would be an alright solution.

Much rather I’d just pull in the data with JS on each page though, but I’m not sure how to get the URL structure needed for pulling in a single blog post.

Sure, I could do site.com/blog?id=2 and then pull in that post with no issue, but that’s a fairly ugly solution. What I would like is for the user to navigate to site.com/blog/my-blog-post and then Webflow just showing the /blog page to them, allowing me to inject the content for the blog post from an external source.

Normally this could be easily achieved with .htaccess, but that’s not available in Webflow. I don’t want to use a redirect either, since that would still show the user the url with the parameter.

Any way of making this work? Thanks in advance.

2

I’ve looked into this, and technically, you could make something sort of work-

  • Build your blog article “template” page, e.g. at /blog
  • Script it as follows-
    • Pull querystring params like ?id=myarticle
    • Rewrite the browser’s location history so the URL appears as e.g. /blog/myarticle
    • Use that id to pull your content from the CMS, and display it.
  • Modify your 404 page with a script that looks for URL patterns like /blog/* and redirects them to /blog?id=*

Now you’ve sort of got a Webflow-hosted site that has natural-looking URLs, to pages that don’t actually exist, and it pulls data from your headless CMS.

But of course, this solution is most definitely a hack. It’s fragile. It can’t properly handle actual 404s well, to e.g. /blog/this-page-does-not-exist. Users will also see the URLs briefly before they change. Page loads will feel sluggish as it AJAX’s your data in.

I honestly think a better solution would be to export and integrate in an environment that connects well to your CMS. If you find a solution you like, let me know.

3

Thanks for this, I figured I wasn’t the first to try this. Your solution is certainly a bit too hacky to use for client sites, so I will have to look into syncing my content into the Webflow CMS instead. Guess Webflow has limited interesting in allowing a better solution, since they want people to pay for their built-in CMS, which is understandable.

4

I’ve done this using Cloudflare in front of a Webflow site with ‘transform rules’ and it works pretty well. You will need to put Cloudflare in proxy mode, which Webflow advise against and means the connection between CF and your Webflow site is insecure (see the configuring part of this article).

You can handle a 404 by redirecting to the 404 page if the slug doesn’t exist on the API.

For SEO you can modify the meta tags with JS, but only google will see these.

BUT, if you can do it within the Webflow CMS, I’d do that as you’ll probably have less headaches.

1 Like