Glossary
A
API Client Abstraction A thin wrapper around HTTP that provides a consistent interface, auth, retries, error mapping, and correlation IDs—usually consumed by TanStack Query hooks rather than raw components.
B
Bundle Splitting The process of dividing application code into multiple files (chunks) that can be loaded independently, reducing initial load time.
C
Client-Side Rendering (CSR) Rendering UI entirely in the browser using JavaScript after the initial HTML shell loads. Weak for SEO-critical content; prefer SSR/SSG/RSC for indexable pages.
Code Splitting Separating code into chunks loaded on demand, typically at route or component boundaries.
Composition Pattern A technique for building complex components by combining simpler ones rather than through inheritance (compound components, slots, children).
Compound Component
A family of components that share implicit state via context (e.g. Tabs, Tabs.List, Tabs.Panel) so consumers compose structure without prop drilling.
Core Web Vitals Google's metrics for user experience: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). INP replaced FID in March 2024.
Clean Architecture Concentric dependency rule (entities → use cases → adapters → frameworks). Closely related to hexagonal / onion; dependencies point inward.
CQRS (lite) Command Query Responsibility Segregation — separate write paths (commands/mutations) from read models (queries/caches). On the client: TanStack Query reads vs mutation/use-case writes.
CSP (Content Security Policy) HTTP header restricting script/style/connect sources — primary browser XSS mitigation alongside safe rendering.
CSRF (Cross-Site Request Forgery) Attack abusing automatic cookie credentials on cross-site requests; mitigate with SameSite cookies and/or CSRF tokens.
Composition Root Single bootstrap site that constructs adapters and injects ports so features do not new up infrastructure.
D
Design Token A named, platform-agnostic design decision (color, spacing, typography) usually piped through Style Dictionary into CSS variables and other platforms.
Domain-Driven Design (DDD) An approach that models software around the business domain: ubiquitous language, bounded contexts, entities/value objects/aggregates, domain events, and anti-corruption layers. Often paired with hexagonal packaging.
E
Edge Runtime A lightweight JS runtime at CDN POPs (e.g. Cloudflare Workers, Vercel Edge) suited for middleware and short-lived logic—not heavy Node APIs.
Event Bus A publish/subscribe communication channel allowing decoupled modules (including MFEs) to exchange messages without direct references.
F
Feature Flag A runtime switch that enables progressive delivery, canaries, and kill-switches without redeploying every consumer.
Flux Architecture A unidirectional data flow pattern (actions → store → view). Historically influential; modern apps often prefer Query + small client stores over classic Flux.
H
Headless UI Unstyled, accessible behavior primitives (focus, keyboard, ARIA) that design systems style—e.g. Radix-style primitives.
Hexagonal Architecture (Ports & Adapters)
Domain/use cases in the center; ports are interfaces; adapters connect UI, HTTP, storage, and tests. Dependencies point inward—React and fetch stay at the edges.
Higher-Order Component (HOC) A legacy pattern: a function that wraps a component to add behavior. Prefer hooks and compound components in new React code.
Hydration Attaching event listeners and state to server-rendered HTML so it becomes interactive on the client.
I
Import Maps Browser-native maps from bare module specifiers to URLs; used with native ESM federation as an alternative to bundler-coupled Module Federation.
Incremental Static Regeneration (ISR) A hybrid rendering strategy that serves static pages while regenerating them in the background after a configured interval or on-demand tag.
INP (Interaction to Next Paint) Core Web Vital measuring responsiveness across a page visit; replaced FID as a CWV in March 2024. Good p75 ≤ 200ms.
Island Architecture Mostly static/SSR pages with small interactive “islands” hydrated independently to keep JS minimal.
Interceptor Middleware in an API client that transforms requests or responses globally (e.g., adding auth headers).
M
Micro-Frontend (MFE) An architectural pattern where a frontend application is decomposed into smaller, independently deployable units owned by different teams.
Module Federation Runtime sharing of modules across independently built apps. Modern options include Webpack MF, Module Federation 2.0, Rspack federation, and native ESM + import maps.
MVI (Model-View-Intent) Unidirectional presentation: user intents update a model that produces view-state for rendering. Fits Redux/RTK and complex React screens.
MVVM (Model-View-ViewModel) View binds to a ViewModel’s observable state. Common in Vue/Angular; approximated in React with stores and selectors.
O
Observability (Frontend) Collecting RUM Web Vitals, traces (OpenTelemetry), and client errors so production UX regressions are attributable by route/MFE.
Optimistic Update Immediately reflecting a change in the UI before server confirmation, rolling back on failure (often via TanStack Query mutations).
P
Partial Prerendering (PPR) A delivery pattern that serves a static shell immediately and streams dynamic holes—combining SSG speed with SSR freshness.
Performance Budget A set of constraints on metrics (bundle size, load time, Web Vitals) enforced during CI and watched via RUM to prevent regressions.
Prop Drilling Passing data through multiple component layers that do not use it, solely to reach a deeply nested consumer.
R
React Server Components (RSC) Components that render on the server by default, ship zero client JS for non-interactive trees, and compose with Client Components at explicit boundaries.
Render Prop A legacy pattern where a component receives a function as a prop that returns JSX. Prefer composition and hooks in new code.
Route Guard Logic that intercepts navigation (often loaders/middleware) to enforce auth or permissions before rendering a route.
S
Server Action A server-side mutation function invoked from the client (framework-provided), useful for progressive enhancement and colocated mutations.
Server State Remote data cached in the client (TanStack Query / SWR)—distinct from UI/client global state. Own it with a cache library, not a mega Redux tree.
Server-Side Rendering (SSR) Generating HTML on the server for each request, sending a rendered page to the browser before hydration.
Service Worker Browser proxy script that can cache assets/responses for offline and performance; not a substitute for Query for private JSON.
Signal A reactive primitive that holds a value and automatically notifies subscribers when it changes, enabling fine-grained UI updates.
State Machine A model where a system can be in exactly one of a finite number of states, transitioning between them via defined events (e.g. XState for complex UI flows).
Static Site Generation (SSG) Pre-rendering pages at build time into static HTML files served from a CDN.
Strangler Fig Incremental rewrite pattern: new routes/adapters take traffic beside legacy until the old shell can be removed.
T
TanStack Query A server-state library providing query keys, caching, staleness, invalidation, mutations, and prefetch—default data layer for many modern SPAs.
Tree Shaking A bundler optimization that removes unused exports from the final bundle by analyzing the module dependency graph.
U
Unidirectional Data Flow A pattern where data moves in a single direction (parent to child), making state changes predictable and traceable.
URL State UI state stored in the path or search params so it is shareable, bookmarkable, and restorable across navigations.
V
Vertical Slice Organize by feature/use-case end-to-end (UI + application + adapter) instead of by technical layer alone.