bblog

Today I Learned

Daily reflections on work and learning—what I did and what I learned.

Alla11yanimationarchitecturebrowserbundlingcachingcanvasci-cdclscollaborationcssdrag-and-dropeditoreslintimagesimmutabilitylanding-pagemeasurementmobilemodalmonoreponavigationnetworknextjspage-transitionperformanceplaywrightpointer-eventsreactreliabilityscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingtelemetrytestingthemingundousesyncexternalstorevirtualizationwebpackwebsocket
Search starts automatically 350ms after you stop typing.

3 entries · #ssr

2026년 7월

2026-07-03

Perf Is a 3× Median; Prefetch Comes as a Set with Skeletons

Sorting out lab-trace outliers, SSR prefetch query-key alignment, CLS skeleton reservation, and server-injected JSON-LD in one day

  • A single dev-server Performance trace often has outliers, so before/after must be compared with the median of N reloads.
  • SSR prefetch is a cache miss if the query key differs from the client by even one character, and it must be treated as a set with skeleton-height reservation, or CLS results.
2026-07-01

Long Lists: flatten → SSR First Slice → virtualizer

A pattern that separates infinite scroll from list virtualization, guarantees first HTML with an SSR static gate, then switches to a virtual list

  • Infinite scroll controls the data-exposure ceiling; virtualization controls the DOM ceiling — each separately.
  • Flatten a nested group UI into header/item rows before feeding it to the virtualizer.

2026년 6월

2026-06-30

Direct-Upload Contract, CSS-Token Theming, Hydration Boundaries

Shared principles learned from the 4-step presigned-URL upload, a single generator for @layer-based token theming, and fr layout with post-mount hydration

  • A presigned-URL upload is a 4-step contract of presign→PUT→complete→create, and skipping the complete notification means the backend never registers the upload.
  • CSS-token theming must separate @layer (priority), @scope (scope), and light-dark() (mode), and unify runtime and build CSS under a single generator so they don't diverge.