
A comprehensive August 2024 update on key advancements in React 19, Next.js 15, and web development tools. Highlights include new async transitions, server components, SSR performance comparisons, and emerging technologies in the web development landscape.

## React

### [React 19 RC: Async Transitions, Server Components, and Optimistic Updates](https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19)

React 19 introduces async transitions through Actions, improved error handling for hydration, and new hooks like `useOptimistic` for managing state. It enhances support for Server Components, integrates async scripts and resource preloading, and offers better tools for managing form submissions.

### [An SSR Performance Showdown](https://blog.platformatic.dev/ssr-performance-showdown)

This article compares the Server-Side Rendering (SSR) performance of major frontend libraries, including React, Vue, Svelte, Solid, and Preact, using Fastify. Vue led in performance, closely followed by Svelte and Solid, with React and Preact falling behind.

### [Essential React Libraries for 2024](https://www.robinwieruch.de/react-libraries/)

A handy guide to the best React libraries you should consider in 2024. It covers everything from state management tools like Zustand, to UI components like Tailwind CSS, and data-fetching libraries like TanStack Query. It’s all about streamlining your development and optimize performance with the latest trends in React.

### Quick Links

- [Build your own React state management library in under 40 lines of code](https://paripsky.github.io/blog/build-your-own-react-state-management/)
- [Managing Effects in React](https://ui.dev/c/react/effects): Understanding `useEffect`
- [Interface Segregation Principle in React](https://alexkondov.com/interface-segregation-principle-in-react/)
- [Everything About Google Translate Crashing React](https://martijnhols.nl/gists/everything-about-google-translate-crashing-react)
- [Implementing React from Scratch](https://www.rob.directory/blog/react-from-scratch)

## Next.js

### [Next.js 15 RC - Now Supporting React 19 RC](https://www.syncfusion.com/blogs/post/whats-new-in-next-js-15-rc/amp)

Next.js 15 brings support for React 19 RC, along with better hydration error handling, caching improvements, and experimental features like the React Compiler and Partial Prerendering, allowing for incremental static and dynamic rendering.

### [Build Anything with v0 (3D Games, Interactive Apps)](https://www.youtube.com/watch?v=zA-eCGFBXjM)

A quick introduction to the new version of V0, showcasing its ability to create interactive apps and games.

### Quick Links

- [Vercel AI SDK 3.3](https://vercel.com/blog/vercel-ai-sdk-3-3)
- [Next.js + Supabase App in Production: Lessons Learned](https://catjam.fi/articles/next-supabase-what-do-differently)

## Others

### [State of CSS 2024 Is Now Open!](https://survey.devographics.com/en-US/survey/state-of-css/2024)

Want to calculate a square root or cosine in your CSS? Use that to build scroll-triggered animations? And maybe scope all of it down so it doesn't have any unwanted effects? Now you can do all that, and much more! This is an interesting survey to share your experiences and thoughts on the current trends in CSS.

### [JS Dates Are About to Be Fixed](https://docs.timetime.in/blog/js-dates-finally-fixed)

The [Temporal proposal](https://github.com/tc39/proposal-temporal) promises to simplify time zone handling, fix issues with UTC and local times, and add features like daylight saving time management and easy date comparisons.

### [MUI v6 Is Out!](https://mui.com/blog/material-ui-v6-is-out/)

MUI v6 introduces CSS theme variables, container queries, and performance improvements. The update reduces package size, stabilizes Grid v2, and introduces experimental features like Pigment CSS and React Server Components, fully compatible with React 19.

### Quick Links

- [Common Causes of Memory Leaks in JavaScript](https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript)
- [CSS Grid Areas: A Fresh Look](https://ishadeed.com/article/css-grid-area/)
- [Front-End Security Checklist](https://www.trevorlasn.com/blog/frontend-security-checklist)
- [When Regex Goes Wrong](https://www.trevorlasn.com/blog/when-regex-goes-wrong)
- [Why CSS-in-JS Can Be Slow](https://playfulprogramming.com/posts/why-is-css-in-js-slow)
- [Announcing TypeScript 5.6 RC](https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/)

## Trending

### [Top Programming Languages 2024: Typescript and Rust on the Rise](https://spectrum.ieee.org/top-programming-languages-2024)

Python reigns in AI and education, while SQL remains crucial for employers. Typescript's static typing increases reliability, and Rust's memory safety gains it a solid following. Meanwhile, C is declining, but legacy languages like Fortran and Cobol persist in niche areas.

### [e18e: Improving JS Performance One Package at a Time](https://e18e.dev/?ck_subscriber_id=2328911063)

e18e is a community project focused on cleaning up outdated dependencies, speeding up widely-used JavaScript packages, and leveling up the ecosystem with modern alternatives.

### [Introducing InformAI: Let Your LLMs See What Your Users See](https://edspencer.net/2024/8/26/introducing-inform-ai)

InformAI allows developers to expose UI and component data to large language models (LLMs) with a few lines of code, enabling smarter AI responses based on app state.

### Quick Links

- [Say No to console.log!](https://dev.to/alishgiri/say-no-to-consolelog-556n): Explore alternatives to `console.log`
- [Structured Outputs in the OpenAI API](https://openai.com/index/introducing-structured-outputs-in-the-api/)
- [GitHub Models: A New Generation of AI Engineers](https://github.blog/news-insights/product-news/introducing-github-models/)

## New Tools

### [Waku: Making React Development Fun Again](https://waku.gg/)

Waku offers a lightweight, fun alternative for React development in the server components era.

### [Formity: Build Complex, Multi-Step Forms with JSON](https://www.formity.app/)

Formity makes building dynamic, customizable forms easy by defining them with JSON. It simplifies complex form development with conditions, loops, variables, and operators.

### [Rspack 1.0: A High-Performance JavaScript Bundler](https://rspack.dev/blog/announcing-1-0)

Rspack 1.0, built in Rust, delivers significant performance improvements over webpack, offering compatibility with its ecosystem while being up to 10 times faster. It introduces key features such as better bundle size optimization, support for Module Federation 2.0, and stable APIs, with growing adoption from enterprises like ByteDance, Microsoft, and Amazon.

### Quick Links

- [Coolify: Open-Source Heroku/Netlify Alternative](https://coolify.io/)
- [Web Vitals Chrome Extension](https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)
- [React Email 3.0](https://resend.com/blog/react-email-3)

## Commentary

- [It’s Time to Talk About “CSS5”](https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/)
- [Microfrontends Should Be Your Last Resort](https://www.breck-mckye.com/blog/2023/05/Microfrontends-should-be-your-last-resort)
- [Japanese Web Design: Weird, But It Works](https://www.youtube.com/watch?v=vi8pyS076a8)
- [Practices of Reliable Software Design](https://two-wrongs.com/practices-of-reliable-software-design)
- [Why Micro-Libraries Should Die](https://bvisness.me/microlibraries)
- [The Secret Behind One Million Checkboxes](https://eieio.games/essays/the-secret-in-one-million-checkboxes)
- [Is Tailwind CSS Too Redundant?](https://www.reddit.com/r/webdev/comments/1f2abca/anyone_else_find_tailwind_css_a_bit_too_redundant/)
- [React: Is It Time to Move On?](https://www.youtube.com/watch?v=0tvfC9r9lcw)


A comprehensive August 2024 update on key advancements in React 19, Next.js 15, and web development tools. Highlights include new async transitions, server components, SSR performance comparisons, and emerging technologies in the web development landscape

August 2024

Frontend Report August 2024


## 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


This report provides a detailed look at the significant developments in frontend development during the first half of November 2024. It covers the latest updates, tools, and approaches shaping the frontend scene, including React 19's full-stack features, XState for managing state, Shopify's move to React Native, improvements in Next.js 15, and how container queries impact responsive design.

## React

### [TanStack Start: Challenging Next.js](https://bobaekang.com/blog/two-ways-to-the-two-reacts/)

TanStack Start is emerging as a formidable competitor to Next.js, focusing on its client-first approach, while providing a full-featured server-side capable system, which contrasts with Next.js's server-first model.

### [XState in React: Streamlining state management for complex UIs](https://www.frontendundefined.com/posts/monthly/xstate-in-react/)

Dive into the power of XState in React applications. Learn how this state machine library simplifies handling complex state logic, enhances UI reliability, and integrates seamlessly with React for predictable and scalable state management.

### [Shopify’s React Native migration success story](https://threadreaderapp.com/thread/1853619638141071573.html)

Shopify overhauled its decade-old mobile app using React Native, reducing 1.8M lines of code and achieving faster load times (44% faster), better performance, and higher user ratings.

### Quick links

- [Seamless React upgrades in micro-frontends](https://alexocallaghan.com/upgrading-react-with-microfrontends)
- [React Navigation 7: Enhanced developer experience and powerful new features](https://reactnavigation.org/blog/2024/11/06/react-navigation-7.0/)

## Next.js

### [Exploring Next.js 15: What's new and why it's better than ever](https://aviral-blogs.hashnode.dev/exploring-nextjs-15-whats-new-and-why-its-better-than-ever)

Next.js 15 enhances build speed, improves developer experience, and adds new features like full support for React Server Components and expanded App Router functionality. It also improves image optimization with dynamic resizing and global caching. 

### [Advanced search param filtering](https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/)

Comprehensive guide on implementing search parameter filtering using App Router with startTransition and useOptimistic.

### Quick links

- [Vercel simplifies Next.js self-hosting](https://thenewstack.io/vercel-makes-changes-to-next-js-to-simplify-self-hosting/)
- [Integrating WordPress as a headless CMS with React or Next.js](https://scientyficworld.org/how-to-deploy-headless-wordpress-with-next-js/)

## Others

### [Why frameworks outperform Web components: A deep dive into key drawbacks](https://www.youtube.com/watch?v=UrS61kn4gKI)

Explore the fundamental limitations of Web Components compared to modern frameworks like React, including issues with state management, integration challenges, server-side rendering, and real-world adoption. Understand why frameworks remain the practical choice for developers today.

### [Enhancing web design with Container queries and the Containment API](https://www.joshwcomeau.com/css/container-queries-introduction/)

Container queries enable responsive design by allowing elements to adjust based on their parent’s size. With widespread browser support, these tools promise to transform design practices, and the author will share practical examples in a future post.

### Quick links

- [Browser rendering process](https://abhisaha.com/blog/exploring-browser-rendering-process)
- [HTML login form best practices](https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms)

## Trending


### [TanStack Start: A Full-Stack React framework for modern web apps](https://tanstack.com/start/latest)

TanStack Start is a powerful full-stack React framework featuring type-safe APIs, robust routing, full-document SSR, streaming, and server functions—perfect for building modern, scalable web applications.

### [How Recall.ai Cut AWS Costs by $1M with Shared Memory Optimization](https://www.recall.ai/post/how-websockets-cost-us-1m-on-our-aws-bill)

Recall.ai reduced AWS costs by $1M annually and cut CPU usage by 50% by leveraging Shared Memory for direct access between processes, eliminating the need for data copying.

### Quick links

- [GitHub Copilot Supercharged: Beyond autocomplete](https://github.blog/news-insights/product-news/universe-2024-previews-releases/)

## New Tools

### [HTML to React Chrome extension](https://chromewebstore.google.com/detail/html-to-react-figma-by-ma/chgehghmhgihgmpmdjpolhkcnhkokdfp)

Browser extension for converting HTML snippets to React or Figma.

### [Streamlining Frontend testing with Storybook Test](https://storybook.js.org/blog/storybook-test-sneak-peek/)

Storybook Test revolutionizes frontend testing by integrating component, visual, and accessibility tests into one workflow, delivering fast, browser-based results. Developers are invited to shape this game-changing tool through the early access program.

### Quick links

- [Docusaurus 3.6: Docs made easy & fast!](https://docusaurus.io/blog/releases/3.6)

## Commentary

- [Why a perfect Lighthouse score isn't everything](https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/)
- [Headless components](https://www.subframe.com/blog/how-headless-components-became-the-future-for-building-ui-libraries)
- [State of CSS survey analysis](https://www.oddbird.net/2024/11/04/css-demographics/)


A comprehensive update on key advancements in frontend development for the first half of November 2024, highlighting React 19's full-stack capabilities, XState for state management, Shopify's React Native migration, Next.js 15 enhancements, and the impact of container queries on responsive design.

Nov 2024 (First Half)

Frontend Report First Half of November 2024


## 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


The report for July 2024 gives you a snapshot of what’s happening in the world of web development. React is evolving with Server Components, and Next.js continues to push the boundaries of performance. Vite is solidifying its position as a top build tool, while TypeScript and other frameworks hold steady. Whether you’re looking for the latest updates or just want to stay in the loop, this report has you covered with key trends, tools, and insights to keep you informed.

## React

### [State of React: Aging like fine wine, now with Server Components](https://stateofreact.com/en-US)

This year, React Server Components have shaken up the ecosystem, rivaling the impact of Hooks in 2018. As React 18 sees wide adoption, the future of Server Components is still being figured out. At the same time, SPAs dominate with a usage of 86%.

### [React Conf 2024: React 19, Server Components & other talks you don’t want to miss](https://conf.react.dev/talks)

From React 19’s newest features to breaking the rules and real-time server components, React Conf 2024 offers a dynamic lineup including spatial computing, error-solving strategies, and more.

### [Using React Native frameworks, such as Expo, is now the recommended approach to create new apps](https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps)

React Native has streamlined the development process by recommending frameworks like Expo. These frameworks offer a complete toolbox for building production-ready apps, saving you from reinventing the wheel.

### Quick links

- [Using React 19 with Vite and Next.js (youtube.com)](https://www.youtube.com/watch?v=AdkNcFUsRQQ)
- [Sneaky React Memory Leaks: How the React compiler won’t save you | Kevin Schiener](https://schiener.io/2024-07-07/react-closures-compiler?utm_source=tldrwebdev)
- [How Airbnb Smoothly Upgrades React](https://tracking.tldrnewsletter.com/CL0/https:%2F%2Flinks.tldrnewsletter.com%2FH1PJOD/1/01000190eec8684b-ae23de3c-298b-4e48-baf6-6b87ab368f0e-000000/PGZOjErYrecaY5-P--SCa4c8UNLM_fLs9INsqzrQ_ms=363)

## NextJS

### [Google’s JavaScript indexing: Myths busted, modern SEO practices embraced](https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process)

This research has debunked several common myths about Google's handling of JavaScript-heavy websites. Turns out Google can effectively render and index JavaScript content, including complex SPAs, dynamically loaded content, and streamed content!

### [Someone built a library that reduced TBT by 380% for NextJS](https://github.com/woywro/next-lazy-hydration-on-scroll)

This component delays the hydration of your elements until they come into view. This can significantly improve initial load performance and reduce time-to-interactive for large pages.

Also see: [I built a library that reduced TBT by 380% : r/nextjs (reddit.com)](https://www.reddit.com/r/nextjs/comments/1ejtbp8/i_built_a_library_that_reduced_tbt_by_380/)

### [**Secret knowledge to self-host Next.js**](https://www.flightcontrol.dev/blog/secret-knowledge-to-self-host-nextjs)

Self-hosting Next.js apps can be complex, but Flightcontrol's guide demystifies the process. They cover essential steps like environment setup, deployment strategies, and optimizing performance.

### Quick links

- [Flags as Code in Next.js – Vercel](https://vercel.com/blog/flags-as-code-in-next-js)
- [Differences between the Pages and App Router with RSC Diagram : r/nextjs (reddit.com)](https://www.reddit.com/r/nextjs/comments/1eaefm9/differences_between_the_pages_and_app_router_with/)

## Others

### [State of JS 2023: TypeScript ascends, React and Vue hold steady, and Next.js dominates](https://2023.stateofjs.com/en-US/)

TypeScript continues its ascent, with smaller libraries making waves in the JavaScript world. React and Vue hold steady, while Angular sees a decline. Emerging frameworks like Qwik and Stencil are worth watching.

Next.js dominates the meta-framework space, with strong contenders in SvelteKit and Remix. Testing and build tools evolve, with Vitest and Vite on the rise. Monorepos favor Turborepo and pnpm.

In the backend, Express and Nest reign supreme.

### [Announcing TypeScript 5.6 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-beta/)

TypeScript 5.6 Beta introduces several new features and improvements, including the `using` keyword for resource management, better type-checking for JSX, and performance enhancements. It also brings more precise control over tuple types and expanded capabilities for enums.

### [Vite - The Final Boss of Build Tools](https://bytes.dev/archives/310?ck_subscriber_id=2328911063)

Vite has achieved its goal of becoming a foundational tool in the web ecosystem, with widespread adoption from frameworks like Remix and Angular. The Vite team is creating a unified toolchain with Rust-based tools like Rolldown and OXC for faster and more comprehensive JavaScript and TypeScript handling.

### Quick links

- [Bytes #309 - War of the Bundlers](https://bytes.dev/archives/309)
- [JavaScript — What’s new with ECMAScript® 2024 (ES15) — In Depth Guide | by Igor Komolov | Medium](https://medium.com/@yourfuse/javascript-whats-new-with-ecmascript-2024-es15-ef056d2f4bf1)
- [Introducing Vercel AI SDK 3.2 – Vercel](https://vercel.com/blog/introducing-vercel-ai-sdk-3-2)

## Trending

### [ViteConf 2024: Mark your calendars for October 3rd](https://viteconf.org/)

ViteConf 2024 promises a 24-hour marathon of talks from top innovators in the Vite ecosystem. From Astro to Svelte, and beyond, get ready to dive deep into the next-gen web.

### [Astro 4.12 introduces Server Islands, blending static HTML with server-generated components](https://astro.build/blog/astro-4120/)

Extending from [islands architecture](https://astro.build/blog/introducing-astro/), Server islands make it easy to combine high performance static HTML and dynamic server-generated components for enhanced performance.

### [Eureka Labs is revolutionizing education with AI-native schools](https://eurekalabs.ai/)

Their first offering, LLM101n, is an undergrad course that teaches students to train their own AI, blending teacher expertise with AI assistance.

### Quick links

- [Accelerating Idea to Production: Using Visual Development + AI to Ship 10x Faster (youtube.com)](https://www.youtube.com/watch?v=SMlTRGbYadI)
- [Popover API 101 — Amit Merchant — A blog on PHP, JavaScript, and more](https://www.amitmerchant.com/popover-api-101/)

## New tools

### [TurboPack: The Next-Gen Bundler](https://turbo.build/pack/docs)

TurboPack is redefining bundling for JavaScript and TypeScript with its high-performance, incremental approach. Built by the creators of webpack, it promises lightning-fast development speeds by caching tasks at a granular level.

- [Turbopack updates: Moving homes – Vercel](https://vercel.com/blog/turbopack-moving-homes)

### [Meet es-toolkit - aka. “lodash on steroid”](https://github.com/toss/es-toolkit)

A modern JavaScript utility library that's 2-3 times faster and up to 97% smaller—a major upgrade to lodash, with built-in Typescript support.

### [React Flow - Node-Based UIs in React](https://reactflow.dev/)

Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more.

### Quick links

- [TinyBase](https://tinybase.org/): The *reactive* data store for local-first apps.
- [Mako](https://makojs.dev/blog/mako-open-sourced): An extremely fast, production-grade web bundler based on Rust.
- [render.com](https://render.com/?utm_source=coopeprpress&utm_medium=cooperpress): Unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git.
- [React CodeMirror](https://uiwjs.github.io/react-codemirror/): CodeMirror is a code editor component for the web. This React-specific component supports React hooks, TypeScript, and more.
- [WorkOS — Your app, Enterprise Ready](https://workos.com/?utm_source=cpjava&utm_medium=newsletter&utm_campaign=q22024): The Modern Identity Platform for B2B SaaS (SSO, SCIM, and more).

## Commentary

- [Your pain in 2024 as a web developer. : r/webdev (reddit.com)](https://www.reddit.com/r/webdev/comments/1dzw7l7/your_pain_in_2024_as_a_web_developer/?utm_source=tldrwebdev)
- [sbensu: We need visual programming. No, not like that.](https://blog.sbensu.com/posts/demand-for-visual-programming/?utm_source=tldrwebdev)
- [AI didn’t take my job](https://dava.ai/n/hank/ai-didnt-take-my-job)
- [Ask HN: Junior dev and I don't want to compete in this job market. Any advice? | Hacker News (ycombinator.com)](https://news.ycombinator.com/item?id=41125070&utm_source=tldrwebdev)
- [Please Stop Using Barrel Files | TkDodo's blog](https://tkdodo.eu/blog/please-stop-using-barrel-files)


The Front-end Market Report for July 2024 gives you a snapshot of what’s happening in the world of web development. React is evolving with Server Components making waves, and Next.js continues to push the boundaries of performance. Vite is solidifying its position as a top build tool, while TypeScript and other frameworks hold steady. Whether you’re looking for the latest updates or just want to stay in the loop, this report has you covered with key trends, tools, and insights to keep you informed.

July 2024

Frontend Report July 2024


![](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


This month’s newsletter highlights key advancements in web development, including React’s new compiler beta and top updates from Next.js Conf 2024, featuring optimizations like Edge Functions and React Server Components. Industry trends show a shift toward full-stack roles, modern CSS standards, and rising demand for engineering talent. AI-driven tools like GitHub Copilot and Project IDX continue advancing development workflows.

## React

### [React Compiler Beta Release](https://react.dev/blog/2024/10/21/react-compiler-beta-release)

React’s new compiler, in beta, introduces optimizations that minimize re-renders and improve code-splitting, enhancing performance, especially for larger applications.

### [The Interactive Guide to Rendering in React](https://ui.dev/why-react-renders)

Discover why React components render, what triggers re-renders, and how to optimize them for better app performance. Perfect for new developers looking to understand React’s rendering process.

### Quick Links

- [React Folder Structure in 5 Steps](https://www.robinwieruch.de/react-folder-structure/)
- [React Native Storybook 8](https://storybook.js.org/blog/react-native-storybook-8/)
- [Conditional React hooks pattern](https://robinmalfait.com/blog/conditional-react-hooks-pattern)
- [Tailwind CSS Group Modifier to Prevent React Rerenders](https://www.nico.fyi/blog/tailwind-css-group-modifier-to-prevent-react-rerender)

## Next.js

### [Key Highlights from Next.js Conf 2024: What You Missed](https://vercel.com/blog/recap-next-js-conf-2024)

Get the highlights from Next.js Conf 2024, featuring exciting updates on React Server Components, Edge Functions, and the new Next.js features that are shaping modern web development.

### Quick Links

- [Server Side State management in NextJS: a deep dive into React Cache](https://www.yoseph.tech/posts/nextjs/server-side-state-management-in-nextjs-a-deep-dive-into-react-cache)
- [How to Build and Deploy a Headless WordPress with Next.js](https://scientyficworld.org/how-to-deploy-headless-wordpress-with-next-js/)
- [Managing Advanced Search Param Filtering in the Next.js App Router](https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/)

## Others

### [State of Frontend 2024  - The Rise of Full-stack development](https://tsh.io/state-of-frontend/)

Full-stack developers now outnumber senior frontend roles, with performance as a top challenge prompting simpler applications. Nearly 69% of companies plan to integrate AI for developer support, and remote work remains popular.

### [State of CSS 2024 - Embracing 'New CSS' with Advanced Features and Enhanced Browser Support](https://2024.stateofcss.com/en-US/)

The report highlights a pivotal shift from traditional CSS practices to "New CSS," characterized by the adoption of advanced features like sub-grid, variables, and container queries.

### [State of Engineering Market 2024 - The growth resumes](https://newsletter.pragmaticengineer.com/p/state-of-eng-market-2024?utm_source=substack&utm_medium=email)

The report highlights resilient demand for software engineers, with growth in remote work and a broadening search for talent beyond traditional tech hubs. Key areas include AI, machine learning, and cybersecurity.

### Quick Links

- [The New Architecture in React Native](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here)
- [Content-Aware Components Using CSS :has(), Grid, and Quantity Queries](https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/)
- [Unleash the Power of Scroll-Driven Animations](https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/)
- [The most effective ways to improve Core Web Vitals](https://web.dev/articles/top-cwv)
- [How We Shrunk Our Git Repo Size by 94%](https://www.jonathancreamer.com/how-we-shrunk-our-git-repo-size-by-94-percent/)
- [Fixing your website's JavaScript performance](https://developer.mozilla.org/en-US/blog/fix-javascript-performance/)

## Trending

### [Enhance Your Code Reviews with GitHub Copilot Workspace (Public Preview)](https://github.blog/changelog/2024-10-29-refine-and-validate-code-review-suggestions-with-copilot-workspace-public-preview/)

GitHub Copilot Workspace now offers tools to refine and validate code review suggestions, enabling a smoother and more efficient review process with AI-driven insights.

### [How Vercel adopted microfrontends](https://vercel.com/blog/how-vercel-adopted-microfrontends)

Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends.

## New Tools

### [TanStack Start - Full-stack React framework](https://tanstack.com/start/latest)

Full-document SSR, Streaming, Server Functions, bundling and more, powered by TanStack Router, Vinxi, and Vite.

### [Project IDX - Building apps in the cloud](https://idx.google.com/)

Project IDX simplifies the process of setting up and managing a monolithic tech stack, integrating services from database to authentication. It aims to streamline the deployment and maintenance of cohesive, scalable applications.

### [OneStack - When creating websites and apps is too complex](https://onestack.dev/)

One is a new React framework for web and native, built on Vite. It simplifies things with universal, [typed routing](https://onestack.dev/docs/routing) seamlessly across static, server, and client pages

### Quick Links

- [Motion Canvas - A TypeScript library for creating animated videos using the Canvas API](https://motioncanvas.io/)
- [Deno 2: New Features and Enhancements](https://deno.com/blog/v2.0)
- [Nuqs: Lightweight Data Fetching for React](https://nuqs.47ng.com/)

## Commentary

- [Why I Switched from Svelte to React: A Developer’s Perspective](https://www.reddit.com/r/sveltejs/comments/1gbwi0b/i_moved_from_svelte_to_react/)
- [A Reddit discussion on React Query alternatives](https://reddit.com/r/reactjs/comments/1ghxz99/if_youre_not_using_react_query_in_large/)
- [The WordPress, WP Engine and ACF Drama](https://dev.to/matfrana/the-wordpress-wp-engine-and-acf-drama-5h88)
- [Using AI Generated Code Will Make You a Bad Programmer](https://slopwatch.com/posts/bad-programmer/)
- [Measuring Developer Productivity: Real-World Examples](https://newsletter.pragmaticengineer.com/p/measuring-developer-productivity-bae)

This month’s newsletter highlights React’s new compiler beta, key updates from Next.js Conf 2024, and industry shifts toward full-stack roles and modern CSS. AI-driven tools like GitHub Copilot and Project IDX are further advancing development workflows.

October 2024

Frontend Report October 2024


A second half of November 2024 frontend roundup featuring React Router v7, Tailwind CSS v4 Beta, and Vite 6.0. Explore tools like Next Cloudinary, Extism, and SmarkForm, plus insights on SSR cost-effectiveness, JavaScript Symbols, and new CSS strategies.

## React

### [React Router v7: New features and flexible development options](https://remix.run/blog/react-router-v7)

React Router v7 introduces `framework mode` with features from Remix, including server rendering and improved type safety. It also includes enhanced templates for starting new projects, and comprehensive upgrade guides for React Router v6 and Remix v2 users.

### [React Anti-Pattern: Stop Passing Setters Down the Components Tree](https://matanbobi.dev/posts/stop-passing-setter-functions-to-components)

Passing `useState` setters as props can lead to abstraction leaks, reducing clarity and reusability, making it harder to reason about the state. A better approach is to use callback functions to handle state changes, making your code more maintainable and flexible.

### Quick links

- [React Server Components vs. SSR: 5 key differences](https://www.tymzap.com/blog/5-differences-between-react-server-components-and-server-side-rendering)
- [React Portals: Escaping the DOM hierarchy](https://techhub.iodigital.com/articles/what-are-react-portals)
- [Tremor: React components for dashboards & charts](https://tremor.so/)

## Next.js

### [Next Cloudinary: A game-changer for client-side file handling](https://robiul.dev/next-cloudinary-a-game-changer-for-client-side-file-handling)

Next Cloudinary is a flexible tool that simplifies file handling and image optimization in Next.js applications. It supports various file sources like Google Drive and offers advanced image effects, real-time adjustments, video transformations, watermarking and responsive rendering.

### [Solito 4.3: Bridge the gap between React Native and Next.js](https://solito.dev)

Solito enables seamless development of universal React Native and web applications by sharing components and navigation across platforms. Built to integrate with Expo and Next.js, it ensures high performance and a consistent user experience across mobile and web.

### Quick links

- [Payload 3.0: A Next.js-Native CMS](https://payloadcms.com/blog/payload-30-the-first-cms-that-installs-directly-into-any-nextjs-app)

## Others

### [Mastering JavaScript Symbols: Unique keys, custom behaviors, and advanced usages](https://www.trevorlasn.com/blog/symbols-in-javascript)

Delve into JavaScript Symbols, the powerful tool for creating unique property keys and enabling custom behaviors in your objects. Explore practical applications, from controlling primitive conversions with `Symbol.toPrimitive` to building specialized arrays with `Symbol.species`. Learn about their uniqueness, serialization quirks, and how `Symbol.for()` enables global sharing.

### [A simple guide to importing JavaScript libraries without a build system](https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/)

This guide walks you through importing JavaScript libraries like Chart.js and @atcute/oauth-browser-client, covering global variables, ES modules, and CommonJS. It explores using UMD files, ES modules with importmaps, and converting CommonJS modules, highlighting challenges and the importance of a build step for dependency updates.

### Quick links

- [Essential TypeScript for React: Quick productivity tips](https://www.jacobparis.com/content/react-ts)
- [Easy Light/Dark Modes: No fuss!](https://frontendmasters.com/blog/no-fuss-light-dark-modes/)
- [Building Reddit's frontend with Vite](https://www.reddit.com/r/RedditEng/comments/1dhztk8/building_reddits_frontend_with_vite/)
- [Vitest vs. Jest: The ultimate showdown](https://www.speakeasy.com/post/vitest-vs-jest)

## Trending

### [Evaluating Browser Support: A Framework for Deciding When to Use New CSS Features](https://www.joshwcomeau.com/css/browser-support)

Learn a framework to decide on using new CSS features based on browser support. It considers fallback experience, audience-specific browser stats, and risks of broken experiences. Simulate unsupported browsers by removing CSS declarations and use @supports for custom fallbacks when needed.

### [Crafting a new web performance score: Designing for scalability and clarity](https://csswizardry.com/2024/11/designing-and-evolving-a-new-performance-score/?utm_source=tldrwebdev)

This blog discusses the limitations of using Core Web Vitals (CWV) scores for comparing websites due to their differing units and scales. It introduces CrRRUX, a new metric that normalizes CWV metrics to a 0-1 scale and averages them for a single, comparable performance score within a cohort.

### Quick links

- [Framer Motion goes solo: New adventures in animation!](https://motion.dev/)

## New Tools

### [Tailwind CSS v4 Beta: Built for speed and modern web development](https://tailwindcss.com/blog/tailwindcss-v4-beta)

Tailwind CSS v4 Beta introduces a revolutionary engine with 5x faster full builds and 100x faster incremental builds. Enjoy a unified toolchain, CSS-first configuration, and modern web features like cascade layers, container queries, and popovers.

### [Vite 6.0: Faster, simpler, more extensible!](https://vitejs.dev/blog/announcing-vite6/)

Vite 6 brings groundbreaking updates, including a 10M+ weekly npm downloads milestone, faster builds, and a new experimental Environment API for better development experiences. With modern features, broader framework support, and seamless upgrades, it's the most significant release since Vite 2.

### [Extism: Unlocking WebAssembly for everyone](https://extism.org/)

Extism is a lightweight, universal framework for building with WebAssembly (Wasm), supporting its use across various platforms. It offers a flexible, plug-in system designed to make all software programmable.

### Quick links

- [SmarkForm: Effortless markup-driven and extendable forms](https://smarkform.bitifet.net/)
- [SVG to Font: Generator of fonts from SVG icons](https://wangchujiang.com/svgtofont/)
- [Effortlessly Transform JSON into Stunning Interactive Tree Diagrams with jsontr.ee](https://github.com/xzitlou/jsontr.ee)

## Commentary

- [Which IDEs do devs actually love? (And why!)](https://substack.com/redirect/cd81c4f0-4acd-4366-b3d4-896fe33c2d65)
- [Technical Debt and Interop Challenges in the Web Platform](https://bkardell.com/blog/debt.html)
- [Impressions of React and TypeScript from an Elixir/Elm Developer: A Tale of Two Ecosystems](https://korban.net/posts/elm/2024-11-16-typescript-react-impressions/)
- [PostHog's Engineering: Solving challenges with trust and future-focused tech decisions](https://dub.link/bytes-nov25)


A second half of November 2024 frontend roundup featuring React Router v7, Tailwind CSS v4 Beta, and Vite 6.0. Explore tools like Next Cloudinary, Extism, and SmarkForm, plus JavaScript Symbols, and new CSS strategies.

Nov 2024 (Second Half)

Frontend Report Second Half of November 2024


This roundup covers the latest in React, Next.js, and web development. React Server Actions are now Server Functions, and there's a deep dive into the React 19 compiler. In Next.js news, OpenNext is enabling self-hosting, and there's fresh guidance on Progressive Web Apps. Plus, explore tips on lazy loading, CSS Grid, and JavaScript's evolution.

## React

### [Server Functions are Here! (They Used to be Server Actions)](https://19.react.dev/reference/rsc/server-functions 'https://19.react.dev/reference/rsc/server-functions')

React's Server Actions got a name change! Now they're Server Functions, and they're not just for mutations anymore.

### [How to Use React Compiler – A Complete Guide](https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/)

The buzz around React 19's compiler is real. This comprehensive guide walks you through everything you need to know to harness its power.

### [SPA Lazy Loading: Watch Out for These Pitfalls](https://reacttraining.com/blog/spa-lazy-loading-pitfalls)

Lazy loading with React Router can be tricky. Avoid common pitfalls by understanding how to structure your loader functions for optimal performance.

### Quick Links

- [The unspoken rules of React hooks](https://macwright.com/2024/09/19/the-extra-rules-of-hooks)
- [React Testing Technique: Inverse Assertions](https://www.epicweb.dev/inverse-assertions)
- [Modern Data-Fetching in React - Comparing architectures at a high level](https://reacttraining.com/blog/modern-data-fetching-in-react)
- [Vim for React Developers - A free course focusing on real-world scenarios](https://vimforreactdevs.com/)

## Next.js

### [ChatGPT Ditches Next.js, Embraces Remix: What's the Deal?](https://www.youtube.com/watch?v=hHWgGfZpk00)

OpenAI's ChatGPT has made a switch from Next.js to Remix. We're breaking down the possible reasons behind this intriguing move.

### [OpenNext: Sharing is Caring for Next.js Apps](https://opennext.js.org/)

Next.js, unlike Remix, Astro, or the other modern frontends, doesn't have a way to self-host across different platforms. OpenNext is on a mission to make self-hosting Next.js apps a reality across different platforms. No more vendor lock-in!

### [Next.js Goes PWA](https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps)

Progressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. The new Next.js docs now make it easier than ever.

### Quick Links

- [Deploying a Next.js App to Production in any server](https://www.saybackend.com/blog/04-deploy-nextjs-to-production-without-vercel)
- [Reliable date formatting in Next.js – Internationalization (i18n) for Next.js](https://next-intl-docs.vercel.app/blog/date-formatting-nextjs)

## Others

### [Easy RAG for TypeScript and React Apps](https://edspencer.net/2024/9/2/easy-rag-for-typescript-and-react-apps)

This article walks through setting up the necessary architecture and TypeScript types to efficiently integrate **Retrieval-Augmented Generation (RAG)** in **TypeScript** and **React** apps.

### [Replacing React code with CSS :has selector](https://www.developerway.com/posts/replacing-react-with-css)

See real-world React examples where CSS :has steals the show! From handling focus to jazzing up tables, it's all here.

### [Is ES5 Still Relevant? A Look at JavaScript's Evolution](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)

This Google engineer challenges the norm: Do we really need to transpile to ES5 anymore?

### Quick Links

- [Data Synchronization with React Query](https://ui.dev/c/query/data-synchronization)
- [The web's clipboard, and how it stores data of different types](https://alexharri.com/blog/clipboard)
- [CSS display contents - How it works](https://ishadeed.com/article/display-contents/)
- [Cleaner JavaScript promises with safe-await](https://alexpate.com/posts/cleaner-promises-with-safe-await)
- [CSS Masonry & CSS Grid](https://css-tricks.com/css-masonry-css-grid/)

## Trending

### [Open Letter to Oracle: It's Time to Free JavaScript!](https://javascript.tm/)

Prominent figures in the JavaScript world are calling on Oracle to release the "JavaScript" trademark: _You have long ago abandoned the JavaScript trademark, and it is causing widespread, unwarranted confusion and disruption._

### [Bytes #323 - Hono: The Next Big Thing in Web Frameworks?](https://bytes.dev/archives/323)

Discover why it's causing a stir in the JavaScript world. Think blazing-fast speeds and effortless full-stack development. And some other cool bits.

### Quick Links

- [Prompt design - A case for building better tools for it](https://www.cursor.com/blog/prompt-design)
- [Using ChatGPT to reverse engineer minified JavaScript](https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai)

## New Tools

### [Meet Conform: The Type-Safe Form Validation Library](https://conform.guide/)

Conform is a type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like [Remix](https://remix.run/) and [Next.js](https://nextjs.org/).

### [NewDevTools: Your Daily Dose of Developer Goodies](https://newdevtools.com/)

Discover new developer tools & services daily with NewDevTools. Updated daily!

### [Bulletproof React - A simple, scalable, and powerful architecture for building production ready React applications](https://github.com/alan2207/bulletproof-react)

This is not supposed to be a template, boilerplate or a framework, but more of an opinionated guide, showcasing solving most of the real-world problems of an application in a practical way and help developers write better applications.

### Quick Links

- [Tailwind CSS for Emails? Now You Can Inline Those Styles!](tailwind-to-inline-npm-npmjs.com)](https://www.npmjs.com/package/tailwind-to-inline))
- [Vaul 1.0: New React Drawer Component](vaul-emilkowal.ski)](https://vaul.emilkowal.ski/))
- [DMNO - Environment Variables Evolved](https://dmno.dev/)
- [prabhuignoto/react-chrono: 🕑 Modern Timeline Component for React](https://github.com/prabhuignoto/react-chrono)
- [Write and Code with ChatGPT: Introducing Canvas](https://openai.com/index/introducing-canvas/)

## Commentary

- [Why Gumroad Didn't Choose htmx](https://htmx.org/essays/why-gumroad-didnt-choose-htmx/)
- [Something went wrong – Ways out of the JavaScript crisis](https://molily.de/something-went-wrong/)
- [The hardest bug investigation of my career and the insane code that caused it](https://www.reddit.com/r/ExperiencedDevs/comments/1fu0e5q/the_hardest_bug_investigation_of_my_career_and/)


This roundup highlights the latest in React and Next.js, including Server Functions, the React 19 compiler, and self-hosting with OpenNext. Find tips on lazy loading, CSS Grid, JavaScript's evolution, plus new tools and expert insights.

Playground > Frontend > Report