Technical analysis of Context7, an intelligent documentation indexing and retrieval system that transforms raw library docs into AI-optimized, ranked snippets for real-time LLM context injection

Context7

Context7 breakdown

Deep dive into Crawl4AI's architecture, data structures, and algorithms - from async pipelines and strategy patterns to browser management and intelligent content extraction for AI workflows.

Crawl4AI

Crawl4AI breakdown


![](assets/frontend-report-202504.webp)

## React

### [React.memo Demystified: When It Helps and When It Hurts](https://cekrem.github.io/posts/react-memo-when-it-helps-when-it-hurts/)

React's memoization tools like `React.memo`, `useMemo`, and `useCallback` cache values or components and prevent unnecessary re-renders based on dependency changes. A common misconception is addressed that memoizing props alone doesn't prevent child component re-renders, but rather when the prop is used in a hook or the child is wrapped with `React.memo`. There are also a few common pitfalls to watch out for, like prop spreading, the children prop, and nested memo components that can silently break memoization.

### [JSX Over The Wire: Rethinking API design with Server Components](https://overreacted.io/jsx-over-the-wire/)

Forget traditional REST APIs - React Server Components enable returning UI components as JSON directly. This approach links prop-generating code with prop-consuming code through composable ViewModels, creating self-contained UI pieces that handle their own data dependencies. The result? Components rendered in a single client-server roundtrip while maintaining client-side state. This paradigm shift could radically transform how we architect React applications, blurring the line between API and UI.

### [React Reconciliation: The Hidden Engine Behind Your Components](https://cekrem.github.io/posts/react-reconciliation-deep-dive/)

Ever wonder how React actually updates the DOM? This deep dive reveals how React's reconciliation engine compares element trees to determine minimal updates. Component identity is primarily determined by element type and position, though the key prop can override this behavior to preserve state across renders. The article provides practical performance tips including state colocation, avoiding inline component definitions, and designing with clear component boundaries - essential knowledge for optimizing React apps at scale.

