How to render VEC decision on the server - Hybrid personalization using Web SDK and Edge Network Server API

[msweeneyRAB]

I am working through the Hybrid personalization using Web SDK and Edge Network Server API example and have a few questions. A bit more context:

• The site is using Adobe Experience Platform Web SDK extension in Adobe Tags. So far we've used the extensions Send Event to request personalization scope that is sent to our data layer
  

What I would like to do now is render VEC decisions server side using Next.js/React. My approach so far has been to follow the hybrid approach example linked above. On my page's getServerSideProps I the server-side request to the /ee/v2/interact endpoint and I can see my VEC experience in the response. Up to now, all is good...

The next step in the tutorial says to use the  Web SDK applyResponse command to render the decisions (code below copied from tutorial linked above). Because we are using the Adobe Experience Platform Web SDK extension in Adobe Tags I only have access to allow from the window, which means I can not render the decisions server side.

   alloy("applyResponse", {
      "renderDecisions": true,
      "responseHeaders": {
         "cache-control": "no-cache, no-store, max-age=0, no-transform, private",
         "connection": "close",
         "content-encoding": "deflate",
         "content-type": "application/json;charset=utf-8",
         "date": "Mon, 11 Jul 2022 19:42:01 GMT",
         "server": "jag",
         "strict-transport-security": "max-age=31536000; includeSubDomains",
         "transfer-encoding": "chunked",
         "vary": "Origin",
         "x-adobe-edge": "OR2;9",
         "x-content-type-options": "nosniff",
         "x-konductor": "22.6.78-BLACKOUTSERVERDOMAINS:7fa23f82",
         "x-rate-limit-remaining": "599",
         "x-request-id": "5c539bd0-33bf-43b6-a054-2924ac58038b",
         "x-xss-protection": "1; mode=block"
      },
      "responseBody": {
         "requestId": "5c539bd0-33bf-43b6-a054-2924ac58038b",
         "handle": [
         {
            "payload": [
               {
               "id": "XXX",
               "namespace": {
                  "code": "ECID"
               }
               }
            ],
            "type": "identity:result"
         },
         {
            "payload": [
               {...},
               {...}
            ],
            "type": "personalization:decisions",
            "eventIndex": 0
         }
         ]
      }
   }
   ).then(applyPersonalization("sample-json-offer"));

Not sure what I'm missing. Any tips would be appreciated. How do accomplish applying the response server side?

Thank you

[dwright]

Hi @msweeneyRAB ,

If your goal is to handle the response server side, then I think that tutorial is not the one you should be looking at. That tutorial is for "rendering it client-side, using the Web SDK."

Take a look at this example and doc and see if this aligns better with what you are trying to do:

https://github.com/adobe/alloy-samples/tree/main/target/personalization-server-side

https://experienceleague.adobe.com/en/docs/experience-platform/edge-network-server-api/personalizati... 

[msweeneyRAB]

Hi @dwright thanks for your response. The github example you provided mentions the following:

• The target offer from the form-based activity is read from the response and used when producing the HTML response (point 4 in the read me)
• Visual Experience Composer (VEC) offers are ignored since the Web SDK is required to render them. (point 6 in the read me)

I am trying to render a VEC activity server side, do you know if that is possible?

We use server side rendering on our site (using Next.js and React) because of that we get a flash of content before the VEC decision is rendered on the browser, this is what we are trying to avoid.