Lazy-Loading trong Next.js: Lười mà Hiệu Quả!

Bạn đã bao giờ nghe đến “lười biếng” mà vẫn được khen chưa? Trong Next.js, lazy-loading chính là kiểu “lười” đỉnh cao giúp ứng dụng của bạn nhanh hơn, nhẹ hơn, mà không cần phải “đổ mồ hôi”.

Lazy-Loading là gì?

Nói đơn giản, lazy-loading là kỹ thuật “trì hoãn” việc tải một thứ gì đó (component, hình ảnh, hay dữ liệu) cho đến khi nó thực sự cần thiết. Thay vì tải hết mọi thứ ngay từ đầu như kiểu “ôm đồm”, Next.js cho phép bạn “lười” một cách thông minh. Kết quả? Trang web load nhanh hơn, người dùng đỡ phải chờ, còn bạn thì được khen là “pro”.

Lazy-Loading trong Next.js: Làm sao?

Next.js hỗ trợ lazy-loading cực dễ qua hai công cụ chính: dynamic() và tính năng tự động tối ưu của nó. Đặc biệt trong App Router (từ Next.js 13 trở lên), mọi thứ còn đơn giản hơn nữa.

1. Dynamic Import với next/dynamic
   • Khi nào dùng? Khi bạn muốn tải một component chỉ khi người dùng cần đến nó (ví dụ: modal, tab ít dùng).Cách làm? Dùng next/dynamic để “delay” việc import.
   Ví dụ: Giả sử mình có một component FancyChart để hiển thị biểu đồ doanh thu. Nó nặng, dùng thư viện bên thứ ba (như Chart.js), và chỉ xuất hiện khi người dùng click vào tab “Thống kê”. Nếu tải ngay từ đầu, trang sẽ chậm. Đây là cách xử lý:

import dynamic from 'next/dynamic';
// Component FancyChart sẽ chỉ tải khi được gọi
const FancyChart = dynamic(() => import('../components/FancyChart'), {
  ssr: false, // Tắt Server-Side Rendering nếu không cần
  loading: () => < p >Đang tải biểu đồ, chờ tí nha...</ p >, // Placeholder hài hước
});

export default function StatsPage() {
  return (
    < div >
      < h1 >Trang Thống Kê</ h1 >
      < FancyChart />
    </ div >
  );
}

Kết quả: Trang load nhanh như Usain Bolt, còn biểu đồ chỉ xuất hiện khi cần. Người dùng click vào tab “Thống kê” mới thấy dòng “Đang tải biểu đồ, chờ tí nha…” rồi bấm, biểu đồ hiện ra.

Lazy-Loading Hình Ảnh với <Image>

• Next.js có component <Image> tích hợp sẵn lazy-loading. Bạn không cần làm gì nhiều, cứ xài là nó tự “lười” cho bạn.
• Cách dùng? Chỉ cần import và thêm thuộc tính.

Ví dụ : Trong dự án blog, mình có một trang danh sách bài viết với hàng tá ảnh. Nếu tải hết ngay từ đầu, trang sẽ lag kinh khủng.

import Image from 'next/image';
export default function BlogPost({ post }) {
  return (
      {post.title}
  );
}</code>