Server Side Rendering

This guide describes the steps you need to follow to use Ninetailed with Server Side Rendering (SSR) in Next.js
You can use Next.js to fetch personalized content from the server and serve a fully updated page via server side rendering.
import {
} from '@ninetailed/experience.js-next';
import { Hero } from './Hero';
const Page = ({ ninetailed, data }) => {
<PersonalizationProvider profile={ninetailed.profile} apiKey={API_KEY}>
<Personalize component={Hero} headline={data.headline} variants={data.variants}/>
export async function getServerSideProps() {
const profile = await getServerSideProfile(ctx, {
apiKey: API_KEY,
const data = await getPageData();
return { props: { ninetailed: { profile }, data } };
export default Page