RD#497 A Guide to Performance Optimization with Next.js

A Guide to Performance Optimization with Next.js
19 minutes by Cory Miller

Find out why performance matters for your website, what common Next.js performance issues are, and what you can do to fix them. Cory covers practical techniques including proper image handling with next/image, optimizing third-party scripts, using Suspense for improved loading experiences, and choosing appropriate rendering methods based on content needs.

Bit: Open source framework for composable software
sponsored by bit

A build system framework for development of composable software. Natively to Harmony, and support for NodeJS, React apps (with Vite), NextJS, Angular, Vue and more. Bit enables teams to build, manage, and maintain their own applications and components.

Server Actions with Toast (useEffect)
8 minutes by Robin Wieruch

This tutorial explains how to implement toast notifications for React Server Actions using the useActionState Hook and useEffect. The approach involves returning a response object from server actions that includes a timestamp to prevent displaying outdated notifications, tracking state changes with useRef to avoid duplicate toasts, and handling different notification types.

Beyond React.memo: Smarter Ways to Optimize Performance
6 minutes by Christian Ekrem

This article challenges the common practice of defaulting to React.memo for performance optimization, suggesting more elegant alternatives based on composition. Christian explains that understanding React's rendering model is key—components re-render when their parent re-renders, not just when props change. Two primary patterns are recommended: "moving state down" by isolating state to smaller components, and using "children as props" to prevent unnecessary re-renders.

Building APIs with Next.js
10 minutes by Lee Robinson

This comprehensive guide walks developers through building APIs with Next.js, covering everything from initial setup to deployment. The guide explains when to create API endpoints versus using Server Components for direct data fetching, and includes deployment considerations for both standard Node.js and static export scenarios.

How The New York Times migrated from Enzyme into React Testing Library
8 minutes by The NYT Open Team

After evaluating three possible approaches (bulldozer, consensus, and piecemeal), they chose the piecemeal method, which involved updating individual files strategically starting with the simplest cases. This approach allowed them to build momentum, minimize disruption, and foster collaboration among engineers by establishing clear patterns that others could follow, ultimately enabling them to balance the migration with ongoing development priorities.

Syntax Podcast: A 10x Faster TypeScript
sponsored by Sentry

The compiler is being ported to Go, should become 10x and land in TS 7.0. Learn more in this Syntax.fm podcast interview with Anders Hejlsberg, notably why they choose to use Go over Rust. Watch here.

webdev

• The CSS :not() pseudo-class
• Cool native HTML elements you should already be using
• CSS relative colours

javascript

• A 10x Faster TypeScript
• JavaScript in 2024

And the most popular article from the last issue was:

• Signals in React? Not a good idea

newsletters

• Programming Digest
• Leadership in Tech
• C# Digest

Would you like to advertise in the newsletter? Check out our media kit and get in touch.