Cải Thiện Hiệu Suất Lazy Load Trong React Router v7.5+

Ngày 17 tháng 4 năm 2025 – Với sự ra mắt của React Router v7.5, một cách tiếp cận mới và hiệu quả hơn đã được giới thiệu để tải lazy route trong Data Mode. API này không chỉ hỗ trợ cho middleware API sắp tới mà còn mang lại những tối ưu hóa hiệu suất đáng kể.

Bối Cảnh và Những Hạn Chế Trước Đây

Từ React Router v6.4, chức năng route.lazy() đã được tích hợp để hỗ trợ lazy load các route. Ví dụ:

const routes = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "projects",
        lazy: () => import("./projects"), // Tải lazy
        children: [
          {
            path: ":projectId",
            lazy: () => import("./project"), // Tải lazy
          },
        ],
      },
    ],
  },
];

Mỗi hàm route.lazy() trả về kết quả của một import động, yêu cầu các module được import phải cung cấp các thuộc tính route dưới dạng export.

Tuy nhiên, với sự xuất hiện của middleware API, cách tiếp cận này bộc lộ hạn chế nghiêm trọng. Middleware không chỉ ảnh hưởng đến route mà nó được định nghĩa mà còn ảnh hưởng đến tất cả các route con của nó. Điều này yêu cầu chúng ta phải biết liệu có bất kỳ route nào chứa middleware trước khi gọi các loader hoặc action.

API Lazy Load Mới và Lợi Ích

Để giải quyết vấn đề này, React Router v7.5 đã giới thiệu API route.lazy mới, cho phép tải từng thuộc tính route một cách độc lập thay vì tải toàn bộ cùng một lúc.

const route = {
  lazy: {
    loader: async () => {
      return (await import("./projects")).loader;
    },
    Component: async () => {
      return (await import("./projects")).Component;
    },
  },
};

API mới này mang lại hai lợi ích chính:

• Xác định sớm liệu có route nào chứa middleware được tải lazy hay không.
• Chỉ tải lượng code tối thiểu cần thiết cho mỗi bước điều hướng, giúp tối ưu hóa hiệu suất.

Tối Ưu Hóa Thêm

API mới không chỉ hỗ trợ middleware mà còn mang lại các cải tiến hiệu suất khác. Khi thực thi loader hoặc action, chúng ta chỉ cần đợi route.lazy.loader() hoặc route.lazy.action() được giải quyết thay vì chờ tất cả các thuộc tính được tải lazy.

Ngoài ra, route.lazy.HydrateFallback() hoặc hydrateFallbackElement() sẽ được bỏ qua khi điều hướng phía client, giúp giảm thiểu việc tải các file không cần thiết.

Hãy Thử Nó!

Nếu bạn đang sử dụng Framework Mode trên React Router v7.5+, ứng dụng của bạn đã tự động sử dụng API lazy loading mới. Đối với Data Mode, bạn nên cân nhắc cập nhật lên API mới và chia nhỏ code của loader/action và Component/HydrateFallback thành các file riêng biệt để đạt hiệu suất tốt nhất.

Chúng tôi rất mong đợi những gì bạn sẽ xây dựng với API mới này ❤️