Server Side Rendering (SSR) with Edge Routing Technical Implementation Architecture

Personalize supports a wide variety of different implementation architectures. Each architecture makes a certain number of trade-offs on performance and ease-of-use.

As a best practice, we strongly recommend one particular architectural pattern over the others. We believe that this architecture checks all the boxes and allows for the most robust experience.

Introduction

Contentstack Personalize offers flexibility in implementation, but the SSR (Server-Side Rendering) + Edge Routing architecture stands out as a best practice. This approach balances performance, scalability, and maintainability, making it suitable for production environments.

The SSR + Edge Routing architecture provides a powerful and efficient way to implement Contentstack Personalize. By leveraging edge computing, server-side rendering, and Contentstack's personalization capabilities, you can create highly personalized and performant digital experiences for your users.

This is the most robust option and will also deliver the smoothest user experience for your visitors by eliminating loading screens or flickers, all while enabling real-time personalization.

Note: This document provides a high-level overview. For details on how to use Personalize and other best practices, refer to Contentstack's official documentation and consult with our support team.

Key Components and Flow

The following are the key components of this implementation architecture:

• User Request: A user's request for content is routed to the edge server closest to them geographically. This reduces latency and improves response times.
• Edge Server: The edge server acts as the first point of contact. It handles caching, request routing, and can even execute serverless functions for personalization logic.
• Server-Side Rendering (SSR): The application server dynamically generates HTML pages with personalized content based on user data and the Personalize recommendations. This ensures that each user receives a tailored experience from the initial page load.
• Contentstack Personalize: The Personalize service provides personalization and experimentation decisions based on user profiles, behavior, and content attributes. It integrates seamlessly with the SSR process.
• Content Delivery API (CDA): Contentstack's CDA delivers the core content (articles, products, etc.) that will be personalized. The SSR process combines this content with the Personalize recommendations to create the final page.

Benefits of this Architecture

This architecture offers multiple benefits, below we have listed some of the important ones:

• Improved Performance: Edge caching and SSR minimize the time it takes to generate and deliver personalized pages, enhancing the user experience.
• Scalability: The distributed nature of edge servers and the efficient use of SSR enable the architecture to handle high traffic volumes.
• Personalization at the Edge: By executing personalization logic at the edge, you reduce the load on your origin servers and deliver tailored content faster.
• SEO-Friendliness: SSR generates fully rendered HTML pages, making it easier for search engines to crawl and index your content.

Flow of the Diagram

The diagram visually represents this flow:

• The user's request is first handled by the Edge Server.
• The Edge Server communicates with the Contentstack Personalize service to fetch personalization data.
• The application server, performing SSR, integrates this data with content retrieved from the CDA.
• Finally, a personalized page is then served to the user.

Technical Considerations

While considering this implementation, the following points can help:

• Caching Strategies: Implement effective caching mechanisms at the edge and on your application server to further optimize performance.
• User Data Management: Ensure secure and compliant handling of user data for personalization.
• Personalization Rules: Define and manage personalization rules within Contentstack Personalize to control how content is tailored.
• Error Handling and Fallbacks: Design robust error handling and fallback mechanisms to ensure a seamless user experience even if personalization services are temporarily unavailable.

Additional Information: We have created a sample app which is based on this architecture. Please check out the repository and our sample app for more information.