Mastercard Dynamic Yield and Next.js 16 Partial Prerendering
Mastercard Dynamic Yield and Next.js 16 Partial Prerendering
October 2025
With the release of Next.js 16 in October 2025, it now has stable support[1] for partial prerendering (PPR) through Cache Components. Partial prerendering allows for the bulk of the page’s content to be sent to the browser as part of the original response (prerendered at build time or cached between requests), and for specific areas of the page to be streamed to the browser as their data becomes available.
In this diagram from Nextjs.org, Next.js serves the product details page first, and then streams two dynamic components to the browser as their data becomes available (perhaps a cart from the eCommerce system and the recommendations from a Dynamic Yield API recommendations campaign):
Other web frameworks may provide similar capabilities in varying stages of maturity, such as Astro Server Islands. If the website is cached by a CDN, Cloudflare or Fastly, a similar approach can be achieved less automatically using Cloudflare Workers or Fastly Edge Compute. Other CDNs’ edge computing may or may not have the required capabilities. Contact your technical account manager for more information.
Partial prerendering operation
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-d2-version="v0.7.1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1265 1419" role="img"><title>Sequence diagram showing the flow of page rendering and API calls across four components: Browser, Next.js Server, E-commerce Platform, and Mastercard Dynamic Yield. The process starts with the browser sending a request to the Next.js server, which returns an initial HTML response. The Next.js server initiates two API calls: one to the E-commerce Platform for cart data and another to Dynamic Yield for personalization (‘Choose’ API). The browser begins rendering the page with the first contentful paint while assets and third-party scripts load. Responses from both APIs return to the Next.js server, which then sends React Server Components with personalized data and cart data back to the browser. The sequence ends with complete page rendering and other requests.</title><svg class="d2-680017394 d2-svg" width="1265" height="1419" viewBox="-11 -10 1265 1419"><rect x="-11.000000" y="-10.000000" width="1265.000000" height="1419.000000" rx="0.000000" fill="#ffffff" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-680017394 .text {
font-family: "d2-680017394-font-regular" !important;
}
@font-face {
font-family: d2-680017394-font-regular;
src: url("data:application/font-woff;base64,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");
}
@font-face {
font-family: d2-680017394-font-semibold;
src: url("data:application/font-woff;base64,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");
}
.d2-680017394 .text-bold {
font-family: "d2-680017394-font-bold" !important;
}
@font-face {
font-family: d2-680017394-font-bold;
src: url("data:application/font-woff;base64,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");
}
.d2-680017394 .text-italic {
font-family: "d2-680017394-font-italic" !important;
}
@font-face {
font-family: d2-680017394-font-italic;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-680017394 .fill-N1{fill:#222221;}
.d2-680017394 .fill-N2{fill:#323231;}
.d2-680017394 .fill-N3{fill:#9499AB;}
.d2-680017394 .fill-N4{fill:transparent;}
.d2-680017394 .fill-N5{fill:transparent;}
.d2-680017394 .fill-N6{fill:#EEF1F8;}
.d2-680017394 .fill-N7{fill:#ffffff;}
.d2-680017394 .fill-B1{fill:#777470;}
.d2-680017394 .fill-B2{fill:#777470;}
.d2-680017394 .fill-B3{fill:transparent;}
.d2-680017394 .fill-B4{fill:transparent;}
.d2-680017394 .fill-B5{fill:transparent;}
.d2-680017394 .fill-B6{fill:transparent;}
.d2-680017394 .fill-AA2{fill:#4A6FF3;}
.d2-680017394 .fill-AA4{fill:transparent;}
.d2-680017394 .fill-AA5{fill:transparent;}
.d2-680017394 .fill-AB4{fill:transparent;}
.d2-680017394 .fill-AB5{fill:transparent;}
.d2-680017394 .stroke-N1{stroke:#222221;}
.d2-680017394 .stroke-N2{stroke:#323231;}
.d2-680017394 .stroke-N3{stroke:#9499AB;}
.d2-680017394 .stroke-N4{stroke:transparent;}
.d2-680017394 .stroke-N5{stroke:transparent;}
.d2-680017394 .stroke-N6{stroke:#EEF1F8;}
.d2-680017394 .stroke-N7{stroke:#ffffff;}
.d2-680017394 .stroke-B1{stroke:#777470;}
.d2-680017394 .stroke-B2{stroke:#777470;}
.d2-680017394 .stroke-B3{stroke:transparent;}
.d2-680017394 .stroke-B4{stroke:transparent;}
.d2-680017394 .stroke-B5{stroke:transparent;}
.d2-680017394 .stroke-B6{stroke:transparent;}
.d2-680017394 .stroke-AA2{stroke:#4A6FF3;}
.d2-680017394 .stroke-AA4{stroke:transparent;}
.d2-680017394 .stroke-AA5{stroke:transparent;}
.d2-680017394 .stroke-AB4{stroke:transparent;}
.d2-680017394 .stroke-AB5{stroke:transparent;}
.d2-680017394 .background-color-N1{background-color:#222221;}
.d2-680017394 .background-color-N2{background-color:#323231;}
.d2-680017394 .background-color-N3{background-color:#9499AB;}
.d2-680017394 .background-color-N4{background-color:transparent;}
.d2-680017394 .background-color-N5{background-color:transparent;}
.d2-680017394 .background-color-N6{background-color:#EEF1F8;}
.d2-680017394 .background-color-N7{background-color:#ffffff;}
.d2-680017394 .background-color-B1{background-color:#777470;}
.d2-680017394 .background-color-B2{background-color:#777470;}
.d2-680017394 .background-color-B3{background-color:transparent;}
.d2-680017394 .background-color-B4{background-color:transparent;}
.d2-680017394 .background-color-B5{background-color:transparent;}
.d2-680017394 .background-color-B6{background-color:transparent;}
.d2-680017394 .background-color-AA2{background-color:#4A6FF3;}
.d2-680017394 .background-color-AA4{background-color:transparent;}
.d2-680017394 .background-color-AA5{background-color:transparent;}
.d2-680017394 .background-color-AB4{background-color:transparent;}
.d2-680017394 .background-color-AB5{background-color:transparent;}
.d2-680017394 .color-N1{color:#222221;}
.d2-680017394 .color-N2{color:#323231;}
.d2-680017394 .color-N3{color:#9499AB;}
.d2-680017394 .color-N4{color:transparent;}
.d2-680017394 .color-N5{color:transparent;}
.d2-680017394 .color-N6{color:#EEF1F8;}
.d2-680017394 .color-N7{color:#ffffff;}
.d2-680017394 .color-B1{color:#777470;}
.d2-680017394 .color-B2{color:#777470;}
.d2-680017394 .color-B3{color:transparent;}
.d2-680017394 .color-B4{color:transparent;}
.d2-680017394 .color-B5{color:transparent;}
.d2-680017394 .color-B6{color:transparent;}
.d2-680017394 .color-AA2{color:#4A6FF3;}
.d2-680017394 .color-AA4{color:transparent;}
.d2-680017394 .color-AA5{color:transparent;}
.d2-680017394 .color-AB4{color:transparent;}
.d2-680017394 .color-AB5{color:transparent;}.appendix text.text{fill:#222221}.md{--color-fg-default:#222221;--color-fg-muted:#323231;--color-fg-subtle:#9499AB;--color-canvas-default:#ffffff;--color-canvas-subtle:#EEF1F8;--color-border-default:#777470;--color-border-muted:#777470;--color-neutral-muted:#EEF1F8;--color-accent-fg:#777470;--color-accent-emphasis:#777470;--color-attention-subtle:#323231;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-dark-d2-680017394);mix-blend-mode:overlay}.sketch-overlay-B2{fill:url(#streaks-dark-d2-680017394);mix-blend-mode:overlay}.sketch-overlay-B3{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-B4{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-B5{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-680017394);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-N3{fill:url(#streaks-normal-d2-680017394);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-N5{fill:url(#streaks-darker-d2-680017394);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-bright-d2-680017394);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-680017394);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css">.d2-680017394 .md em,
.d2-680017394 .md dfn {font-family: "d2-680017394-font-italic" !important;}
.d2-680017394 .md b,
.d2-680017394 .md strong {font-family: "d2-680017394-font-bold" !important;}
.d2-680017394 .md code,
.d2-680017394 .md kbd,
.d2-680017394 .md pre,
.d2-680017394 .md samp {font-family: "d2-680017394-font-mono" !important;
font-size: 1em;}
.d2-680017394 .md {tab-size: 4;}
/ variables are provided in d2renderers/d2svg/d2svg.go /
.d2-680017394 .md {-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
margin: 0;
background-color: transparent; /* we don't want to define the background color */
font-family: "d2-680017394-font-regular" !important;
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;}
.d2-680017394 .md details,
.d2-680017394 .md figcaption,
.d2-680017394 .md figure {display: block;}
.d2-680017394 .md summary {display: list-item;}
.d2-680017394 .md [hidden] {display: none !important;}
.d2-680017394 .md a {background-color: transparent;
color: var(--color-accent-fg);
text-decoration: none;}
.d2-680017394 .md a:active,
.d2-680017394 .md a:hover {outline-width: 0;}
.d2-680017394 .md abbr[title] {border-bottom: none;
text-decoration: underline dotted;}
.d2-680017394 .md dfn {font-style: italic;}
.d2-680017394 .md h1 {margin: 0.67em 0;
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid var(--color-border-muted);}
.d2-680017394 .md mark {background-color: var(--color-attention-subtle);
color: var(--color-text-primary);}
.d2-680017394 .md small {font-size: 90%;}
.d2-680017394 .md sub,
.d2-680017394 .md sup {font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;}
.d2-680017394 .md sub {bottom: -0.25em;}
.d2-680017394 .md sup {top: -0.5em;}
.d2-680017394 .md img {border-style: none;
max-width: 100%;
box-sizing: content-box;
background-color: var(--color-canvas-default);}
.d2-680017394 .md figure {margin: 1em 40px;}
.d2-680017394 .md hr {box-sizing: content-box;
overflow: hidden;
background: transparent;
border-bottom: 1px solid var(--color-border-muted);
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: var(--color-border-default);
border: 0;}
.d2-680017394 .md input {font: inherit;
margin: 0;
overflow: visible;
font-family: inherit;
font-size: inherit;
line-height: inherit;}
.d2-680017394 .md [type="button"],
.d2-680017394 .md [type="reset"],
.d2-680017394 .md [type="submit"] {-webkit-appearance: button;}
.d2-680017394 .md [type="button"]::-moz-focus-inner,
.d2-680017394 .md [type="reset"]::-moz-focus-inner,
.d2-680017394 .md [type="submit"]::-moz-focus-inner {border-style: none;
padding: 0;}
.d2-680017394 .md [type="button"]:-moz-focusring,
.d2-680017394 .md [type="reset"]:-moz-focusring,
.d2-680017394 .md [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
.d2-680017394 .md [type="checkbox"],
.d2-680017394 .md [type="radio"] {box-sizing: border-box;
padding: 0;}
.d2-680017394 .md [type="number"]::-webkit-inner-spin-button,
.d2-680017394 .md [type="number"]::-webkit-outer-spin-button {height: auto;}
.d2-680017394 .md [type="search"] {-webkit-appearance: textfield;
outline-offset: -2px;}
.d2-680017394 .md [type="search"]::-webkit-search-cancel-button,
.d2-680017394 .md [type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
.d2-680017394 .md ::-webkit-input-placeholder {color: inherit;
opacity: 0.54;}
.d2-680017394 .md ::-webkit-file-upload-button {-webkit-appearance: button;
font: inherit;}
.d2-680017394 .md a:hover {text-decoration: underline;}
.d2-680017394 .md hr::before {display: table;
content: "";}
.d2-680017394 .md hr::after {display: table;
clear: both;
content: "";}
.d2-680017394 .md table {border-spacing: 0;
border-collapse: collapse;
display: block;
width: max-content;
max-width: 100%;
overflow: auto;}
.d2-680017394 .md td,
.d2-680017394 .md th {padding: 0;}
.d2-680017394 .md details summary {cursor: pointer;}
.d2-680017394 .md details:not([open]) > *:not(summary) {display: none !important;}
.d2-680017394 .md kbd {display: inline-block;
padding: 3px 5px;
color: var(--color-fg-default);
vertical-align: middle;
background-color: var(--color-canvas-subtle);
border: solid 1px var(--color-neutral-muted);
border-bottom-color: var(--color-neutral-muted);
border-radius: 6px;
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);}
.d2-680017394 .md h1,
.d2-680017394 .md h2,
.d2-680017394 .md h3,
.d2-680017394 .md h4,
.d2-680017394 .md h5,
.d2-680017394 .md h6 {margin-top: 24px;
margin-bottom: 16px;
font-weight: 400;
line-height: 1.25;
font-family: "d2-680017394-font-semibold" !important;}
.d2-680017394 .md h2 {padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid var(--color-border-muted);}
.d2-680017394 .md h3 {font-size: 1.25em;}
.d2-680017394 .md h4 {font-size: 1em;}
.d2-680017394 .md h5 {font-size: 0.875em;}
.d2-680017394 .md h6 {font-size: 0.85em;
color: var(--color-fg-muted);}
.d2-680017394 .md p {margin-top: 0;
margin-bottom: 10px;}
.d2-680017394 .md blockquote {margin: 0;
padding: 0 1em;
color: var(--color-fg-muted);
border-left: 0.25em solid var(--color-border-default);}
.d2-680017394 .md ul,
.d2-680017394 .md ol {margin-top: 0;
margin-bottom: 0;
padding-left: 2em;}
.d2-680017394 .md ol ol,
.d2-680017394 .md ul ol {list-style-type: lower-roman;}
.d2-680017394 .md ul ul ol,
.d2-680017394 .md ul ol ol,
.d2-680017394 .md ol ul ol,
.d2-680017394 .md ol ol ol {list-style-type: lower-alpha;}
.d2-680017394 .md dd {margin-left: 0;}
.d2-680017394 .md pre {margin-top: 0;
margin-bottom: 0;
word-wrap: normal;}
.d2-680017394 .md ::placeholder {color: var(--color-fg-subtle);
opacity: 1;}
.d2-680017394 .md input::-webkit-outer-spin-button,
.d2-680017394 .md input::-webkit-inner-spin-button {margin: 0;
-webkit-appearance: none;
appearance: none;}
.d2-680017394 .md::before {display: table;
content: "";}
.d2-680017394 .md::after {display: table;
clear: both;
content: "";}
.d2-680017394 .md > *:first-child {margin-top: 0 !important;}
.d2-680017394 .md > *:last-child {margin-bottom: 0 !important;}
.d2-680017394 .md a:not([href]) {color: inherit;
text-decoration: none;}
.d2-680017394 .md .absent {color: var(--color-danger-fg);}
.d2-680017394 .md .anchor {float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;}
.d2-680017394 .md .anchor:focus {outline: none;}
.d2-680017394 .md p,
.d2-680017394 .md blockquote,
.d2-680017394 .md ul,
.d2-680017394 .md ol,
.d2-680017394 .md dl,
.d2-680017394 .md table,
.d2-680017394 .md pre,
.d2-680017394 .md details {margin-top: 0;
margin-bottom: 16px;}
.d2-680017394 .md blockquote > :first-child {margin-top: 0;}
.d2-680017394 .md blockquote > :last-child {margin-bottom: 0;}
.d2-680017394 .md sup > a::before {content: "[";}
.d2-680017394 .md sup > a::after {content: "]";}
.d2-680017394 .md h1:hover .anchor,
.d2-680017394 .md h2:hover .anchor,
.d2-680017394 .md h3:hover .anchor,
.d2-680017394 .md h4:hover .anchor,
.d2-680017394 .md h5:hover .anchor,
.d2-680017394 .md h6:hover .anchor {text-decoration: none;}
.d2-680017394 .md h1 tt,
.d2-680017394 .md h1 code,
.d2-680017394 .md h2 tt,
.d2-680017394 .md h2 code,
.d2-680017394 .md h3 tt,
.d2-680017394 .md h3 code,
.d2-680017394 .md h4 tt,
.d2-680017394 .md h4 code,
.d2-680017394 .md h5 tt,
.d2-680017394 .md h5 code,
.d2-680017394 .md h6 tt,
.d2-680017394 .md h6 code {padding: 0 0.2em;
font-size: inherit;}
.d2-680017394 .md ul.no-list,
.d2-680017394 .md ol.no-list {padding: 0;
list-style-type: none;}
.d2-680017394 .md ol[type="1"] {list-style-type: decimal;}
.d2-680017394 .md ol[type="a"] {list-style-type: lower-alpha;}
.d2-680017394 .md ol[type="i"] {list-style-type: lower-roman;}
.d2-680017394 .md div > ol:not([type]) {list-style-type: decimal;}
.d2-680017394 .md ul ul,
.d2-680017394 .md ul ol,
.d2-680017394 .md ol ol,
.d2-680017394 .md ol ul {margin-top: 0;
margin-bottom: 0;}
.d2-680017394 .md li > p {margin-top: 16px;}
.d2-680017394 .md li + li {margin-top: 0.25em;}
.d2-680017394 .md dl {padding: 0;}
.d2-680017394 .md dl dt {padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-family: "d2-680017394-font-semibold" !important;}
.d2-680017394 .md dl dd {padding: 0 16px;
margin-bottom: 16px;}
.d2-680017394 .md table th {font-family: "d2-680017394-font-semibold" !important;}
.d2-680017394 .md table th,
.d2-680017394 .md table td {padding: 6px 13px;
border: 1px solid var(--color-border-default);}
.d2-680017394 .md table tr {background-color: var(--color-canvas-default);
border-top: 1px solid var(--color-border-muted);}
.d2-680017394 .md table tr:nth-child(2n) {background-color: var(--color-canvas-subtle);}
.d2-680017394 .md table img {background-color: transparent;}
.d2-680017394 .md img[align="right"] {padding-left: 20px;}
.d2-680017394 .md img[align="left"] {padding-right: 20px;}
.d2-680017394 .md span.frame {display: block;
overflow: hidden;}
.d2-680017394 .md span.frame > span {display: block;
float: left;
width: auto;
padding: 7px;
margin: 13px 0 0;
overflow: hidden;
border: 1px solid var(--color-border-default);}
.d2-680017394 .md span.frame span img {display: block;
float: left;}
.d2-680017394 .md span.frame span span {display: block;
padding: 5px 0 0;
clear: both;
color: var(--color-fg-default);}
.d2-680017394 .md span.align-center {display: block;
overflow: hidden;
clear: both;}
.d2-680017394 .md span.align-center > span {display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: center;}
.d2-680017394 .md span.align-center span img {margin: 0 auto;
text-align: center;}
.d2-680017394 .md span.align-right {display: block;
overflow: hidden;
clear: both;}
.d2-680017394 .md span.align-right > span {display: block;
margin: 13px 0 0;
overflow: hidden;
text-align: right;}
.d2-680017394 .md span.align-right span img {margin: 0;
text-align: right;}
.d2-680017394 .md span.float-left {display: block;
float: left;
margin-right: 13px;
overflow: hidden;}
.d2-680017394 .md span.float-left span {margin: 13px 0 0;}
.d2-680017394 .md span.float-right {display: block;
float: right;
margin-left: 13px;
overflow: hidden;}
.d2-680017394 .md span.float-right > span {display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: right;}
.d2-680017394 .md code,
.d2-680017394 .md tt {padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: var(--color-neutral-muted);
border-radius: 6px;}
.d2-680017394 .md code br,
.d2-680017394 .md tt br {display: none;}
.d2-680017394 .md del code {text-decoration: inherit;}
.d2-680017394 .md pre code {font-size: 100%;}
.d2-680017394 .md pre > code {padding: 0;
margin: 0;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;}
.d2-680017394 .md .highlight {margin-bottom: 16px;}
.d2-680017394 .md .highlight pre {margin-bottom: 0;
word-break: normal;}
.d2-680017394 .md .highlight pre,
.d2-680017394 .md pre {padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: var(--color-canvas-subtle);
border-radius: 6px;}
.d2-680017394 .md pre code,
.d2-680017394 .md pre tt {display: inline;
max-width: auto;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;}
.d2-680017394 .md .csv-data td,
.d2-680017394 .md .csv-data th {padding: 5px;
overflow: hidden;
font-size: 12px;
line-height: 1;
text-align: left;
white-space: nowrap;}
.d2-680017394 .md .csv-data .blob-num {padding: 10px 8px 9px;
text-align: right;
background: var(--color-canvas-default);
border: 0;}
.d2-680017394 .md .csv-data tr {border-top: 0;}
.d2-680017394 .md .csv-data th {font-family: "d2-680017394-font-semibold" !important;
background: var(--color-canvas-subtle);
border-top: 0;}
.d2-680017394 .md .footnotes {font-size: 12px;
color: var(--color-fg-muted);
border-top: 1px solid var(--color-border-default);}
.d2-680017394 .md .footnotes ol {padding-left: 16px;}
.d2-680017394 .md .footnotes li {position: relative;}
.d2-680017394 .md .footnotes li:target::before {position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -24px;
pointer-events: none;
content: "";
border: 2px solid var(--color-accent-emphasis);
border-radius: 6px;}
.d2-680017394 .md .footnotes li:target {color: var(--color-fg-default);}
.d2-680017394 .md .task-list-item {list-style-type: none;}
.d2-680017394 .md .task-list-item label {font-weight: 400;}
.d2-680017394 .md .task-list-item.enabled label {cursor: pointer;}
.d2-680017394 .md .task-list-item + .task-list-item {margin-top: 3px;}
.d2-680017394 .md .task-list-item .handle {display: none;}
.d2-680017394 .md .task-list-item-checkbox {margin: 0 0.2em 0.25em -1.6em;
vertical-align: middle;}
.d2-680017394 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {margin: 0 -1.6em 0.25em 0.2em;}
</style><g class="ZGlhZ3JhbQ=="><g class="shape" ><rect x="200.000000" y="0.000000" width="1044.000000" height="1399.000000" stroke="#777470" fill="#ffffff" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g></g><g class="dG9vbHRpcCAx"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="880.000000" width="241" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Loading assets and third-party</p>
</div></foreignObject></g></g><g class="dG9vbHRpcCAy"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="25.000000" y="900.000000" width="196" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>scripts during this time. a</p>
</div></foreignObject></g></g><g class="ZGlhZ3JhbS5icm93c2Vy heading with icon"><g class="shape" ><rect x="212.000000" y="54.000000" width="160.000000" height="92.000000" stroke="#777470" fill="transparent" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><image href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMjUgNmEzIDMgMCAwMTMtM2gxMy41YTMgMyAwIDAxMyAzdjEyYTMgMyAwIDAxLTMgM0g1LjI1YTMgMyAwIDAxLTMtM1Y2em0zLTEuNUExLjUgMS41IDAgMDAzLjc1IDZ2MS41aDE2LjVWNmExLjUgMS41IDAgMDAtMS41LTEuNUg1LjI1em0xNSA0LjVIMy43NXY5YTEuNSAxLjUgMCAwMDEuNSAxLjVoMTMuNWExLjUgMS41IDAgMDAxLjUtMS41Vjl6TTQuNSA2YS43NS43NSAwIDAxLjc1LS43NWguMDA4YS43NS43NSAwIDAxLjc1Ljc1di4wMDhhLjc1Ljc1IDAgMDEtLjc1Ljc1SDUuMjVhLjc1Ljc1IDAgMDEtLjc1LS43NVY2em0yLjI1IDBhLjc1Ljc1IDAgMDEuNzUtLjc1aC4wMDhhLjc1Ljc1IDAgMDEuNzUuNzV2LjAwOGEuNzUuNzUgMCAwMS0uNzUuNzVINy41YS43NS43NSAwIDAxLS43NS0uNzVWNnpNOSA2YS43NS43NSAwIDAxLjc1LS43NWguMDA4YS43NS43NSAwIDAxLjc1Ljc1di4wMDhhLjc1Ljc1IDAgMDEtLjc1Ljc1SDkuNzVhLjc1Ljc1IDAgMDEtLjc1LS43NVY2eiIgZmlsbD0iIzE0MTQxMyIvPgo8L3N2Zz4K" x="269.000000" y="95.000000" width="46" height="46" /><text x="292.000000" y="75.000000" fill="#222221" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Browser</text></g><g class="ZGlhZ3JhbS5zZXJ2ZXI= heading with icon"><g class="shape" ><rect x="455.000000" y="52.000000" width="179.000000" height="94.000000" stroke="#777470" fill="transparent" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><image href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNDM4IDQuNWMtLjgyNyAwLTEuNjA1LjM4OS0yLjEgMS4wNUw0Ljg2IDcuNTJjLjEyOC0uMDEzLjI1OC0uMDIuMzktLjAyaDEzLjVjLjEzMiAwIC4yNjIuMDA3LjM5LjAybC0xLjQ3Ny0xLjk3YTIuNjI1IDIuNjI1IDAgMDAtMi4xLTEuMDVIOC40MzZ6TTIxIDExLjI1QTIuMjUgMi4yNSAwIDAwMTguNzUgOUg1LjI1YTIuMjUgMi4yNSAwIDAwMCA0LjVoMTMuNUEyLjI1IDIuMjUgMCAwMDIxIDExLjI1em0wIDNhMy43NDQgMy43NDQgMCAwMDEuNS0zIDUuMjUgNS4yNSAwIDAwLTEuMDUtMy4xNWwtMi41ODctMy40NS0uNi40NS42LS40NWE0LjEyNSA0LjEyNSAwIDAwLTMuMy0xLjY1SDguNDM2YTQuMTI1IDQuMTI1IDAgMDAtMy4zIDEuNjVMMi41NSA4LjFhNS4yNSA1LjI1IDAgMDAtMS4wNSAzLjE1YzAgMS4yMjcuNTg5IDIuMzE2IDEuNSAzQTMuNzUgMy43NSAwIDAwNS4yNSAyMWgxMy41QTMuNzUgMy43NSAwIDAwMjEgMTQuMjV6TTUuMjUgMTVhMi4yNSAyLjI1IDAgMDAwIDQuNWgxMy41YTIuMjUgMi4yNSAwIDAwMC00LjVINS4yNXpNMTUgMTEuMjVhLjc1Ljc1IDAgMDEuNzUtLjc1aC4wMDhhLjc1Ljc1IDAgMDEuNzUuNzV2LjAwOGEuNzUuNzUgMCAwMS0uNzUuNzVoLS4wMDhhLjc1Ljc1IDAgMDEtLjc1LS43NXYtLjAwOHptMyAwYS43NS43NSAwIDAxLjc1LS43NWguMDA4YS43NS43NSAwIDAxLjc1Ljc1di4wMDhhLjc1Ljc1IDAgMDEtLjc1Ljc1aC0uMDA4YS43NS43NSAwIDAxLS43NS0uNzV2LS4wMDh6bS0zIDZhLjc1Ljc1IDAgMDEuNzUtLjc1aC4wMDhhLjc1Ljc1IDAgMDEuNzUuNzV2LjAwOGEuNzUuNzUgMCAwMS0uNzUuNzVoLS4wMDhhLjc1Ljc1IDAgMDEtLjc1LS43NXYtLjAwOHptMyAwYS43NS43NSAwIDAxLjc1LS43NWguMDA4YS43NS43NSAwIDAxLjc1Ljc1di4wMDhhLjc1Ljc1IDAgMDEtLjc1Ljc1aC0uMDA4YS43NS43NSAwIDAxLS43NS0uNzV2LS4wMDh6IiBmaWxsPSIjMTQxNDEzIi8+Cjwvc3ZnPgo=" x="521.000000" y="94.000000" width="47" height="47" /><text x="544.500000" y="73.000000" fill="#222221" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Next.js Server</text></g><g class="ZGlhZ3JhbS5lY29t heading with icon"><g class="shape" ><rect x="674.000000" y="52.000000" width="244.000000" height="94.000000" stroke="#777470" fill="transparent" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><image href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNSAzYS43NS43NSAwIDAxLjc1LS43NWgxLjM4NmMuODUgMCAxLjU5My41NzEgMS44MTEgMS4zOTJsLjIzMi44NjdhNjAuODY0IDYwLjg2NCAwIDAxMTYuMTQ5IDEuODc3Ljc1Ljc1IDAgMDEuNTI1Ljk2NSA2MC4zNTggNjAuMzU4IDAgMDEtMi45NiA3LjIyOC43NS43NSAwIDAxLS42NzUuNDIxSDcuNWEyLjI1IDIuMjUgMCAwMC0yLjEyMiAxLjVIMjAuMjVhLjc1Ljc1IDAgMDEwIDEuNUg0LjVhLjc1Ljc1IDAgMDEtLjc1LS43NSAzLjc1MiAzLjc1MiAwIDAxMi44MDYtMy42M0w0LjM4IDUuNDY1bC0uMzgzLTEuNDM3YS4zNzUuMzc1IDAgMDAtLjM2Mi0uMjc4SDIuMjVBLjc1Ljc1IDAgMDExLjUgM3ptNC41NzcgMy4wMDRsMiA3LjQ5NmgxMC4xN2E1OC44ODYgNTguODg2IDAgMDAyLjQyLTUuODU3IDU5LjQwNiA1OS40MDYgMCAwMC0xNC41OS0xLjY0ek0zLjc1IDIwLjI1YTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAwem0xMi43NSAwYTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAweiIgZmlsbD0iIzE0MTQxMyIvPgo8L3N2Zz4K" x="772.500000" y="94.000000" width="47" height="47" /><text x="796.000000" y="73.000000" fill="#222221" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">E-commerce Platform</text></g><g class="ZGlhZ3JhbS5keQ== heading with icon"><g class="shape" ><rect x="958.000000" y="52.000000" width="274.000000" height="94.000000" stroke="#777470" fill="transparent" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><image href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGl0bGU+CiAgICBJY29ucyAvIE1hc3RlcmNhcmQgLyBCdXNpbmVzcyBUZWNoICZhbXA7IFRyYW5zYWN0aW9ucyAvIHBlcnNvbmFsaXphdGlvbiAxCiAgPC90aXRsZT4KICA8cGF0aCBkPSJNNyAxN3Y1SDZ2LTMuMjkzbC01IDVMLjI5MyAyM2w1LTVIMnYtMWg1em0xNSAwdjFoLTMuMjkzbDUgNS0uNzA3LjcwNy01LTVWMjJoLTF2LTVoNXptLTcuNTM0LTYuOTc0YS42NC42NCAwIDAxLjcyNS4yNzdsMi44ODkgNC42MjItLjg0OS41M0wxNSAxMS44ODVWMThIOXYtNi4xMTVsLTIuMjMyIDMuNTctLjg0OC0uNTMgMi44ODktNC42MjFhLjY0My42NDMgMCAwMTEuMTkxLjM0MVYxN2g0di02LjM1NWMwLS4yOTEuMTg4LS41NC40NjYtLjYxOXpNMTIgNWMxLjI0MSAwIDIuMjUgMS4wMSAyLjI1IDIuMjVTMTMuMjQxIDkuNSAxMiA5LjVhMi4yNTMgMi4yNTMgMCAwMS0yLjI1LTIuMjVDOS43NSA2LjAxIDEwLjc1OSA1IDEyIDV6bTAgMWMtLjY4OSAwLTEuMjUuNTYxLTEuMjUgMS4yNVMxMS4zMTEgOC41IDEyIDguNXMxLjI1LS41NjEgMS4yNS0xLjI1UzEyLjY4OSA2IDEyIDZ6TTIzIC4yOTNsLjcwNy43MDctNSA1SDIydjFoLTVWMmgxdjMuMjkzbDUtNXptLTIyIDBsNSA1VjJoMXY1SDJWNmgzLjI5M2wtNS01TDEgLjI5M3oiIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPgo=" x="1071.500000" y="94.000000" width="47" height="47" /><text x="1095.000000" y="73.000000" fill="#222221" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Mastercard Dynamic Yield</text></g><g class="KGRpYWdyYW0uYnJvd3NlciAtLSApWzBd"><path d="M 292.000000 148.000000 L 292.000000 1386.000000" stroke="#777470" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-680017394)" /></g><g class="KGRpYWdyYW0uc2VydmVyIC0tIClbMF0="><path d="M 544.500000 148.000000 L 544.500000 1386.000000" stroke="#777470" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-680017394)" /></g><g class="KGRpYWdyYW0uZWNvbSAtLSApWzBd"><path d="M 796.000000 148.000000 L 796.000000 1386.000000" stroke="#777470" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-680017394)" /></g><g class="KGRpYWdyYW0uZHkgLS0gKVswXQ=="><path d="M 1095.000000 148.000000 L 1095.000000 1386.000000" stroke="#777470" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-680017394)" /></g><g class="ZGlhZ3JhbS5zZXJ2ZXIucmVxdWVzdA=="><g class="shape" ><rect x="538.000000" y="239.000000" width="12.000000" height="851.000000" stroke="#777470" fill="#e8e5e1" class=" stroke-B1" style="stroke-width:2;" /></g></g><g class="ZGlhZ3JhbS5icm93c2VyLnJlbmRlcmluZw=="><g class="shape" ><rect x="286.000000" y="525.000000" width="12.000000" height="721.000000" stroke="#777470" fill="#e8e5e1" class=" stroke-B1" style="stroke-width:2;" /></g></g><g class="ZGlhZ3JhbS5zZXJ2ZXIucmVxdWVzdC5pbml0"><g class="shape" ><rect x="534.000000" y="249.000000" width="20.000000" height="296.000000" stroke="#777470" fill="#e8e5e1" class=" stroke-B1" style="stroke-width:2;" /></g></g><g class="ZGlhZ3JhbS5Jbml0aWFsIEhUTUwgcmVzcG9uc2U="><g class="shape blend" ><rect x="252.000000" y="204.000000" width="883.000000" height="354.000000" stroke="#777470" fill="#f3f0ee" class=" stroke-B1" style="stroke-width:0;" /></g><rect x="257.000000" y="209.000000" width="166.000000" height="22.000000" fill="#f3f0ee" /><text x="340.000000" y="225.000000" fill="#222221" class="text fill-N1" style="text-anchor:middle;font-size:16px">Initial HTML response</text></g><g class="ZGlhZ3JhbS4oYnJvd3NlciAtJmd0OyBzZXJ2ZXIucmVxdWVzdC5pbml0KVswXQ=="><marker id="mk-d2-680017394-499067918" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#f37338" class="connection" stroke-width="2" /> </marker><path d="M 294.000000 259.000000 L 530.500000 259.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="413.500000" y="264.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">Request</text></g><g class="ZGlhZ3JhbS4oc2VydmVyLnJlcXVlc3QuaW5pdCAtJmd0OyBlY29tKVswXQ=="><path d="M 556.500000 351.000000 L 792.000000 351.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="675.000000" y="356.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">Initiate cart read API call</text></g><g class="ZGlhZ3JhbS4oc2VydmVyLnJlcXVlc3QuaW5pdCAtJmd0OyBkeSlbMF0="><path d="M 556.500000 443.000000 L 1091.000000 443.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="825.000000" y="448.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">Initiate "Choose" API call</text></g><g class="ZGlhZ3JhbS4oc2VydmVyLnJlcXVlc3QuaW5pdCAtJmd0OyBicm93c2VyLnJlbmRlcmluZylbMF0="><path d="M 532.500000 535.000000 L 302.000000 535.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="416.500000" y="540.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">Static and cached HTML</text></g><g class="ZGlhZ3JhbS4oZHkgLSZndDsgc2VydmVyLnJlcXVlc3QpWzBd"><path d="M 1093.000000 780.000000 L 554.500000 780.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="822.500000" y="785.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">"Choose" API response</text></g><g class="ZGlhZ3JhbS4oc2VydmVyLnJlcXVlc3QgLSZndDsgYnJvd3Nlci5yZW5kZXJpbmcpWzBd"><path d="M 536.500000 880.000000 L 302.000000 880.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="418.000000" y="877.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="418.000000" dy="0.000000">React Server Component</tspan><tspan x="418.000000" dy="19.000000">with personalized data</tspan></text></g><g class="ZGlhZ3JhbS4oZWNvbSAtJmd0OyBzZXJ2ZXIucmVxdWVzdClbMF0="><path d="M 794.000000 980.000000 L 554.500000 980.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="673.500000" y="985.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">Cart read API response</text></g><g class="ZGlhZ3JhbS4oc2VydmVyLnJlcXVlc3QgLSZndDsgYnJvd3Nlci5yZW5kZXJpbmcpWzFd"><path d="M 536.500000 1080.000000 L 302.000000 1080.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="418.000000" y="1077.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px"><tspan x="418.000000" dy="0.000000">React Server Component</tspan><tspan x="418.000000" dy="19.000000">with cart data</tspan></text></g><g class="ZGlhZ3JhbS4oYnJvd3NlciAmbHQ7LSZndDsgc2VydmVyKVswXQ=="><marker id="mk-d2-680017394-2932033717" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" fill="#f37338" class="connection" stroke-width="2" /> </marker><path d="M 296.000000 1317.000000 L 540.500000 1317.000000" stroke="#f37338" fill="none" class="connection" style="stroke-width:2;" marker-start="url(#mk-d2-680017394-2932033717)" marker-end="url(#mk-d2-680017394-499067918)" mask="url(#d2-680017394)" /><text x="418.000000" y="1322.000000" fill="#f37338" class="text-italic" style="text-anchor:middle;font-size:16px">Other requests</text></g><g class="ZGlhZ3JhbS5icm93c2VyLnJlbmRlcmluZy4mIzM0O1N0YXJ0IHBhZ2UgcmVuZGVyaW5nXG53aXRoIGZpcnN0IGNvbnRlbnRmdWwgcGFpbnQmIzM0Ow=="><g class="shape" ><path d="M 170 616 H 394 C 395 616 396 616 397 617 L 414 633 C 415 634 415 635 415 636 V 699 C 415 699 415 699 415 699 H 170 C 169 699 169 699 169 699 V 617 C 169 616 169 616 170 616 Z" stroke="#777470" fill="#ffffff" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 414 699 H 170 C 169 699 169 699 169 698 V 617 C 169 616 169 616 170 616 H 393 C 394 616 394 616 394 617 V 634 C 394 635 395 636 396 636 H 414 C 415 636 415 636 415 637 V 698 C 414 699 415 699 414 699 Z" stroke="#777470" fill="#ffffff" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="292.000000" y="654.500000" fill="#222221" class="text fill-N1" style="text-anchor:middle;font-size:16px"><tspan x="292.000000" dy="0.000000">Start page rendering</tspan><tspan x="292.000000" dy="19.000000">with first contentful paint</tspan></text></g><g class="ZGlhZ3JhbS5icm93c2VyLnJlbmRlcmluZy5Db21wbGV0ZSBwYWdlIHJlbmRlcmluZw=="><g class="shape" ><path d="M 172 1169 H 391 C 392 1169 393 1169 394 1170 L 411 1186 C 412 1187 412 1188 412 1189 V 1236 C 412 1236 412 1236 412 1236 H 172 C 171 1236 171 1236 171 1236 V 1170 C 171 1169 171 1169 172 1169 Z" stroke="#777470" fill="#ffffff" class=" stroke-B1 fill-N7" style="stroke-width:2;" /><path d="M 411 1236 H 172 C 171 1236 171 1236 171 1235 V 1170 C 171 1169 171 1169 172 1169 H 390 C 391 1169 391 1169 391 1170 V 1187 C 391 1188 392 1189 393 1189 H 411 C 412 1189 412 1189 412 1190 V 1235 C 411 1236 412 1236 411 1236 Z" stroke="#777470" fill="#ffffff" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="291.500000" y="1207.500000" fill="#222221" class="text fill-N1" style="text-anchor:middle;font-size:16px">Complete page rendering</text></g><mask id="d2-680017394" maskUnits="userSpaceOnUse" x="-11" y="-10" width="1265" height="1419">
<rect x="-11" y="-10" width="1265" height="1419" fill="white"></rect>
<rect x="380.000000" y="248.000000" width="67" height="22" fill="black"></rect>
<rect x="579.000000" y="340.000000" width="192" height="22" fill="black"></rect>
<rect x="728.000000" y="432.000000" width="194" height="22" fill="black"></rect>
<rect x="321.000000" y="524.000000" width="191" height="22" fill="black"></rect>
<rect x="735.000000" y="769.000000" width="175" height="22" fill="black"></rect>
<rect x="320.000000" y="861.000000" width="196" height="38" fill="black"></rect>
<rect x="584.000000" y="969.000000" width="179" height="22" fill="black"></rect>
<rect x="320.000000" y="1061.000000" width="196" height="38" fill="black"></rect>
<rect x="359.000000" y="1306.000000" width="118" height="22" fill="black"></rect>
</mask></svg>
The differences between partial prerendering and fetching data from the client-side include:
The request for the data is initiated very early, as soon as the server knows it will be needed, compared to client-side which only initiates it after the browser renders the server’s response and hydrates the components. This also means that the data is available earlier, often dozens or even hundreds of milliseconds. With a large page and a small component, the component’s data may arrive before its hydration.
The fetching of the data is server-to-server which can lower latency and overheads especially for the first pageview and for devices with worse network connections.
API keys and secrets are not exposed to the browser.[2]
Cache Components are not enabled by default and enabling them requires annotation changes to existing layouts and pages. See Enabling Cache Components in the Next.js documentation.
Code example
With Cache Components, this is straightforward to implement. Observe this function that fetches campaign data from Dynamic Yield.
The key elements here are:
<RecsWidget /> is a dynamic server-side component that includes a recommendations widget, which will stream to the browser when its data is ready. It looks like a standard React Server Component.
Home is a page to be rendered synchronously. It will only include static HTML/JSX elements, and <Suspense /> components as seen to load dynamic components (optionally cached). Here it uses <Suspense /> to load <RecsWidget /> and specifies what would be the fallback content as it loads. In real-life, the fallback content would be of similar properties to the final content: similar dimensions, similar visual shape or perhaps blank.
The Dynamic Yield identifiers management and the <SetDyIds /> component are explained in the “Implementing Mastercard Dynamic Yield’s Experience API in Next.js 16” article. Contact your technical account manager for more information.
export interface DyCookieResponse {</span> <span style="color: #222221"> name: string;</span> <span style="color: #222221"> value: string;</span> <span style="color: #222221"> maxAge: string;</span> <span style="color: #222221">}
async function getDyCookies() {</span> <span style="color: #222221"> <strong>const</strong> cookieStore = <strong>await</strong> cookies();</span> <span style="color: #222221"> <strong>const</strong> dyId = cookieStore.get(</span><span style="color: #CF4500">'_dyid'</span><span style="color: #222221">)?.value ?? </span><span style="color: #CF4500">''</span><span style="color: #222221">;</span> <span style="color: #222221"> <strong>const</strong> dyIdServer = cookieStore.get(</span><span style="color: #CF4500">'_dyid_server'</span><span style="color: #222221">)?.value ?? </span><span style="color: #CF4500">''</span><span style="color: #222221">;</span> <span style="color: #222221"> <strong>const</strong> dySession = cookieStore.get(</span><span style="color: #CF4500">'_dyjsession'</span><span style="color: #222221">)?.value ?? </span><span style="color: #CF4500">''</span><span style="color: #222221">;</span> <span style="color: #222221"> <strong>return</strong> { dyId, dyIdServer, dySession };</span> <span style="color: #222221">}
async function fetchDyData(selectors: string[]) {</span> <span style="color: #222221"> </span><span style="color: #F38B00">// Ensure this function can't be included in the client-side bundle with the API key</span> <span style="color: #222221"> </span><span style="color: #CF4500">'use server'</span><span style="color: #222221">;</span> <span style="color: #222221"> <strong>const</strong> { dyId, dyIdServer, dySession } = <strong>await</strong> getDyCookies();</span> <span style="color: #222221"> <strong>const</strong> url = </span><span style="color: #CF4500">'https://dy-api.com/v2/serve/user/choose'</span><span style="color: #222221">;</span> <span style="color: #222221"> <strong>const</strong> options = {</span> <span style="color: #222221"> method: </span><span style="color: #CF4500">'POST'</span><span style="color: #222221">,</span> <span style="color: #222221"> headers: {</span> <span style="color: #222221"> accept: </span><span style="color: #CF4500">'application/json'</span><span style="color: #222221">,</span> <span style="color: #222221"> </span><span style="color: #CF4500">'content-type'</span><span style="color: #222221">: </span><span style="color: #CF4500">'application/json'</span><span style="color: #222221">,</span> <span style="color: #222221"> </span><span style="color: #CF4500">'dy-api-key'</span><span style="color: #222221">: process.env.DY_API_KEY,</span> <span style="color: #222221"> },</span> <span style="color: #222221"> body: JSON.stringify({</span> <span style="color: #222221"> user: { dyid: dyId, dyid_server: dyIdServer },</span> <span style="color: #222221"> session: { dy: dySession },</span> <span style="color: #222221"> context: {</span> <span style="color: #222221"> </span><span style="color: #F38B00">// ...</span> <span style="color: #222221"> },</span> <span style="color: #222221"> selector: { names: selectors },</span> <span style="color: #222221"> })</span> <span style="color: #222221"> };</span> <span style="color: #222221"> <strong>const</strong> response = <strong>await</strong> fetch(url, options);</span> <span style="color: #222221"> <strong>const</strong> result = <strong>await</strong> response.json();</span> <span style="color: #222221"> <strong>const</strong> newCookies: DyCookieResponse[] = result.cookies ?? [];</span> <span style="color: #222221"> <strong>const</strong> dyidServerCookie =</span> <span style="color: #222221"> newCookies.find((cookie: { name: string }) => cookie.name === </span><span style="color: #CF4500">'_dyid_server'</span><span style="color: #222221">);</span> <span style="color: #222221"> <strong>const</strong> dyjsessionCookie =</span> <span style="color: #222221"> newCookies.find((cookie: { name: string }) => cookie.name === </span><span style="color: #CF4500">'_dyjsession'</span><span style="color: #222221">);</span> <span style="color: #222221"> <strong>return</strong> { dyid: dyidServerCookie, dyjsession: dyjsessionCookie, choices: result.choices };</span> <span style="color: #222221">}
type Slot = {</span> <span style="color: #222221"> sku: string;</span> <span style="color: #222221"> productData: {</span> <span style="color: #222221"> name: string;</span> <span style="color: #222221"> price: string;</span> <span style="color: #222221"> };</span> <span style="color: #222221">};
export async function RecsWidget() {</span> <span style="color: #222221"> <strong>const</strong> { dyid, dyjsession, choices } = <strong>await</strong> fetchDyData([</span><span style="color: #CF4500">"Homepage Trending Products"</span><span style="color: #222221">]);</span> <span style="color: #222221"> <strong>const</strong> choice = choices?.[</span><span style="color: #266555">0</span><span style="color: #222221">].variations?.[</span><span style="color: #266555">0</span><span style="color: #222221">].payload.data <strong>as</strong> { slots: Slot[] } | undefined;</span> <span style="color: #222221"> <strong>return</strong> </span><span style="color: #96918B"><></span> <span style="color: #222221"> {dyid && dyjsession && </span><span style="color: #96918B"><</span><span style="color: #222221">SetDyIds dyid={dyid} dyjsession={dyjsession} </span><span style="color: #96918B">/></span><span style="color: #222221">}</span> <span style="color: #222221"> </span><span style="color: #96918B"><</span><span style="color: #222221">ul</span><span style="color: #96918B">></span> <span style="color: #222221"> {choice && choice.slots.map(({ sku, productData }, index: number) => (</span> <span style="color: #222221"> </span><span style="color: #96918B"><</span><span style="color: #222221">li key={index}</span><span style="color: #96918B">></span> <span style="color: #222221"> </span><span style="color: #96918B"><</span><span style="color: #222221">strong</span><span style="color: #96918B">></span><span style="color: #222221">{productData.name}</span><span style="color: #96918B"></</span><span style="color: #222221">strong</span><span style="color: #96918B">></span><span style="color: #222221"> (SKU: {sku}) - ${productData.price}</span> <span style="color: #222221"> </span><span style="color: #96918B"></</span><span style="color: #222221">li</span><span style="color: #96918B">></span> <span style="color: #222221"> ))}</span> <span style="color: #222221"> </span><span style="color: #96918B"></</span><span style="color: #222221">ul</span><span style="color: #96918B">></span> <span style="color: #222221"> </span><span style="color: #96918B"></></span><span style="color: #222221">;</span> <span style="color: #222221">}
export default async function Home() {
return (
<div className={styles.page}>
<main className={styles.main}>
<Suspense fallback={</span><span style="color: #96918B"><</span><span style="color: #222221">div</span><span style="color: #96918B">></span><span style="color: #222221">Loading dynamic content...</span><span style="color: #96918B"></</span><span style="color: #222221">div</span><span style="color: #96918B">></span><span style="color: #222221">}>
<RecsWidget />
</Suspense>
...
This feature is widely supported in most hosting setups, including Vercel, Netlify, and self-hosting. Cloudflare Workers (not as a CDN over Vercel or another system, but as an independent host) does not support this feature currently. ↑
It is advised to add an inline
'use server'at the top of every function that interacts with an API key or a secret, to prevent accidental inclusion of the code and references in the client-side bundle. ↑