I let React Compiler handle memoization: Here’s what actually broke

ProMe, a TTRPG Companion App

ProMe là ứng dụng hỗ trợ (companion app) cho trò chơi nhập vai solo The Protector's Memories, được xây dựng bằng Next.js dưới dạng PWA với tính năng offline nhờ Serwist và lưu trữ cục bộ (local-first) đồng bộ lên Netlify DB (Neon). Ứng dụng tích hợp nhiều công nghệ như bản đồ lục giác CSS, hệ thống nhật ký Markdown nâng cao, âm thanh cross-fading bằng Howler.js, cùng cơ chế đồng bộ hai chiều giữa local và cloud kèm xử lý xung đột.

Lập trình viên cần đọc bài này để khám phá cách xây dựng một ứng dụng PWA toàn diện với Next.js, từ thiết kế giao diện độc đáo đến giải quyết vấn đề đồng bộ hóa dữ liệu và xung đột trong hệ thống local-first, giúp hiểu rõ cách tối ưu hóa hiệu suất và trải nghiệm người dùng trong ứng dụng game.

Turbopack: What's New in Next.js 16.3

Next.js 16.3 cải thiện đáng kể hiệu suất Turbopack với giảm tới 90% bộ nhớ máy chủ dev nhờ bộ nhớ đệm in-memory kết hợp filesystem, tăng tốc 5.5 lần cho next build đã cache, và tích hợp trình biên dịch React gốc Rust (20–50% nhanh hơn Babel). Bản phát hành cũng hỗ trợ import.meta.glob tương thích Vite, giảm 15% thời gian khởi động HMR, tối ưu bundle runtime, và cấu hình PostCSS theo gói cho monorepos.

Một lập trình viên Next.js nên đọc bài này để khám phá cách Turbopack cải thiện đáng kể hiệu suất phát triển và xây dựng ứng dụng với các tính năng mới như cache disk, Rust-native compiler và HMR nhanh hơn, giúp tiết kiệm thời gian và tài nguyên.

Next.js 16.3: Instant Navigations

Next.js 16.3 Preview giới thiệu Instant Navigations với các tính năng tùy chọn nhằm mang lại trải nghiệm tương tự SPA cho ứng dụng server-driven Next.js thông qua Streaming (hiển thị giao diện tải nhanh bằng Suspense) hoặc Caching (tái sử dụng giao diện đã cache trước đó qua 'use cache'). Hệ thống Partial Prefetching mới thay thế prefetch theo liên kết bằng một shell tái sử dụng cho mỗi route, giảm thiểu yêu cầu mạng không cần thiết.

Lập trình viên Next.js nên đọc để khám phá cách cải tiến hiệu suất và trải nghiệm người dùng với các tính năng như Instant Navigations—streaming, caching và partial prefetching—để tối ưu hóa ứng dụng server-side mà vẫn giữ tính tương tác nhanh như SPA.

HeroUI v3 Lands as a Ground-Up Rewrite for React and React Native, Built on Tailwind CSS v4

HeroUI v3 là phiên bản viết lại hoàn toàn từ đầu của thư viện component React (từng có tên …

You're Using React Compound Components Wrong

Hầu hết hướng dẫn về React compound components đều dùng ví dụ <Select>/<Option> không phù hợp, vì pattern này chỉ tối ưu cho layout linh hoạt với nội dung tĩnh (tabs, cards), chứ không phải danh sách dữ liệu động. Khi dữ liệu đến từ API, sử dụng props API đơn giản hơn, type-safe hơn, và dễ xử lý sắp xếp/lọc/ảo hóa.

Lập trình viên nên đọc bài này để tránh nhầm lẫn giữa mô hình Compound Components—dành cho giao diện layout tĩnh—với trường hợp sử dụng cho danh sách dữ liệu động, từ đó tối ưu hóa code, tránh lỗi type safety và áp dụng đúng nguyên tắc thiết kế React hiệu quả.

Different hydration and rendering strategies

Bài viết cung cấp hướng dẫn toàn diện về các chiến lược rendering và hydration trên web, từ static generation, CSR, SSR, streaming SSR, islands architecture, React Server Components (RSC), đến fine-grained reactivity (SolidJS, Svelte 5) và Qwik's resumability. Nó so sánh ưu nhược điểm của từng phương pháp bằng ví dụ code, đồng thời giới thiệu các tính năng mới trong Next.js 16.3 như Cache Components và Partial Prefetching nhằm tối ưu trải nghiệm điều hướng. Cuối cùng, bài viết đưa ra khuyến nghị lựa chọn: static + islands cho website nội dung, RSC cho ứng dụng, và các chiến lược chuyên biệt chỉ khi cần giải quyết vấn đề cụ thể.

Lập trình viên nên đọc bài này để tìm hiểu cách tối ưu hóa hiệu suất và trải nghiệm người dùng trong ứng dụng web bằng cách so sánh các chiến lược khác nhau, từ cơ bản đến tiên tiến, giúp chọn lựa phương pháp phù hợp với yêu cầu thực tế của dự án.

Next.js 16.3: AI Improvements

Next.js 16.3 bổ sung cải tiến AI nhằm nâng cao trải nghiệm nhà phát triển, bao gồm cập nhật tự động file AGENTS.md, ba Skills mới hỗ trợ workflow đa bước, phiên bản agent-browser 0.27 tích hợp React DevTools, lỗi có thể hành động kèm nút copy-as-prompt, MCP server tinh gọn hơn cho chẩn đoán biên dịch, và hỗ trợ docs-as-Markdown qua .md URL suffix cùng llms.txt.

Lập trình viên Next.js nên đọc bài này để khám phá cách AI tự động tối ưu hóa công cụ phát triển, từ việc cập nhật tự động tài liệu cho các bot lập trình đến các công cụ mới giúp debug và tối ưu hóa nhanh chóng trong dự án.