SPA Integration Best Practices

There are many ways in which an SPA could potentially be integrated with Bloomreach Content. This page intends to help front-end engineers with a set of best practices, such that their integration is as smooth as possible, and such that Bloomreach can optimally support them in their efforts.

Use the SDK

The first best practice is to use the SPA SDK. It reduces the amount of code to write and maintain for integrating with Bloomreach Experience Manager. Bloomreach maintains the SDK, so you can take advantage from fixes for bugs discovered by other users. If your SPA uses a different JS rendering framework or a version that is not supported by the SDK, you may want to fork the SDK and adjust it to your specific needs, in such a way that you can keep up with the evolution of the SDK.

Avoid Mixed Content

Modern browsers typically block the display of a page or display warning messages if secure content (HTTPS) is mixed with insecure content (HTTP).

This can occur in your development environment when, for example, loading an SPA channel in the Experience manager while Bloomreach Experience Manager uses HTTPS and the SPA uses HTTP.

To avoid mixed content issues while developing your SPA, make sure your SPA uses HTTPS if your Bloomreach Content instance uses HTTPS.

HTTPS can be enabled in most frontend frameworks through a single configuration variable, see below for some popular frameworks:

• React
  Please use the HTTPS=true environment variable. See Using HTTPS in Development for details.
• Angular
  Please use the --ssl flag. See ng serve for details.
• Vue CLI
  Please use the --https flag. See vue-cli-service serve for details.

Although it is also possible to enable mixed content in most browsers, this workaround is not recommended.

Enable HTTP Keep-Alive (SSR/NodeJS)

In SSR implementations, by default NodeJS will create a new connection per request. This can have a significantly negative impact on performance. It is recommended to enable the keepAlive option in http.Agent. This keeps sockets open so they can be used for future requests without having to reestablish a TCP connection.

Make sure any services your application accesses have a timeout longer than that of the NodeJS server. The Content SaaS APIs are served through Cloudflare which has a default timeout of 100 seconds.

Always use HTTPS in production

📘

Production instances should always use HTTPS!