Cách xử lý Tìm nạp dữ liệu trong Next.js

Next.js là một khung mạnh mẽ cho phép các nhà phát triển nhanh chóng xây dựng các ứng dụng React được kết xuất phía máy chủ. Nó có nhiều tính năng cần thiết. Một trong những tính năng chính của nó là khả năng dễ dàng tìm nạp dữ liệu và cung cấp dữ liệu sẵn sàng cho các thành phần.

Tìm nạp dữ liệu là một tính năng thiết yếu cho phép các nhà phát triển truy xuất và hiển thị dữ liệu trên một trang web/ứng dụng web. Có một vài cách khác nhau để tìm nạp dữ liệu trong Next.js, mỗi cách đều có ưu điểm và trường hợp sử dụng riêng. Bài viết này sẽ khám phá các cách khác nhau để tìm nạp dữ liệu trong Next.js.

Sử dụng useEffect Hook để lấy dữ liệu

Các sử dụnghiệu ứng hook là một hook React được sử dụng để thực hiện các tác dụng phụ, chẳng hạn như lệnh gọi API trong các thành phần. Bạn có thể sử dụng hook useEffect để tìm nạp dữ liệu trong Next.js.

Móc này hữu ích cho các trang cần dữ liệu động, chẳng hạn như trang hồ sơ người dùng hiển thị thông tin cụ thể cho người dùng đã đăng nhập.

Để sử dụng hook useEffect, trước tiên bạn nhập nó vào thành phần bạn chọn, tìm nạp dữ liệu và hiển thị trang của bạn bằng nó.

Ví dụ:

 import { useEffect, useState } from 'react';
export default function Home() {
    const [data, setData] = useState("");
    useEffect(() => {
        fetch('https://api.example.com/data');
            .then( (response) => response.json() )
            .then( (data) => setData(data) )
    }, []); 
    return (
        <div>
            {data.name}
        </div>
    )
}
 

Khối mã này sử dụng hook useEffect để tìm nạp dữ liệu từ API. Nếu chuyển hai tham số cho hook useEffect: một hàm để tìm nạp dữ liệu và một mảng phụ thuộc. Khi thành công, nó sử dụng setData() để cập nhật trạng thái của thành phần với dữ liệu mà yêu cầu tìm nạp trả về.

Mảng phụ thuộc mà bạn chuyển đến hook useEffect phải chứa giá trị mà hiệu ứng phụ thuộc vào. Thành phần sẽ chỉ chạy lại hiệu ứng khi giá trị trong mảng phụ thuộc thay đổi. Nếu mảng phụ thuộc trống—như trong ví dụ này—hiệu ứng sẽ chỉ chạy trong lần hiển thị đầu tiên.

Xử lý xác thực lại tự động bằng SWR

Các SWR Thư viện (stale-while-revalidate) là thư viện hook React để xử lý tìm nạp dữ liệu. Trước tiên, bạn phải thiết lập thư viện SWR để sử dụng nó trong ứng dụng Tiếp theo của mình.

Một trong những tính năng chính của thư viện SWR là khả năng tự động xác nhận lại dữ liệu. Tính năng này rất cần thiết khi dữ liệu cập nhật thường xuyên và bạn cần nó được cập nhật liên tục. Chức năng này đảm bảo rằng ứng dụng của bạn luôn có quyền truy cập vào dữ liệu mới nhất, làm cho ứng dụng trở nên năng động và phản ứng nhanh hơn với người dùng của bạn.

Thư viện SWR thực hiện yêu cầu tìm nạp mới tới API khi người dùng tập trung lại vào một trang hoặc chuyển đổi giữa các tab. Khi người dùng rời khỏi trang, dữ liệu hiển thị trên màn hình sẽ trở nên cũ. Khi họ quay lại trang, thư viện SWR sẽ gửi yêu cầu tìm nạp mới tới API và so sánh dữ liệu mới với dữ liệu cũ để xác định xem nó có thay đổi hay không.

Để ngăn thư viện SWR thực hiện hành động này, bạn có thể sử dụng xác thực lạiOnFocus lựa chọn.

Như vậy:

 const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
    revalidateOnFocus: false,
})
 

Đặt thuộc tính revalidateOnFocus thành false sẽ đảm bảo rằng thư viện SWR không xác thực lại dữ liệu của bạn mỗi khi bạn tập trung lại vào trang.

Thư viện SWR cũng xác thực lại dữ liệu bất cứ khi nào người dùng kết nối lại với internet. Hành động này có thể rất hữu ích trong một số tình huống nhất định và hoạt động tự động.

Để vô hiệu hóa hành động, bạn có thể sử dụng xác thực lạiOnReconnect lựa chọn:

 const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
    revalidateOnReconnect: false,
})
 

Để tắt tự động xác thực lại dữ liệu của bạn, hãy đặt cả hai thuộc tính xác thực lạiOnFocus và xác thực lạiOnRecconect thành false.

Sử dụng thư viện Isomorphic-Unfetch để thực hiện các yêu cầu tìm nạp

Các isomorphic-unfetch thư viện là một thư viện nhỏ, nhẹ có thể thực hiện các yêu cầu tìm nạp trong ứng dụng Next.js. Thư viện là một sự thay thế tuyệt vời cho bản địa tìm về API. Nó rất đơn giản để sử dụng, điều này làm cho nó trở nên hoàn hảo cho các nhà phát triển mới thực hiện các yêu cầu tìm nạp.

Bạn có thể sử dụng isomorphic-unfetch làm polyfill cho các trình duyệt cũ hơn không hỗ trợ API tìm nạp gốc. Thư viện isomorphic-unfetch tối giản và phù hợp để làm việc trên các ứng dụng nhỏ.

Để sử dụng isomorphic-unfetch trong ứng dụng Next.js, hãy cài đặt thư viện bằng cách chạy lệnh sau:

 npm install isomorphic-unfetch
 

Sau đó, bạn có thể nhập thư viện và sử dụng nó trong thành phần của mình để tìm nạp dữ liệu, như sau:

 import Fetch from 'isomorphic-unfetch'
import {useState, useEffect} from 'react'
export default function Home() {
    const [data, setData] = useState(null)
    useEffect(() => {
        Fetch('https://api.example.com/data')
            .then( (response) => response.json)
            .then( (data) => setData(data) )
    }, [])
 
    if (!data) return <div>Loading...</div>
    return (
        <div>
            <h1>{data.name}</h1>
        </div>
    )
}
 

Hàm isomorphic-unfetch hoạt động ở cả phía máy khách và phía máy chủ.

Tìm nạp dữ liệu hiệu quả với Next.js

Tìm nạp dữ liệu là một tính năng quan trọng khi phát triển ứng dụng. Next.js cung cấp một số cách để tìm nạp dữ liệu, mỗi cách đều có ưu điểm và sự đánh đổi của nó.

Khi quyết định sử dụng phương pháp nào, hãy xem xét sự đánh đổi và đảm bảo rằng bạn sử dụng một kỹ thuật mà bạn cảm thấy thoải mái.