SEO-friendly way of connecting Webflow to an external API

We would like to ask about your recommendation for developing a
particular solution.

We have the following components within our Platform:

  • Backend Core with a REST JSON API, OpenAPI-compatible, exposed
    additionally as Swagger, with custom JWT based authentication
  • Webapp Core, which integrates with our backend API
  • Android and iOS apps which use Webapp core underneath
  • Other backends which integrate with our backend
  • Webflow website

We will need the to perform the following things in Webflow:

  • shared login between Webflow and Webapp
  • displaying content originating from API in Webflow
  • payments (candidate platform is Stripe)

While we do have particular solutions in mind for login and payments
(involving custom runtime JS in Webflow, iframes, postMessage, etc),
as these do not require great Search Engine Optimization, we would
like to hear your feedback specifically on content originating from
API.

What we need to accomplish.

  1. Pages (under fixed URLs) that display content originating from the API
    E.g. a page latrace.com/voyages that would consume our API and display
    up to date content from the API, in a way that’s optimized for Search
    Engines (which likely excludes the runtime JS).

  2. Pages (under dynamic URLs) that display content and page titles
    originating from the API
    E.g. a page latrace.com/voyages/{voyageId} which would consume our API
    and display up to date content about a particular voyage. Again, the
    challenge here is to make it optimized for Search Engines.

It is also important for us that the backend should be
client-agnostic, i.e. the clients should know the details about how to
implement the API, but the API is not aware of the implementation and
presentation details of its multiple clients.

We would love to hear your feedback on the matter.

Thanks so much!!

https://preview.webflow.com/preview/latrace?utm_medium=preview_link&utm_source=designer&utm_content=latrace&preview=b552cdeb4f2ad0e21749341fb50b2af0&workflow=preview

All of my notes here are based on the understanding that your Webflow site is Webflow-hosted, based on your mentions of the CMS and API.

Memberstack and Wized both offer oauth support that you should be able to leverage as a shared authentication system.

JS fetch and AJAX-style approaches can work, but can be laggy.
To remedy that, you can use prerender.io as a reverse proxy or build a custom RP that integrates your data at the middle tier for caching and rapid delivery.

Stripe’s great, but depends on how you want the integration to work. If it’s membership payments, Memberstack has its own solution. User accounts does as well through e-commerce, but has no SSO support. Wized integrates with Stripe.

If you’re also doing one-off sales I’d probably go the Wized route, as you’ll get deeper Stripe integration and can craft a more consistent UX.

I’m uncertain exactly what you’re asking for here. Client refers to a agent such as a browser / ios app, or do you mean client as in customers of yours. Are you white-labeling this system?