대시보드에 6개의 카드, 6개의 스피너, 그것들은 함께 나타나지 않습니다 — 각 카드가 위의 것이 완료된 후에야 로딩을 시작했기 때문에 도미노처럼 하나씩 나타납니다. 이것이 워터폴이고, 총 대기 시간은 가장 느린 요청이 아니라 모든 것의 합계입니다. use()와 Suspense는 그 체인을 끊습니다 — 하지만 흥미로운 것은 내부 메커니즘입니다: 일시 중단된 컴포넌트가 실제로 무엇을 던지는지, 그리고 잘못된 순서로 도착한 HTML이 어떻게 올바른 위치에 착지하는지.
10년 동안 썸네일을 히어로 이미지로 애니메이션하는 방법은 하나뿐이었습니다: 전후 위치를 측정하고, transform으로 차이를 속이고, 재생하세요. FLIP. 모든 애니메이션 라이브러리가 이것을 하고, 모두 최악의 순간에 메인 스레드의 JavaScript라는 대가를 치릅니다. View Transitions API는 그 트릭 전체를 브라우저로 옮깁니다 — React 19.2와 Next.js 16부터 전체 계약은 name이라는 하나의 prop으로만 구성됩니다.
'use server'는 API 라우트로의 fetch를 위한 문법적 설탕처럼 보입니다 – 그리고 바로 그 이유로 대부분의 구현이 이를 그냥 함수 호출처럼 다룹니다. 이는 구체적인 결과를 초래하는 실수입니다. 'use server'가 붙은 모든 함수는 네트워크상의 공개 엔드포인트가 되며, 이 메커니즘 위에 지어진 폼은 JavaScript가 로드되기도 전에 작동합니다. 이 지시어 아래에서 실제로 무슨 일이 일어나는지, 그리고 문서만 봐서는 한눈에 보이지 않는 함정이 어디에 있는지 살펴봅니다.
올바른 HTML은 시작점일 뿐이다. 접근성 트리가 실제로 어떻게 동작하는지, ARIA가 생각보다 훨씬 자주 오히려 해가 되는 이유는 무엇인지 살펴보고, 실제로 동작하는 아코디언과 라이브 리전, Next.js 포커스 처리를 함께 만들어본다.
