Điều Phối React Suspense: Làm Chủ Các Chiến Lược Tìm Nạp Dữ Liệu Song Song

React Suspense đã cách mạng hóa cách chúng ta xử lý các hoạt động không đồng bộ, đặc biệt là tìm nạp dữ liệu. Nó cho phép các thành phần "tạm dừng" hiển thị trong khi chờ dữ liệu tải, cung cấp một cách khai báo để quản lý các trạng thái tải. Tuy nhiên, việc chỉ đơn giản là bọc các lần tìm nạp dữ liệu riêng lẻ bằng Suspense có thể dẫn đến hiệu ứng thác nước, trong đó một lần tìm nạp hoàn tất trước khi lần tiếp theo bắt đầu, ảnh hưởng tiêu cực đến hiệu suất. Bài đăng trên blog này đi sâu vào các chiến lược nâng cao để điều phối nhiều lần tìm nạp dữ liệu song song bằng Suspense, tối ưu hóa khả năng phản hồi của ứng dụng và nâng cao trải nghiệm người dùng cho khán giả toàn cầu.

Hiểu Vấn Đề Thác Nước trong Tìm Nạp Dữ Liệu

Hãy tưởng tượng một tình huống bạn cần hiển thị hồ sơ người dùng với tên, ảnh đại diện và hoạt động gần đây của họ. Nếu bạn tìm nạp từng phần dữ liệu tuần tự, người dùng sẽ thấy một vòng quay tải cho tên, sau đó là một vòng quay khác cho ảnh đại diện và cuối cùng là một vòng quay cho nguồn cấp dữ liệu hoạt động. Mô hình tải tuần tự này tạo ra hiệu ứng thác nước, trì hoãn quá trình hiển thị hồ sơ hoàn chỉnh và gây khó chịu cho người dùng. Đối với người dùng quốc tế có tốc độ mạng khác nhau, độ trễ này có thể còn rõ rệt hơn.

Xem xét đoạn mã đơn giản hóa này:

