Personalization with Builder - Utils and new SDK 2.2.2

Technical Questions
,
1

Hey

Is @builder.io/personalization-utils still supported and recommended way for Personalization with Next.js Middleware?

It used to work fine in 2022 (SDK 1, React SDK 2) when I was first testing it on Google Cloud Run. Personalization worked fine.

But now I can’t even install it with the newest SDKs, my dependencies:

    "@builder.io/dev-tools": "^0.2.15",
    "@builder.io/react": "^3.2.4",
    "@builder.io/sdk": "^2.2.2",
    "next": "14.1.0", // APP Router
    "react": "^18",

Maybe there is a new recommended way to personalize content with Builder, Static/ISR support with middleware, and Next.js App Router?

What are you trying to accomplish
We want to personalize our content based on user attributes (for now set manually, but we are considering the Twilio Segment as CDP).

Code stack you are integrating Builder with
NextJS (App Router), React, Supabase, Vercel

Errors I get on install:

$ npm install @builder.io/personalization-utils

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: edukey-landing@0.1.0
npm ERR! Found: @builder.io/sdk@2.2.2
npm ERR! node_modules/@builder.io/sdk
npm ERR!   @builder.io/sdk@"^2.2.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @builder.io/sdk@"^1.1.20" from @builder.io/personalization-utils@2.0.0
npm ERR! node_modules/@builder.io/personalization-utils
npm ERR!   @builder.io/personalization-utils@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
2

Any thoughts? Maybe with App Router and server components, we just don’t need middleware for Personalization anymore? :slight_smile:

Around 2 years ago, with Page Router, we used to set a cookie on the client (to identify the client) and read this cookie in Middleware to render and serve personalized pages for specific segments of users (with recommended products based on customer’s profile).

It worked fine in Builder, the user with the cookie saw the personalized version of the page (but it was only PoC, didn’t use personalization on Production, so I didn’t verify if it was fully Server-Side Rendered).

But I guess we still need this cookie to read it on the server and render the personalized page. I don’t see any other option for the server to know who is visiting the page with ISR. But I’m still learning the new App Router, so maybe there is another way to read that cookie, not only middleware.

I would highly appreciate any new updated resources/hints about SSR/ISR & personalization with Builder with the new App Router :slight_smile:

3

Please, @Builder - anything new in this subject?

4

Hey @LucasMatuszewski

Currently, with an updated version, it doesn’t seem to be working. We are looking to revisit and ensure compatibility with newer versions of the next and will update you soon, thanks for bringing this up!

In the meanwhile, the package relies on the same approach detailed in this article, it might help unblock you Using Query Params and Cookies in Next.js Static Pages