Flutter

Hydration is the process where a client-side JavaScript framework attaches event listeners and interactivity to server-rendered HTML markup. After the server sends pre-rendered HTML for fast initial display, the framework "hydrates" it by reconciling its virtual representation with the existing DOM and making it interactive. Hydration can be expensive on complex pages, which has led to innovations like partial hydration, progressive hydration, and React's selective hydration with Suspense.

Responsive design is an approach to web development where layouts, images, and UI elements adapt fluidly to different screen sizes and devices. It relies on flexible grids, media queries, and relative units like `rem`, `%`, and `vw` to ensure a consistent experience from mobile phones to large monitors. Modern responsive design increasingly uses CSS Container Queries and intrinsic sizing techniques to create components that respond to their own container rather than the viewport.

React Server Components (RSC) are components that render exclusively on the server and send only their HTML output to the client, with zero JavaScript bundle impact. They can directly access databases, file systems, and backend services without API endpoints. Combined with Client Components (marked with `'use client'`), RSC enables a hybrid architecture where interactive parts ship JavaScript while static or data-heavy parts remain server-only. Next.js App Router uses RSC as its default component model.

Code splitting is an optimization technique that breaks a JavaScript bundle into smaller chunks that are loaded on demand, rather than forcing users to download the entire application upfront. In React, this is achieved through `React.lazy()` and dynamic `import()` statements, which create separate bundles loaded only when the corresponding component or route is accessed. This dramatically improves initial load times, especially for large single-page applications with many routes.

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.

Atomic Design is a methodology by Brad Frost for creating design systems by breaking interfaces into five hierarchical levels: atoms (basic HTML elements), molecules (simple component groups), organisms (complex UI sections), templates (page-level layouts), and pages (specific instances with real content). This approach provides a consistent mental model for organizing component libraries in React, React Native, or Flutter projects and ensures systematic scalability of the UI.