Frontend & giao diện
11 bài viết gắn thẻ #nextjs trên DiCodeWeb, từ nền tảng đến production, mới nhất trước.
11 bàiCập nhật 27 thg 10, 2026
Cách đọc bundle analyzer năm 2026 (next analyze, rollup-plugin-visualizer, source-map-explorer), tree shaking thật sự hoạt động thế nào với ESM, sideEffects, barrel file và CommonJS, những cái bẫy quen thuộc như moment và lodash, dependency trùng lặp, polyfill, và đặt ngân sách bundle trong CI với size-limit.
"use client" không đánh dấu loại component mà đánh dấu điểm bắt đầu của client graph. Bài này dựng lại mô hình tư duy cho RSC trong Next.js 16: thứ gì đi qua ranh giới, data fetching đặt ở đâu, waterfall, streaming và những lỗi khiến bundle phình hoặc lộ dữ liệu.
Streaming HTML hoạt động thế nào ở tầng giao thức, cách đặt Suspense boundary, tránh waterfall, selective hydration, Partial Prerendering trong Next.js 16, tác động lên TTFB, LCP và CLS, những proxy âm thầm buffer stream và cách xử lý lỗi khi status 200 đã được gửi đi.
Next.js 16 bỏ kiểu cache ngầm của App Router cũ: mọi thứ dynamic theo mặc định, bạn tự chọn chỗ cần cache bằng use cache. Bài này đi qua static shell và dynamic hole, cache key, cacheLife, cacheTag với updateTag, revalidateTag, refresh, và một trang sản phẩm e-commerce làm từ đầu đến cuối.
Cơ chế snapshot và cây pseudo-element của View Transitions, startViewTransition trong SPA, transition giữa hai document, view-transition-name, view-transition-class và types, shared element từ danh sách sang trang chi tiết, reduced motion, những bẫy hiệu năng, và cách dùng component ViewTransition của React trong Next.js 16.
React escape giúp bạn rất nhiều, nhưng không phải tất cả. Bài này đi qua những lỗ hổng XSS vẫn lọt qua React, cách dựng CSP nghiêm ngặt bằng nonce trong Next.js, Trusted Types, CSRF thời SameSite, chuyện lưu token ở đâu và cách chặn clickjacking.
Khi nào state nên nằm trong URL thay vì useState hay cache server, cách parse và validate search params bằng schema, push hay replace, debounce ô tìm kiếm, đồng bộ với App Router của Next.js 16, nuqs, và những rắc rối về nút Back và SEO.
React Compiler thực sự làm gì, các Rules of React nó dựa vào, ESLint plugin, rollout từng phần bằng annotation mode và "use no memo", xử lý useMemo/useCallback cũ, cách kiểm chứng nó chạy, các lý do bail out thường gặp, thư viện bên thứ ba và chi phí build.
Ba app Next.js, năm package dùng chung, một lockfile. Ghi chép về ranh giới, caching và những sai lầm mình sẽ tránh lần sau.
Cache-Control, ETag, tên file có hash, s-maxage và stale-while-revalidate ở CDN, service worker, staleTime trong TanStack Query — mỗi lớp cache làm gì, nên đặt header thế nào cho từng loại tài nguyên, và những lỗi khiến người dùng thấy dữ liệu cũ.
React 19 đưa form về gần với HTML hơn: prop action, trạng thái pending, cập nhật optimistic và Server Actions. Bài này đi qua cách mình dựng một form đăng ký đầy đủ — validate hai phía, trả lỗi theo field, accessible, và chạy được cả trước khi JavaScript tải xong.