- [React Architecture Tradeoffs: SPA, SSR, or RSC](https://reacttraining.com/blog/react-architecture-spa-ssr-rsc)
- [Avoid the State Synchronization Trap](https://ondrejvelisek.github.io/avoid-state-synchronization-trap/)
- [Building Robust React Apps with Zustand and Immer](https://zwit.link/posts/20250301173228-building-robust-react-apps-with-zustand-and-immer/)
- [Memoizing components in React: a case for useMemo](https://gabrielpichot.fr/blog/memoizing-components-in-react-a-case-for-usememo/)
- [React for Two Computers: Dan Abramov breaks down Server Components](https://overreacted.io/react-for-two-computers/)

## Next.js

### [Next.js 15.3: Turbopack builds have arrived](https://nextjs.org/blog/next-15-3)

The wait is over! Next.js 15.3 delivers Turbopack builds in alpha that are a staggering 60% faster than Webpack on 16-core machines. Not ready for Turbo? The release also introduces a community-built Rspack plugin with near-perfect Webpack API compatibility. Enhanced navigation control comes through new `onNavigate` and `useLinkStatus` APIs, plus a new client instrumentation file lets you set up monitoring before your app even starts. This is the performance breakthrough Next.js developers have been waiting for.

### [Migrating Grep from Create React App to Next.js: 70% faster FCP](https://vercel.com/blog/migrating-grep-from-create-react-app-to-next-js)

When Vercel migrated Grep (a code search tool) from Create React App to Next.js, the results were transformative. Search became faster, UI smoother, and mobile performance drastically improved. The secret sauce? React Server Components and Partial Prerendering cut First Contentful Paint by a whopping 70%. This real-world case study demonstrates the tangible benefits of modern rendering approaches for applications with complex search functionality.

### [Next.js Deployment Challenges: Why platforms need better open source collaboration](https://www.netlify.com/blog/how-we-run-nextjs/)

Netlify reveals the uncomfortable truth about supporting Next.js outside Vercel's ecosystem. Unlike other frameworks, Next.js lacks an adapter mechanism, forcing platforms like Netlify to reverse-engineer Vercel's private build output format. This creates maintenance burdens and limits community contributions. Published before Vercel's RFC for the Deployment API, this article highlights the urgent need for greater transparency, open standards, and a clearer roadmap for the entire Next.js ecosystem.

- [Why We Moved off Next.js](https://documenso.com/blog/why-we-moved-off-next-js)
- [Advanced React in the Wild](https://largeapps.dev/case-studies/advanced)
- [How Next.js handles Prefetching & Prerendering under the hood](https://x.com/leerob/status/1908320730875363679)

## Others

### [Migrating 3.7 Million Lines of Flow Code to TypeScript](https://medium.com/pinterest-engineering/migrating-3-7-million-lines-of-flow-code-to-typescript-8a836c88fea5)

Pinterest successfully migrated 3.7 million lines of code from Flow to TypeScript over eight months. The migration used a "big bang" approach using codemods and had three phases: setup, conversion, and integration. Pinterest validated the migration through detailed testing, including daily automated tests, manual testing, and byte-for-byte comparisons of transpiled JavaScript.

### [Astro 5.7: Native SVG Components and Font Optimization](https://astro.build/blog/astro-570/)

Astro's latest release delivers three powerful additions to this increasingly popular framework. The Experimental Fonts API brings painless integration and optimization of fonts from various providers. The now-stable Sessions API enables secure server-side storage of user data with type-safety and flexible storage options. Perhaps most exciting, SVG components are now natively supported, allowing direct import and use of SVG files as components within Astro projects - simplifying your workflow for graphics-rich applications.

### [Is Vite faster than Turbopack? Real-world performance comparison](https://www.kylegill.com/essays/vite-vs-turbopack)

The build tool wars continue! Real-world tests comparing Next.js (Webpack & Turbopack) versus Vite (Rollup & Rolldown) reveal fascinating performance differences. Vite dominates in cold starts and page navigation scenarios, while Turbopack excels in Fast Refresh and Hard Refresh situations. Webpack consistently trails as the slowest option. These benchmarks provide valuable insights for teams making crucial tooling decisions that impact developer experience across projects.

- [Could JavaScript have synchronous `await`?](https://2ality.com/2025/03/sync-await.html)
- [How I Reduced My React Bundle Size by 30% (With Real Examples)](https://www.frontendjoy.com/p/how-i-reduced-my-react-bundle-size-by-30-with-real-examples)
- [More accurate DevTools performance debugging using real-world data](https://developer.chrome.com/blog/devtools-grounded-real-world)
- [The new Cookie Store API](https://fotis.xyz/posts/the-new-cookie-store-api/)

## Trending

### [The Death of the Browser: AI agents changing web interaction](https://www.youtube.com/watch?v=pznpsgZqlGQ&list=PL6kQg8bP1Ji48T7tM-ScCNm_IfrEtce0d&index=7&utm_source=tldrwebdev)

Could web browsers become a nostalgic memory in just ten years? This thought-provoking lightning talk explores how AI agents are poised to free users from platform dependencies like browsers, enabling truly personalized content aggregation with adaptive experiences. Tracing the journey from the browser's invention through the data arms race to the AI era, it suggests we're witnessing a revolutionary shift where the web becomes purely an API for AI agents - potentially returning us to an era of freer information flow.

### [10 Years of Netlify: From Jamstack to Agent Driven Development](https://biilmann.blog/articles/10-years-of-netlify)

As Netlify celebrates a decade of transforming web development through Jamstack architecture, founder Matt Biilmann reflects on the dramatic shift from server-side to frontend-focused teams. The rise of React and Next.js accelerated this transformation, enabling sophisticated interfaces with simplified deployment. Looking forward, Biilmann predicts AI agent-driven development will emerge as the next major frontend trend, continuing the evolution toward more powerful abstractions that boost developer productivity.

### [RIP Styled-Components. Now What?](https://fadamakis.com/rip-styled-components-now-what-a8717df86e86)

Styled-components are officially in maintenance mode. React's API changes and the rise of tools like Tailwind CSS and Vanilla Extract have made it obsolete. If you're still holding on, this post has a list of alternatives to help you move on.

### [TanStack Router's new feature: Intent-based preloading](https://threadreaderapp.com/thread/1908723776650355111.html)

TanStack Router is about to get spookily smart with its upcoming `intent` preloading feature. The router will intelligently predict user navigation based on cursor movement, proactively loading likely routes before the user even clicks. This psychic-like capability could dramatically improve perceived performance, especially for complex applications. By anticipating user behavior rather than waiting for explicit interactions, TanStack Router pushes the boundary of what's possible for responsive, lightning-fast navigation experiences.

- [Firefox's performance gap compared to Chrome](https://www.reddit.com/r/webdev/comments/1jv139b/the_difference_of_speed_between_firefox_and/?rdt=56198&utm_source=tldrwebdev)
- [Chrome 135: Carousels with CSS](https://frontendfoc.us/link/167531/web)
- [Default styles for h1 elements are changing](https://developer.mozilla.org/en-US/blog/h1-element-styles/)

## Tools

### [Introducing Zod 4 beta: Dramatically faster and smaller](https://v4.zod.dev/v4)

Zod 4 enters beta with mind-blowing improvements: 2-7x faster parsing, bundles half the size, and an ultra-lightweight @zod/mini package. Error handling receives a complete overhaul for simplicity, string formats move to top-level for better ergonomics, and first-party JSON Schema conversion arrives. The redesigned API embraces functional programming principles and offers improved tree-shaking. These changes aren't just incremental - they represent a quantum leap for the TypeScript validation library that's become essential for type-safe applications.

### [LLM bots + Next.js image optimization = recipe for bankruptcy](https://metacast.app/blog/engineering/postmortem-llm-bots-image-optimization)

A cautionary tale: Metacast woke up to a shocking $7,000 bill after LLM bots went wild scraping tens of thousands of podcast cover images, triggering Vercel's Image Optimization API. This post-mortem details how they stopped the bleeding, implemented bot blocking, and learned critical lessons about scaling. Following this incident, Vercel updated their pricing model - but the core lesson remains vital for all developers: unexpected bot behavior combined with usage-based pricing can create perfect storms for devastating bills.

### [Fastify + React is 7x Faster than Next.js](https://hire.jonasgalvez.com.br/2025/apr/9/fastify-speed/)

A shocking performance revelation: @fastify/react processes 347 requests per second compared to Next.js's mere 49 - making it 7x faster in server-side rendering benchmarks. The minimal test setups demonstrate that Fastify-based integrations like @fastify/vue and @fastify/react are substantially leaner and more performant than feature-rich metaframeworks. Could this herald a return to more focused, streamlined frameworks over monolithic solutions for performance-critical applications?

- [Cloudflare Vite Plugin 1.0](https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/)
- [React Router 7.5 -- new route.lazy API](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v750)
- [Under the Hood of React Query: A Deep Dive into Its Internal Mechanics](https://medium.com/@janardhan.roh/under-the-hood-of-react-query-a-deep-dive-into-its-internal-mechanics-ee51c0ce076e)
- [Tailwind CSS v4.1: Text Shadows, Masks, and Tons More](https://frontendfoc.us/link/167843/web)

## Commentary

- [The systemic failure of implementing CSS principles](https://www.adavanzo.com/articles/2025/the-systemic-failure-of-implementing-css-principles)
- [How AI Agents Are Quietly Transforming Frontend Development](https://thenewstack.io/how-ai-agents-are-quietly-transforming-frontend-development/)
- [Why the Latest JavaScript Frameworks Are a Waste of Time](https://dev.to/holasoymalva/why-the-latest-javascript-frameworks-are-a-waste-of-time-52pc)
- [Is CSS-in-JS still a thing?](https://fullystacked.net/css-in-js-still-a-thing/)


April 2025 brings exciting frontend developments! React Server Components revolutionize API design with JSX over the wire, Next.js 15.3 delivers 60% faster Turbopack builds, and AI agents transform web interaction beyond traditional browsers.

April 2025

Frontend Report April 2025


![](assets/frontend-report-202503.png)

## React

### [Common React libraries architecture](https://www.felgus.dev/blog/common-react-lib-architecture)

Most React libraries share a similar architecture: a core with the main logic and a binding (hooks/components) for React integration. The core object is often created externally and connected via Context API. Libraries use the Observer pattern to notify React of changes, triggering re-renders with useSyncExternalStore or custom hooks

### [Time to ditch Redux: Why most React apps don't need it](https://www.bennett.ink/its-probably-time-to-stop-recommending-redux)

Redux might be holding your app back! Most **state** is actually API data better handled with caching tools. Modern React can handle complex UI state with useState and custom hooks - no global store needed. Skip the boilerplate and complexity; your team will thank you when they don't have to trace actions through multiple files anymore.

### [Use React 19's cache() to kill waterfall fetching](https://aurorascharff.no/posts/avoiding-server-component-waterfall-fetching-with-react-19-cache/)

React 19's cache() API for Server Components caches data fetches/computations per render, preventing redundant requests. This reduces data coupling between components and enables data preloading to avoid waterfall fetching, improving performance. Use cache() for custom data fetching functions (like database calls), as the built-in fetch() API in Next.js already handles caching

### Quick links

- [Beyond React.memo: Smart performance optimization that actually works](https://cekrem.github.io/posts/beyond-react-memo-smarter-performance-optimization/)
- [The URL: React's underrated state manager](https://iamsahaj.xyz/blog/react-state-in-the-url/)
- [React: The unexpected perfect engine for LLM workflows](https://www.gensx.com/blog/why-react-is-the-best-backend-workflow-engine)
- [Server Actions with Toast: React's useActionState explained](https://www.robinwieruch.de/react-server-actions-useactionstate-toast/)

## Next.js

### [Next.js middleware exploit: CVE-2025-29927 authorization bypass](https://zeropath.com/blog/nextjs-middleware-cve-2025-29927-auth-bypass)

Critical CVE-2025-29927 in Next.js middleware lets attackers bypass security via the x-middleware-subrequest header. This impacts auth, CSP, geo-restrictions, and more. Affects v11.1.4 to unpatched v14/15. Update ASAP to patched versions (≥ 12.3.5, ≥ 13.5.9, ≥ 14.2.25, ≥ 15.2.3) or block the header

### [Next.js 15.2: Error handling that actually makes sense](https://nextjs.org/blog/next-15-2)

Next.js 15.2 transforms your debugging experience with beautiful new error UIs and readable stack traces! The game-changing streaming metadata feature decouples UI rendering from metadata generation for faster page loads. Plus, Turbopack gets massive speed boosts with reduced memory usage and there's experimental support for React View Transitions!

### [Can Next.js handle serious traffic? The surprising answer](https://martijnhols.nl/blog/how-much-traffic-can-a-pre-rendered-nextjs-site-handle)

A pre-rendered Next.js site should handle tons of traffic, right? Wrong! This developer's shocking discovery shows VPS performance limits with barely any improvement after scaling up. After rejecting Cloudflare (privacy concerns) and Vercel (too expensive), a dedicated server finally delivered thousands of requests per second.

### [We ditched Next.js and lived to tell the tale](https://northflank.com/blog/why-we-ditched-next-js-and-never-looked-back)

Sometimes the popular choice isn't right! This team abandoned Next.js and found greater simplicity, better performance, and increased flexibility with their custom solution. Their honest assessment of Next.js limitations might challenge your assumptions about which framework best fits your project's actual needs.

### Quick links

- [Vercel's Fluid Compute: How it slashes AI costs](https://vercel.com/blog/how-fluid-compute-works-on-vercel)
- [How Preply boosted INP without App Router](https://medium.com/preply-engineering/how-preply-improved-inp-on-a-next-js-application-without-react-server-components-and-app-router-491713149875)

## Others

### [Tailwind's hidden cost: The maintainability trade-off](https://measured.co/blog/tailwind-trade-offs)

Tailwind lets you ship blazing fast with predefined styles and no custom CSS files, but at what cost? As projects grow, maintaining those utility-packed class strings becomes increasingly challenging. This honest look at Tailwind's trade-offs will help you decide if the initial velocity boost is worth potential long-term maintenance headaches.

### [CSS just got functions! Here's why it's a game-changer](https://css-tricks.com/functions-in-css/)

CSS is finally getting real functions! Define them with `@function`, pass arguments with type-checking, and return values with the `result` descriptor. Currently in Chrome Canary behind a flag, they'll revolutionize complex CSS logic - especially for fluid typography and dynamic layouts. The CSS preprocessor era might finally be ending!

### [Why prefetching can actually slow your site down](https://www.debugbear.com/blog/prefetch-slower-website)

While prefetching is supposed to improve website performance by loading resources in advance, it can sometimes worsen loading speed by competing with critical content for bandwidth. Despite being assigned the lowest priority, prefetch requests may initiate too early, delaying the loading of important elements like the Largest Contentful Paint (LCP). To prevent this, you can inject prefetch hints via JavaScript after the initial page load to make sure essential content loads first.

### Quick links

- [CSS individual transforms are additive (and awesome)](https://polypane.app/blog/the-css-transform-property-and-individual-transforms-are-additive)
- [CSS relative colors: Dynamic color generation is here](https://ishadeed.com/article/css-relative-colors/)
- [TypeScript: The JavaScript sidekick you didn't know you needed!](https://2ality.com/2025/03/typescript-sales-pitch.html)

## Trending

### [React 2025: Server power unleashed & dev tools evolved!](https://www.robinwieruch.de/react-trends/)

This year, expect **React Server Components (RSC)** to become standard. **React Server Functions (RSF)** will simplify data fetching & mutations. **React 19** brings form improvements. Frameworks beyond Next.js (TanStack Start, React Router) will rise. **Full-Stack React** gains traction. Plus, watch for new styling approaches & tools like **Biome** and the **React Compiler**.

### [TypeScript is getting 10x faster.](https://devblogs.microsoft.com/typescript/typescript-native-port/)

Get ready for `Corsa` - TypeScript's new Go-based compiler that promises 10x faster builds, half the memory usage, and near-instant editor responsiveness! The upcoming native port will transform the TypeScript experience, especially on large codebases. Preview coming mid-2025, with full release by year-end.

### [Corepack unplugged: Node.js rethinks bundled package managers!](https://socket.dev/blog/node-js-tsc-votes-to-stop-distributing-corepack)

The **Node.js TSC has voted to stop distributing Corepack** in future releases (25+), though it remains experimental in v24 and earlier . This move reflects **low adoption**, **distribution concerns**, and the desire for **independent evolution of package managers**. Developers may need to **install Corepack separately** if needed.

### [TanStack Start on Netlify: Official deployment partner](https://www.netlify.com/blog/tanstack-start-netlify-official-deployment-partner/)

**Netlify** is now the **official deployment partner** for **TanStack Start**, the hot new full-stack React framework! Expect seamless, **zero-config deployments** and a killer developer experience.

### Quick links

- [How we migrated 160,000 lines to TypeScript with zero downtime](https://benhowdle.im/migrating-js-to-ts-zero-downtime.html)
- [Prisma replaces Rust with WASM and TypeScript, gets 3.4x faster](https://www.prisma.io/blog/rust-to-typescript-update-boosting-prisma-orm-performance)

## Tools

### [TanStack Form v1: Forms done right, finally](https://tanstack.com/blog/announcing-tanstack-form-v1)

TanStack Form v1 is here and production-ready across React, Vue, Angular, Solid, and Lit! With extreme type safety, schema validation (Zod, Valibot, ArkType), and smart async validation with built-in debouncing, it solves the form headaches that have plagued frontend devs for years.

### [React Router v7: Middleware changes everything](https://react.statuscode.com/link/166745/web)

React Router v7 introduces middleware - a game-changing approach to handling routes that lets you intercept and transform navigation requests before they complete. Perfect for auth checks, analytics, permission verification, and more.

### [TypeScript 5.8: Better return type checks & ESM require() support](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/)

TypeScript 5.8 enhances code checks with granular return expression analysis, improving bug detection. It boosts Node.js ESM/CJS interop under `--module nodenext`. The `--erasableSyntaxOnly` flag aids Node.js direct TS execution

### [Chrome 133: Enhanced attr() for styling any CSS property](https://css-tricks.com/chrome-133-goodies/)

Chrome 133 enhances CSS with two main features: `attr()` for all properties and scroll state container queries. The `attr()` function can now use HTML attribute values to style any CSS property, not just content. This includes specifying data types and fallback values. Additionally, container queries can now style elements based on their scroll state (e.g., "stuck", "snapped") within a defined container. This allows dynamic styling of elements like sticky headers

### Quick links

- [Why does target="\_blank" have that underscore?](https://kyrylo.org/html/2024/10/25/why-does-target-blank-have-an-underscore-in-front.html)
- [Lynx: Build native mobile & web UIs from one codebase](https://lynxjs.org/)

## Commentary

- [The end of JavaScript fatigue? Don't count on it](https://allenpike.com/2025/javascript-fatigue-ssr)
- [Decoding the debate around signals in the world of React](https://www.felgus.dev/blog/signals-in-react)
- [Local-first is the future (but not without challenges)](https://rxdb.info/articles/local-first-future.html)


March 2025 brings critical frontend updates! Learn about the Next.js security exploit you must patch nows. Explore TypeScript's upcoming 10x speed boost with Corsa, React Router's game-changing middleware, and why prefetching can surprisingly slow down your site. Plus: CSS functions are finally here, new in Chrome 133, Node.js is dropping Corepack, and TanStack Start finds an official deployment home!

March 2025

Frontend report March 2025


## React

### [CRA is officially dead - here's what to use now](https://syntackle.com/blog/create-react-app-deprecated)

React finally pulled the plug on Create React App. After years without updates, CRA's strict setup and old Webpack system became a pain for developers. Try Vite for super-fast builds or Next.js if you need server rendering.

### [React Context: The hidden performance problem](https://tigerabrodi.blog/was-react-context-a-mistake)

That simple Context Provider might be slowing down your app. Context causes too many re-renders across your app. Break large contexts into smaller ones or try state libraries like Jotai or Zustand for better control over what updates when.

### [Understanding React Server Components: Under the hood](https://tonyalicea.dev/blog/understanding-react-server-components/)

This guide breaks down how React Server Components actually work! Learn why they're different from regular components, how the `Flight` format streams data to your browser, and why the `double data problem` matters. Plus, see which React features work server-side and which don't.

### [React Query's downsides no one talks about](https://tkdodo.eu/blog/react-query-the-bad-parts)

Everyone loves React Query, but it has trade-offs worth knowing. The file size is big, its approach can make code harder to follow, and its cache system adds complexity.

### Quick links

- [17 tips from a senior React developer](https://www.frontendjoy.com/p/17-tips-from-a-senior-react-developer)
- [We replaced our React frontend with Go and WebAssembly](https://dagger.io/blog/replaced-react-with-go)
- [React UI component libraries in 2025](https://www.builder.io/blog/react-component-library)

## Next.js

### [Vercel's Fluid Compute: Making AI apps 85% cheaper](https://www.youtube.com/watch?v=itSu3T1zJew)

Vercel's new feature packs multiple requests into single functions - cutting AI costs by up to 85%. Fluid Compute replaces Edge functions with full Node.js support while staying fast. It's the perfect middle ground between serverless and traditional servers.

### [Build a Next.js login page with session-based authentication](https://clerk.com/blog/building-a-nextjs-login-page-template)

This guide shows you how to implement session-based authentication in a Next.js application, including essential aspects such as database schema design, backend security measures (password hashing and session ID verification), and frontend user interface considerations (sign-up/sign-in forms).

### [Next.js 15's better error handling stops your site from crashing](https://devanddeliver.com/blog/frontend/next-js-15-error-handling-best-practices-for-code-and-routes)

Next.js 15 gives you better control over errors with special files - `error.tsx` for component problems, `global-error.tsx` for big issues, and `not-found.tsx` for missing pages. ErrorBoundary components keep errors contained while the useActionState hook handles server actions smoothly.

### Quick links

- [Make your Next.js Docker images tiny](https://xeiaso.net/notes/2024/small-nextjs-images/)
- [Next.js composable caching makes sites faster](https://nextjs.org/blog/composable-caching)

## Others

### [Double-keyed caching: The privacy update slowing down your site](https://addyosmani.com/blog/double-keyed-caching)

Browsers now use both URL and website to split cache storage - good for privacy, bad for speed. This security change affects CDNs, third-party resources, and shared assets. See how it impacts your site and what changes you need to make.

### [Simple tricks to make your sites work for everyone](https://martijnhols.nl/blog/accessibility-essentials-every-front-end-developer-should-know)

Stop putting accessibility last. This guide gives practical tips on using proper HTML, building forms correctly (don't rely on placeholders!), and handling focus in popups. These easy changes make your site usable for everyone while helping SEO and user experience.

## [Speed up your website with these simple tricks](https://syntax.fm/show/874/fast-apps-easy-perf-wins)

Optimize images, shrink code, and use Gzip to make your files smaller. Smart caching and CDNs help global users see your site faster. Use Chrome's tools to find what's slowing you down, and don't forget CSS tricks like putting critical styles directly in the HTML and using system fonts.

### Quick links

- [A poor Lighthouse score doesn't always mean your site is slow](https://www.debugbear.com/blog/poor-performance-score-good-performance)
- [Mistakes in the design of CSS](https://wiki.csswg.org/ideas/mistakes)

## Trending

### [5 technical JavaScript trends you need to know about in 2025](https://risingstars.js.org/2024/en)

Serverless is going mainstream with edge functions leading the way. WebAssembly is finding its place for speed-critical features. Microfrontends with Webpack Module Federation help big teams work better, while state management keeps moving toward smaller, focused solutions.

### [What 7,800+ developers say about React in 2024](https://2024.stateofreact.com)

The biggest React survey ever shows the pain points React 19 needs to fix - especially forwardRef and memo. While React itself stabilizes, the tools around it keep changing fast. TanStack Start is becoming a strong Next.js alternative with growing adoption.

### [Interop 2025 makes the web better](https://web.dev/blog/interop-2025)

`Interop` is an annual meeting where browser makers (Chrome, Safari, Firefox, Edge) agree on which web features to make work the same across all browsers. After hitting 95% compatibility in 2024, they've picked 19 new areas to fix in 2025. Top priorities include CSS Zoom standards, WebRTC security, and mobile testing.

### Quick links

- [The success of Interop 2024](https://webkit.org/blog/16413/the-success-of-interop-2024/)
- [Which rich text editor should you choose in 2025?](https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025)

## Tools

### [React Scan: Find slow components without changing your code](https://react-scan.com/)

React Scan spots React performance problems without adding any code. Unlike other tools that need special setup, React Scan visually shows problem components and suggests clear fixes - all through a simple, easy-to-use interface.

### [Nue: The framework that cuts JavaScript bloat](https://nuejs.org/blog/standards-first-web-framework)

Tired of complex JavaScript frameworks? Nue goes back to web basics with HTML, Markdown and modern CSS. It helps designers and developers work better together while reducing technical debt.

### [Standard Schema: The Zod alternative everyone's switching to](https://www.youtube.com/watch?v=V1vMaNVwTaI)

Zod has problems: it's slow, causes TypeScript to lag, and doesn't fully follow standards. Standard Schema fixes these issues while letting you use any validator you want. No more multiple validation libraries - just one flexible system that actually performs well.

### Quick links

- [Learn Yjs: Interactive tutorials](https://learn.yjs.dev/)
- [State management libraries in the React compiler era](https://blog.axlight.com/posts/thoughts-on-state-management-libraries-in-the-react-compiler-era/)
- [bippy: Hack into react internals](https://www.bippy.dev/)
- [CSS variables editor](https://www.cssvariables.com/)

## Commentary

- [Server-side renaissance: A year without React](https://kellysutton.com/2025/01/18/moving-on-from-react-a-year-later.html)
- [Why developers hate linters?](https://www.coderabbit.ai/blog/why-developers-hate-linters)
- [Will AI eat the browser](https://crazystupidtech.com/archive/will-ai-eat-the-browser/)
- [HTML is actually a programming language. Fight me](https://www.wired.com/story/html-is-actually-a-programming-language-fight-me/)


Our February 2025 report covers what's new in frontend development - from React's move away from Create React App to Next.js improvements, browser compatibility updates, and cool new tools like React Scan. Get practical tips for better auth, faster websites, and making your sites work for everyone.

February 2025

Frontend report February 2025


## React

### [React 19 is officially here](https://react.dev/blog/2024/12/05/react-19)

The moment we've all been waiting for! React 19 has officially landed. React 19 is here with game-changing features! Actions simplify state management with built-in handling for errors and optimistic updates. New hooks like useOptimistic and useActionState make development smoother than ever. Plus, enhanced Suspense boosts performance for better user experiences.

### [React 19: Ref callbacks - More than just DOM access](https://tkdodo.eu/blog/ref-callbacks-react-19-and-the-compiler)

Ref callbacks in React 19 can now return cleanup functions, similar to useEffect, allowing for tasks like measuring DOM nodes with ResizeObserver.

### [View Transition API: Smooth animations coming to React](https://motion.dev/blog/reacts-experimental-view-transition-api)

Explore React's experimental View Transition API and how it can create smoother, more engaging user experiences. This article dives into the details, showing practical examples and offering insights on how to utilize this feature in your own projects.

### Quick links

- [Mastering React internationalization with i18next](https://lingual.dev/blog/getting-more-out-of-i18next-in-react/)
- [Boost React app speed with INP optimization](https://kurtextrem.de/posts/improve-inp-react)
- [React, visualized: An interactive guide to understanding React concepts](https://react.gg/visualized)

## Next.js

### [Next.js 15.1 embraces React 19!](https://nextjs.org/blog/next-15-1)

Next.js 15.1 is here, embracing React 19 with official support! Enjoy seamless integration, enhanced debugging tools, and smarter error handling for a smoother development experience.

### [Next.js on Deno deploy: A new frontier](https://deno.com/blog/nextjs-on-deno-deploy)

Next.js SSR apps can now run on Deno Deploy. It’s fast, scalable, and a glimpse into the future of serverless tech.

### [Scaling micro-frontends with Next.js multi zones](https://techhub.iodigital.com/articles/building-scalable-micro-frontends-with-next-js-multi-zones)

Managing independent deployments for large teams just got easier! Next.js Multi Zones is a powerful feature that enables the composition of multiple Next.js applications into a single unified experience, allows different teams to develop, deploy, and maintain distinct parts of a website independently.

### Quick links

- [Introducing efficient Valkey-based caching for Next.js](https://blog.platformatic.dev/introducing-efficient-valkey-based-caching-for-nextjs)
- [SSR: Debunking myths and delivering real value](https://t3.gg/blog/post/ssr-is-not-expensive)
- [Why Dato CMS chose Astro over Next.js](https://www.datocms.com/blog/why-we-switched-to-astro)

## Others

### [Bring AI to your browser with Transformers.js](https://www.raymondcamden.com/2024/12/03/using-transformersjs-for-ai-in-the-browser)

Run AI tasks right in the browser! Transformers.js leverages a pipeline API that is easy to use and can perform tasks like sentiment analysis and object detection. All processing occurs client-side, no server needed.

### [New HTML and CSS features: Making interactive elements easier without JavaScript](https://zeroheight.com/blog/the-lowdown-on-dropdowns-in-html-css/)

The popover attribute allows developers to add popovers effortlessly, while CSS Anchoring offers more reliable positioning. The new `calc-size()` function makes it possible to animate elements to and from auto height, bringing more flexibility to animations. Plus, updates to `<details>` and `<select>` elements enhance their styling and customization capabilities. These innovations make building interactive and dynamic web elements smoother and more accessible than ever before.

### Quick links

- [Headless, boneless, skinless, & lifeless UI: 4 categories of UI abstractions](https://nerdy.dev/headless-boneless-and-skinless-ui)
- [A simple masonry-like composable layout](https://piccalil.li/blog/a-simple-masonry-like-composable-layout)
- [Architectures of modern front-end applications](https://blog.meetbrackets.com/architectures-of-modern-front-end-applications-8859dfe6c12e)
- [[Lock down your OAuth2 implementations - protect against CSRF attacks](https://auth0.com/blog/prevent-csrf-attacks-in-oauth-2-implementations)]

## Trending

### [Rising stars of JavaScript 2024](https://risingstars.js.org/2024/en)

Discover front-end tools shaping the JavaScript landscape in 2024! Key highlights include `shadcn/ui`, a modern, accessible component library for building customizable UIs, and `HTMX`, a lightweight library that brings dynamic interactions to HTML without relying heavily on JavaScript frameworks.

### [Offline-first apps: everything you need to know to get started!](http://devstarterpacks.com/blog/what-every-developer-should-know-about-offline-first-apps)

Learn the essentials of building offline-first applications in this guide. It covers the core concepts, techniques, and best practices for creating apps that function seamlessly even when the internet connection is unreliable. This article will help you understand data synchronization, caching, and handling user interactions in an offline environment.

### [Emerging Trends in Front-End Development](https://dev.to/aneeqakhan/the-future-of-front-end-development-3gea)

Explore the latest trends in front-end development, including AI-powered tools, server-driven UI, and Next.js with React Server Components. The article highlights Jamstack, headless CMS solutions, and component-driven design systems, showcasing how these innovations enhance performance, scalability, and efficiency.

### Quick links

- [My go-to React tech stack for 2025](https://www.robinwieruch.de/react-tech-stack/)

## Tools

### [Tailwind CSS v4.0 Beta: New features, concerns, and what you should know](https://nmn.sh/blog/2024-11-30-thoughts-on-tailwind-4)

Tailwind CSS v4 has great improvements like the switch to LightningCSS and native CSS cascade layers, but this author has concerns about the performance implications of CSS variables, the potential for abuse with new descendant variants, and the lack of clarity in some class names.

### [Node’s new built-in support for TypeScript](https://2ality.com/2025/01/nodejs-strip-type.html)

Big news for Node.js developers! Native TypeScript support is on the way through type stripping, meaning you'll soon be able to run TypeScript code directly in Node without needing to transpile it first. This article explains the implications, outlining what this change means for development workflows and how it will streamline the use of TypeScript within Node.js projects.

### [Boost React performance with Million](https://million.dev/)

Million is a lightweight tool designed to optimize React websites by identifying slow components and improving performance and integrates directly into your IDE for real-time performance insights. Million also provides features like production observability and replay for investigating performance issues.

### Quick links

- [Onlook: The open-source Figma for React that lets you design in real-time](https://onlook.dev)

## Commentary

- [Why I ditched React for Go, HTMX, and Templ](https://blog.erodriguez.de/dependency-management-fatigue-or-why-i-forever-ditched-react-for-go-htmx-templ)
- [React and similar frontend frameworks, used incorrectly, can lead to performance and accessibility issues.](https://infrequently.org/2024/11/if-not-react-then-what)
- [The open social web is the future of the internet. Here's why I'm excited](https://werd.io/2024/the-open-social-web-is-the-future-of-the-internet)
- [Struggling with complex code? see how Types can simplify things!](https://mayhul.com/posts/type-driven-design)
- [Thinking of switching to Vite? this team did it and here's what they learned!](https://neon.tech/blog/from-webpack-to-vite)


This January 2025 report explores key frontend advancements, including React 19's Actions, Next.js 15.1's Deno Deploy support, and innovative tools like Transformers.js for AI. Discover trending technologies, best practices, and expert commentary shaping the future of frontend development.

January 2025

Frontend report January 2025


## Introduction

Mock Service Worker (MSW) is an API mocking library that leverages the Service Worker API to intercept requests. It offers unique features that set it apart from traditional mocking libraries, making it a go-to choice for developers. With MSW, you can seamlessly mock both RESTful and GraphQL APIs, providing flexibility for various API architectures. Additionally, MSW supports both Node.js and browser environments, enabling consistent API mocking across different parts of your application. Let's explore how MSW empowers developers to reliable web applications by seamlessly working in both Node.js and browser environments

## Applying MSW for API interception in development

MSW operates client-side by using a Service Worker to intercept requests. However, we don't have to write any of the worker's code by ourselves, but rather copy the worker file distributed by the library. This CLI will help us to do that

```bash
npx msw init <PUBLIC_DIR> --save
```

To configure the worker:

```js
// src/mocks/browser.js
import { setupWorker } from "msw";
import { handlers } from "./handlers"; // list of request handlers

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);
```

To start the worker:

```js
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser");
  worker.start();
}

ReactDOM.render(<App />, document.getElementById("root"));
```

Let's consider a scenario where we have an `App` component, as shown in the code snippet below. This component makes an API request, which may not be fully implemented on the backend side, or we might want to test how our component handles in different response data or error responses

```js
// src/App.js
function App() {
  const { data, error } = useFetch("https:/example.com/api/usage");
  if (error) {
    return <div className="error">{error.message}</div>;
  }
  return (
    <div className="App">
      <h1>API mocking example</h1>
      <div>{data.firstName}</div>
    </div>
  );
}
```

Now, we can mock api response by adding MSW handlers

```js
// src/mocks/handlers.js
import { rest } from "msw";

export const handlers = [
  //respond with mock data
  rest.get("https:/example.com/api/usage", (req, res, ctx) => {
    return res(
      ctx.status(301),
      ctx.json({
        id: 1,
        firstName: "Dwarves",
      }),
    );
  }),
  // Alternatively, throw an error
  rest.get("https:/example.com/api/usage", (req, res, ctx) => {
    return res(ctx.status(500), ctx.json({ message: "Internal Server Error" }));
  }),
];
```

This allows us to verify that our component behaves correctly and handles various API responses or errors gracefully, even if the backend is not fully implemented or we want to test different scenarios without relying on the actual API response.

## Applying MSW for React testing

One of the most common use cases for MSW is leveraging its request handlers for integration tests. MSW allows you to seamlessly incorporate mocking into any Node process To configure the server:

```js
// src/mocks/server.js
import { setupServer } from "msw/node";
import { handlers } from "./handlers";

// This configures a request mocking server with the given request handlers.
export const server = setupServer(...handlers);
```

Before running your test, start the MSW server:

```js
beforeAll(() => server.listen());
```

After each test, make sure to clean up by stopping the server and resetting any request handlers that were added on runtime:

```js
afterEach(() => {
  server.resetHandlers();
  cleanup();
});

afterAll(() => server.close());
```

Basic example of an integration test over the `App` component.

```js
import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("passes", async () => {
  render(<App />);

  expect(
    // Expect the mocked response to be present in the DOM.
    await screen.findByText(`Dwarves`),
  ).toBeInTheDocument();
});
```

you also can add additional handlers during runtime to handle different scenarios in different tests. Here's an example:

```js
test("handle error responses", async () => {
  render(<App />);
  // a runtime handler which
  server.use(
    rest.get("https:/example.com/api/usage", (req, res, ctx) => {
      return res(ctx.json({ message: "Internal Server Error" }));
    }),
  );
  const errorElement = screen.getByText("Internal Server Error", {
    className: "error",
  });
  expect(errorElement).toBeInTheDocument();
});
```

The `server.use` function allows us to add a runtime handler to our mock server. However, it's important to note that any handlers added in runtime will be removed when `server.resetHandlers()` is called.

## Reference

- [Mocking API servers with mock service worker (MSW)](https://blog.openreplay.com/mocking-api-servers-with-mock-service-worker-msw/)
- [MSW documentation](https://mswjs.io/docs/)


Mock Service Worker (MSW) is an API mocking library that leverages the Service Worker API to intercept requests. It offers unique features that set it apart from traditional mocking libraries, making it a go-to choice for developers. With MSW, you can seamlessly mock both RESTful and GraphQL APIs, providing flexibility for various API architectures. Additionally, MSW supports both Node.js and browser environments, enabling consistent API mocking across different parts of your application.