function UserProfile() {
  const name = useName(); // Tìm nạp tên người dùng
  const avatar = useAvatar(name); // Tìm nạp ảnh đại diện dựa trên tên
  const activity = useActivity(name); // Tìm nạp hoạt động dựa trên tên

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

Trong ví dụ này, useAvatar và useActivity phụ thuộc vào kết quả của useName. Điều này tạo ra một thác nước rõ ràng – useAvatar và useActivity không thể bắt đầu tìm nạp dữ liệu cho đến khi useName hoàn tất. Điều này không hiệu quả và là một nút thắt cổ chai hiệu suất phổ biến.

Các Chiến Lược Tìm Nạp Dữ Liệu Song Song với Suspense

Chìa khóa để tối ưu hóa việc tìm nạp dữ liệu với Suspense là khởi tạo tất cả các yêu cầu dữ liệu đồng thời. Dưới đây là một số chiến lược bạn có thể sử dụng:

1. Tải Trước Dữ Liệu bằng `React.preload` và Tài Nguyên

Một trong những kỹ thuật mạnh mẽ nhất là tải trước dữ liệu trước khi thành phần hiển thị. Điều này bao gồm việc tạo một "tài nguyên" (một đối tượng đóng gói promise tìm nạp dữ liệu) và tìm nạp trước dữ liệu. `React.preload` giúp ích cho việc này. Đến thời điểm thành phần cần dữ liệu, nó đã có sẵn, loại bỏ gần như hoàn toàn trạng thái tải.

Xem xét một tài nguyên để tìm nạp một sản phẩm:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// Cách sử dụng:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

Bây giờ, bạn có thể tải trước tài nguyên này trước khi thành phần ProductDetails được hiển thị. Ví dụ: trong quá trình chuyển đổi tuyến đường hoặc khi di chuột qua.

React.preload(productResource);

Điều này đảm bảo rằng dữ liệu có khả năng có sẵn vào thời điểm thành phần ProductDetails cần đến, giảm thiểu hoặc loại bỏ trạng thái tải.

2. Sử Dụng `Promise.all` để Tìm Nạp Dữ Liệu Đồng Thời

Một cách tiếp cận đơn giản và hiệu quả khác là sử dụng Promise.all để khởi tạo tất cả các lần tìm nạp dữ liệu đồng thời trong một ranh giới Suspense duy nhất. Điều này hoạt động tốt khi các phụ thuộc dữ liệu được biết trước.

Hãy xem lại ví dụ về hồ sơ người dùng. Thay vì tìm nạp dữ liệu tuần tự, chúng ta có thể tìm nạp tên, ảnh đại diện và nguồn cấp dữ liệu hoạt động đồng thời:

import { useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Tuy nhiên, nếu mỗi `Avatar` và `Activity` cũng dựa vào `fetchName`, nhưng được hiển thị bên trong các ranh giới suspense riêng biệt, bạn có thể nâng promise `fetchName` lên thành phần cha và cung cấp nó thông qua React Context.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Sử Dụng Hook Tùy Chỉnh để Quản Lý Các Lần Tìm Nạp Song Song

Đối với các tình huống phức tạp hơn với các phụ thuộc dữ liệu có khả năng có điều kiện, bạn có thể tạo một hook tùy chỉnh để quản lý việc tìm nạp dữ liệu song song và trả về một tài nguyên mà Suspense có thể sử dụng.

import { useState, useEffect, useRef } from 'react';

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('Resource not yet initialized');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// Ví dụ sử dụng:
async function fetchUserData(userId) {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Mô phỏng lệnh gọi API
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>Loading user data...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Cách tiếp cận này đóng gói sự phức tạp của việc quản lý các promise và trạng thái tải trong hook, giúp mã thành phần sạch hơn và tập trung hơn vào việc hiển thị dữ liệu.

4. Hydrat Hóa Chọn Lọc với Kết Xuất Máy Chủ Phát Trực Tuyến

Đối với các ứng dụng được kết xuất phía máy chủ, React 18 giới thiệu quá trình hydrat hóa chọn lọc với kết xuất máy chủ phát trực tuyến. Điều này cho phép bạn gửi HTML đến máy khách theo từng phần khi nó có sẵn trên máy chủ. Bạn có thể bọc các thành phần tải chậm bằng các ranh giới <Suspense>, cho phép phần còn lại của trang trở nên tương tác trong khi các thành phần chậm vẫn đang tải trên máy chủ. Điều này cải thiện đáng kể hiệu suất cảm nhận, đặc biệt đối với người dùng có kết nối mạng hoặc thiết bị chậm.

Hãy xem xét một tình huống trong đó một trang web tin tức cần hiển thị các bài báo từ các khu vực khác nhau trên thế giới (ví dụ: Châu Á, Châu Âu, Châu Mỹ). Một số nguồn dữ liệu có thể chậm hơn những nguồn khác. Quá trình hydrat hóa chọn lọc cho phép hiển thị các bài báo từ các khu vực nhanh hơn trước, trong khi các bài báo từ các khu vực chậm hơn vẫn đang tải, ngăn không cho toàn bộ trang bị chặn.

Xử Lý Lỗi và Trạng Thái Tải

Mặc dù Suspense đơn giản hóa việc quản lý trạng thái tải, nhưng việc xử lý lỗi vẫn rất quan trọng. Các ranh giới lỗi (sử dụng phương thức vòng đời componentDidCatch hoặc hook useErrorBoundary từ các thư viện như `react-error-boundary`) cho phép bạn xử lý một cách duyên dáng các lỗi xảy ra trong quá trình tìm nạp hoặc hiển thị dữ liệu. Các ranh giới lỗi này nên được đặt một cách chiến lược để bắt các lỗi trong các ranh giới Suspense cụ thể, ngăn không cho toàn bộ ứng dụng bị sập.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... tìm nạp dữ liệu có thể bị lỗi
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Hãy nhớ cung cấp giao diện người dùng dự phòng mang tính thông tin và thân thiện với người dùng cho cả trạng thái tải và lỗi. Điều này đặc biệt quan trọng đối với người dùng quốc tế có thể gặp phải tốc độ mạng chậm hơn hoặc sự cố dịch vụ khu vực.

Các Phương Pháp Hay Nhất để Tối Ưu Hóa Việc Tìm Nạp Dữ Liệu với Suspense

• Xác Định và Ưu Tiên Dữ Liệu Quan Trọng: Xác định dữ liệu nào là cần thiết cho quá trình hiển thị ban đầu của ứng dụng và ưu tiên tìm nạp dữ liệu đó trước.
• Tải Trước Dữ Liệu Khi Có Thể: Sử dụng `React.preload` và tài nguyên để tải trước dữ liệu trước khi các thành phần cần đến, giảm thiểu trạng thái tải.
• Tìm Nạp Dữ Liệu Đồng Thời: Sử dụng `Promise.all` hoặc hook tùy chỉnh để khởi tạo nhiều lần tìm nạp dữ liệu song song.
• Tối Ưu Hóa Các Điểm Cuối API: Đảm bảo các điểm cuối API của bạn được tối ưu hóa cho hiệu suất, giảm thiểu độ trễ và kích thước tải trọng. Cân nhắc sử dụng các kỹ thuật như GraphQL để chỉ tìm nạp dữ liệu bạn cần.
• Triển Khai Bộ Nhớ Đệm: Lưu vào bộ nhớ đệm dữ liệu được truy cập thường xuyên để giảm số lượng yêu cầu API. Cân nhắc sử dụng các thư viện như `swr` hoặc `react-query` để có khả năng lưu vào bộ nhớ đệm mạnh mẽ.
• Sử Dụng Phân Chia Mã: Chia ứng dụng của bạn thành các phần nhỏ hơn để giảm thời gian tải ban đầu. Kết hợp phân chia mã với Suspense để tải và hiển thị dần dần các phần khác nhau của ứng dụng.
• Giám Sát Hiệu Suất: Thường xuyên theo dõi hiệu suất của ứng dụng bằng các công cụ như Lighthouse hoặc WebPageTest để xác định và giải quyết các nút thắt cổ chai về hiệu suất.
• Xử Lý Lỗi Một Cách Duyên Dáng: Triển khai các ranh giới lỗi để bắt các lỗi trong quá trình tìm nạp và hiển thị dữ liệu, cung cấp thông báo lỗi mang tính thông tin cho người dùng.
• Cân Nhắc Kết Xuất Phía Máy Chủ (SSR): Vì lý do SEO và hiệu suất, hãy cân nhắc sử dụng SSR với phát trực tuyến và hydrat hóa chọn lọc để mang lại trải nghiệm ban đầu nhanh hơn.

Kết Luận

React Suspense, khi kết hợp với các chiến lược tìm nạp dữ liệu song song, cung cấp một bộ công cụ mạnh mẽ để xây dựng các ứng dụng web phản hồi nhanh và hiệu quả. Bằng cách hiểu vấn đề thác nước và triển khai các kỹ thuật như tải trước, tìm nạp đồng thời với Promise.all và hook tùy chỉnh, bạn có thể cải thiện đáng kể trải nghiệm người dùng. Hãy nhớ xử lý các lỗi một cách duyên dáng và theo dõi hiệu suất để đảm bảo ứng dụng của bạn luôn được tối ưu hóa cho người dùng trên toàn thế giới. Khi React tiếp tục phát triển, việc khám phá các tính năng mới như hydrat hóa chọn lọc với kết xuất máy chủ phát trực tuyến sẽ tiếp tục nâng cao khả năng của bạn trong việc cung cấp trải nghiệm người dùng đặc biệt, bất kể vị trí hoặc điều kiện mạng. Bằng cách áp dụng các kỹ thuật này, bạn có thể tạo ra các ứng dụng không chỉ hoạt động mà còn mang lại niềm vui khi sử dụng cho khán giả toàn cầu của bạn.

Bài đăng trên blog này nhằm mục đích cung cấp một cái nhìn tổng quan toàn diện về các chiến lược tìm nạp dữ liệu song song với React Suspense. Chúng tôi hy vọng bạn thấy nó mang tính thông tin và hữu ích. Chúng tôi khuyến khích bạn thử nghiệm các kỹ thuật này trong các dự án của riêng bạn và chia sẻ những phát hiện của bạn với cộng đồng.