Enhancing New York Times Web Performance with React 18
The New York Times upgraded to React 18 for better performance and new features like Concurrent Mode and server-side rendering. Challenges with "embedded interactives" were overcome, leading to improved website performance.
Read original article
The New York Times recently upgraded its website to React 18, aiming to enhance performance and access new features. The upgrade introduced Concurrent Mode for smoother rendering, automatic batching for optimized performance, and new features like server-side rendering and streaming updates. The performance gains were crucial for improving Interaction to Next Paint scores, a key metric for search engine ranking. The migration process involved removing deprecated dependencies, upgrading major dependencies, and integrating React 18 functionalities like createRoot and hydrateRoot. However, challenges arose with highly trafficked content called "embedded interactives," impacting the React upgrade. These interactives, rendered server-side with dangerouslySetInnerHTML, posed issues due to React 18's stricter hydration mismatch requirements. The team navigated these challenges by adjusting script execution and ensuring correct script load ordering. Despite the hurdles, the React 18 upgrade brought significant performance improvements and opened doors to future enhancements for The New York Times website.
Related
AI-powered conversion from Enzyme to React Testing Library
Slack engineers transitioned from Enzyme to React Testing Library due to React 18 compatibility issues. They used AST transformations and LLMs for automated conversion, achieving an 80% success rate.
Understanding React Compiler
React's core architecture simplifies app development but can lead to performance issues. The React team introduced React Compiler to automate performance tuning by rewriting code using AST, memoization, and hook storage for optimization.
Understanding React Compiler
React's core architecture simplifies development but can lead to performance issues. The React team introduced the React Compiler to automate performance tuning by rewriting code. Transpilers like Babel convert JSX for efficiency. Compilers, transpilers, and optimizers analyze and produce equivalent code. React Compiler enhances functionality using Abstract Syntax Trees, memoization, and hook storage for optimized performance.
Show HN: OSS React Components for Dashboards
Installing Tremor Raw for React v18.2.0+ with Tailwind CSS v3.4+. Compatible with Next.js, Vite, Remix. Resources: Tremor Blocks, Figma UI Kit, Remix Icon. Footer: bug reporting, Tremor Labs, Inc. rights.
It's not just you, Next.js is getting harder to use
Next.js 13 introduces App Router with Server Components and enhanced caching, but users face challenges in utilizing features like Layouts and cookies. The shift to a more complex framework raises debates on balancing functionality and user-friendliness.
5 comments[1] https://www.nytimes.com/2024/06/29/us/politics/biden-donors-...
Related
AI-powered conversion from Enzyme to React Testing Library
Slack engineers transitioned from Enzyme to React Testing Library due to React 18 compatibility issues. They used AST transformations and LLMs for automated conversion, achieving an 80% success rate.
Understanding React Compiler
React's core architecture simplifies app development but can lead to performance issues. The React team introduced React Compiler to automate performance tuning by rewriting code using AST, memoization, and hook storage for optimization.
Understanding React Compiler
React's core architecture simplifies development but can lead to performance issues. The React team introduced the React Compiler to automate performance tuning by rewriting code. Transpilers like Babel convert JSX for efficiency. Compilers, transpilers, and optimizers analyze and produce equivalent code. React Compiler enhances functionality using Abstract Syntax Trees, memoization, and hook storage for optimized performance.
Show HN: OSS React Components for Dashboards
Installing Tremor Raw for React v18.2.0+ with Tailwind CSS v3.4+. Compatible with Next.js, Vite, Remix. Resources: Tremor Blocks, Figma UI Kit, Remix Icon. Footer: bug reporting, Tremor Labs, Inc. rights.
It's not just you, Next.js is getting harder to use
Next.js 13 introduces App Router with Server Components and enhanced caching, but users face challenges in utilizing features like Layouts and cookies. The shift to a more complex framework raises debates on balancing functionality and user-friendliness.