React

Critical security vulnerabilities like React2Shell (CVE-2025-55182, CVSS 10.0) in Next.js RSC serialization revealed that full-stack JavaScript and TypeScript lack secure serialization models. These runtime CVEs forced developers to reassess security assumptions in TypeScript/React stacks.

XSS attacks can occur in Next.js through improper use of dangerouslySetInnerHTML, unvalidated user input in dynamic content, third-party scripts, and server-side rendering of malicious content.

Next.js 16 introduces hydration errors where client-side reconciliation doesn't match server-rendered HTML, causing flicker, broken interactivity, and console warnings. This issue is particularly prevalent with the new Server Component paradigm.

CSS-in-JS libraries like Styled Components run JavaScript in the browser to hash class names and inject styles dynamically, causing style recalculations on every injection. This significantly degrades LCP, FCP, and INP metrics.

Exposing dynamic request/response objects in the App Router affects the entire route and limits the framework's ability to implement caching, streaming, and future Partial Prerendering optimizations.

Fetching data in useEffect causes a waterfall effect where component renders trigger data fetches, and nested child components wait for parents before making their own requests. This creates 3+ steps before data even starts moving, resulting in users seeing loading spinners for 3-5 seconds instead of immediate content.

Large data passed to client components (e.g., 7 MB from getStaticProps) must be transferred and parsed by the browser even if unused by the UI, slowing down FCP and LCP.

Without using next/dynamic, components that aren't needed on initial page load (like modals) get shipped in the main bundle, increasing bundle size and harming LCP, FCP, and INP.

Using regular <img> tags instead of next/image loses built-in optimizations like lazy loading and responsive sizing. Without proper sizes attribute, browsers may download large desktop images on mobile devices, hurting LCP.

React Server Components (RSC) create confusion about client-server boundaries, increase development complexity, and introduce latency. Simple applications feel overengineered due to RSC requirements, creating a steep learning curve and performance concerns with cold starts on serverless platforms.

Developers commonly import entire libraries when only needing single functions, pulling in 70+ kilobytes of unused code (e.g., lodash). Combined with full icon libraries, moment.js for dates, and analytics packages with unwanted dependencies, this significantly increases bundle size and degrades performance.

Learning Next.js requires mastering not just React, but also its routing model, rendering modes, proprietary caching behavior, deployment quirks, and middleware runtime. This multi-layered complexity creates a steep onboarding barrier for newcomers.

The cookies() API allows type-checked usage like cookies().set() anywhere, but fails at runtime in certain contexts. This unexpected behavior differs from traditional request object access and creates developer footguns.