Rendering Experiences on the edge with Ninetailed's Experience API.
The easiest way to get started with Ninetailed is to use our client-side SDKs to select and render the applicable personalization or experiment variants. This ensures that a user's application state is updated in response to submitted Experience API events as soon as possible.
However, it is possible to retrieve Ninetailed profiles and select and render the appropriate experience variants in either server or edge contexts. This allows the first page requested by your visitors to show the appropriate content without having to wait for hydration to complete, or to exclusively render Nientailed variation content on a server.
Methodology
Ninetailed returns an up-to-date representation of a profile and a list of assigned Experiences whenever an event is sent to the Ninetailed Experience API. By storing a Ninetailed anonymous ID in a cookie, an edge- or server-side function can make requests to update and receive the visitor's profile.
You can then pass the list of API-assigned experiences to your route functions. If desired, the stringified list can serve as a cache key so that subsequent visitors can be performantly served the same combination of Experience content.
Depending on whether you want Ninetailed to then also re-render client-side in response to Ninetailed events sent client-side, you can then either:
[Client re-rendering] Use the loadingComponent prop of the <Experience> component to server-render the appropriate Experience and Variant. Then, the rehydrated Ninetailed SDKs will take over again on client-side so that new experiences and variants can be rendered immediately in response to the visitor's changing audiences.
[No client re-rendering] Completely Server- or edge-side render the chosen Experience content in a server-based, non-stateful <Experience> component.
This example shows how to retrieve a list of assigned Experiences from Vercel Edge Middleware (though any edge function provider can be used) and pass that information to a Next.js route function.
Overview
Some utility functions are used to build the page event and send the request to the Ninetailed Experience API. These are used in the edge middleware, which also extracts the list of experiences our of the Experience API response and passes them in the URL. The Next.js page function then reads this hash to render the right content in child <Experience> components.
use the default <Experience> component exported by our React SDKs. In an implementation containing RSCs, you'd want to re-export the default exported Ninetailed <Experience> component to opt-in to the use client directive. Or,
write an <Experience> component that assumes no client-side implementation, like our example, if you want to server-side render and not update content client-side in response to user actions.