Next.js 부분 사전 가져오기

<section class="stage"><div class="heading">PARTIAL PREFETCH <span class="hint">shell before click</span></div><div class="prefetch-screen"><div class="prefetch-link">OPEN ARTICLE</div><div class="prefetch-page"><div class="prefetch-top">ARTICLE</div><div class="prefetch-lines"><i></i><i></i></div><div class="prefetch-slot" id="prefetch-slot">pending</div></div></div><div class="prefetch-readout" id="prefetch-readout">Shell is prefetched in the background</div><div class="caption">Click shows the shell; content follows</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)}.prefetch-screen{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,18px);min-height:70px}.prefetch-link{width:36%;max-width:175px;border:1px solid var(--accent-2);border-radius:7px;background:var(--bg);padding:9px 4px;text-align:center;color:var(--accent-2);font-weight:750;font-size:clamp(12px,3vmin,15px)}.prefetch-page{width:52%;max-width:220px;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:8px;opacity:.35;transition:opacity .3s,border-color .3s}.prefetch-top{font-weight:750;color:var(--accent)}.prefetch-lines{margin:8px 0}.prefetch-lines i{display:block;height:6px;background:var(--line);border-radius:6px;margin:5px 0}.prefetch-lines i:last-child{width:65%}.prefetch-slot{border:1px dashed var(--accent-3);border-radius:5px;color:var(--muted);padding:4px;text-align:center;font-size:clamp(12px,3vmin,14px)}.stage[data-step="1"] .prefetch-page,.stage[data-step="2"] .prefetch-page{opacity:1;border-color:var(--accent)}.stage[data-step="2"] .prefetch-slot{border-style:solid;border-color:var(--accent);color:var(--accent)}.prefetch-readout{text-align:center;color:var(--accent-2);font-size:clamp(12px,3vmin,14px);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"),slot=document.getElementById("prefetch-slot"),readout=document.getElementById("prefetch-readout"),notes=["Shell is prefetched in the background","Click: shell appears immediately","Dynamic content streams in"];let step=0;function tick(){stage.dataset.step=String(step);slot.textContent=step===2?"full story":"pending";readout.textContent=notes[step];step=(step+1)%3}tick();const timer=setInterval(tick,1050);stage.addEventListener("pointerdown",()=>{clearInterval(timer);tick()})