정적 사이트 생성(SSG)은 배포 전에 각 경로의 HTML을 생성합니다. 방문자가 올 때마다 서버에서 화면을 다시 만들 필요가 없습니다.
콘텐츠를 바꾸려면 일반적으로 다시 빌드해야 합니다. 사용자별 데이터는 클라이언트에서 불러오거나 별도 동적 렌더링 경계를 둡니다.
언제 쓰나
문서·마케팅 페이지처럼 여러 방문자에게 동일하고 자주 바뀌지 않는 콘텐츠에 적합합니다.
정적 사이트 생성
Static site generation
빌드 때 페이지 HTML을 미리 만든 뒤, 여러 요청에 같은 파일을 제공합니다.
···
<section class="stage"><div class="heading">BUILD ONCE <span class="hint">serve many times</span></div><div class="ssg"><div class="tile source">CONTENT</div><div class="arrow">→</div><div class="files"><div class="tile file">/home.html</div><div class="tile file">/docs.html</div><div class="tile file">/about.html</div></div><div class="arrow">→</div><div class="requests"><span>visitor A</span><span>visitor B</span></div></div><div class="caption">Prebuilt files answer repeated requests</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)}.ssg{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.2vmin,12px)}.source{font-weight:700}.files{display:flex;flex-direction:column;gap:5px;min-width:35%}.file{padding:5px 7px;text-align:left;border-left:3px solid var(--accent);opacity:.3;transform:translateX(-10px);transition:opacity .3s,transform .3s}.requests{display:flex;flex-direction:column;gap:7px;color:var(--accent-2);white-space:nowrap}.requests span{opacity:.3;transition:opacity .3s}.stage[data-step="1"] .file,.stage[data-step="2"] .file{opacity:1;transform:none}.stage[data-step="2"] .requests span{opacity:1}.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");let step=0;function tick(){stage.dataset.step=String(step);step=(step+1)%3}tick();let timer=setInterval(tick,1050);stage.addEventListener("pointerdown",()=>{clearInterval(timer);tick()})