Next.js 16.3 bundles small prefetch payloads into one response to reduce request count.
<section class="stage"><div class="heading">INLINE PREFETCH <span class="hint">small parts travel together</span></div><div class="inline-compare"><div class="inline-row"><span class="packet">shell</span><span class="packet">title</span><span class="packet">badge</span></div><div class="inline-row"><span class="packet bundled">one bundled response</span><span class="packet large">shared layout</span></div></div><div class="inline-count" id="inline-count">3 small requests</div><div class="caption">Small parts merge; shared layout stays separate</div></section>.stage{width:min(94vw,780px);height:min(88vh,322px);padding:clamp(12px,3vmin,20px);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 36px #0001;display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:500 clamp(12px,3.5vmin,17px)/1.3 var(--font-sans,system-ui,sans-serif);overflow:hidden}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:750;color:var(--accent)}.hint{color:var(--muted);font-size:clamp(12px,3.2vmin,14px);font-weight:500}.caption{margin-top:auto;color:var(--muted);font-size:clamp(12px,3.2vmin,14px)}.row{display:flex;gap:clamp(5px,1.5vmin,12px);align-items:center}.tile{padding:clamp(6px,1.8vmin,13px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center;min-width:0}.arrow{color:var(--accent);font-weight:800}.stage [data-on]{transition:background .3s,border-color .3s,opacity .3s,transform .3s}.stage .on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.inline-compare{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,1.5vmin,10px);min-height:0}.inline-row{display:flex;justify-content:center;gap:clamp(4px,1.2vmin,10px)}.packet{border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:clamp(3px,1vmin,6px);text-align:center;font-size:clamp(12px,3vmin,14px);min-width:0}.inline-row:first-child .packet{flex:1;max-width:130px}.inline-row:last-child .packet{flex:1;max-width:205px;opacity:.65;transition:opacity .3s,border-color .3s}.stage[data-step="1"] .bundled,.stage[data-step="2"] .bundled{opacity:1!important;border-color:var(--accent)}.stage[data-step="2"] .large{opacity:1!important;border-color:var(--accent-2)}.inline-count{text-align:center;color:var(--accent-2);font-size:clamp(12px,3vmin,15px);font-weight:700}.stage small,.stage button,.stage .cards b,.stage .phase b,.stage .pair b,.stage .tree-mini b{font-size:clamp(12px,3.2vmin,14px)!important}const stage=document.querySelector(".stage"),count=document.getElementById("inline-count"),notes=["3 small requests","1 bundled small response","Large shared segment stays separate"];let step=0;function tick(){stage.dataset.step=String(step);count.textContent=notes[step];step=(step+1)%3}tick();const timer=setInterval(tick,1020);stage.addEventListener("pointerdown",()=>{clearInterval(timer);tick()})Next.js 16 prefetched route segments separately so shared layouts could be reused. Version 16.3 automatically bundles smaller payloads into one response while leaving larger reusable segments separate.
Bundling reduces requests but can duplicate data across responses. The useful choice depends on payload size and how widely each segment is shared.
Use it when evaluating the balance between prefetch request count and transferred bytes in Next.js navigation.