نحوه مدیریت واکشی داده در Next.js

با فرآیندهای داخلی و کتابخانه های شخص ثالث، Next.js راه های زیادی برای مدیریت واکشی کارآمد داده ها دارد.

Next.js یک چارچوب قوی است که به توسعه دهندگان اجازه می دهد تا به سرعت برنامه های React رندر شده در سمت سرور بسازند. دارای ویژگی های ضروری مختلف است. یکی از ویژگی های کلیدی آن توانایی آن در واکشی آسان داده ها و در دسترس قرار دادن آن ها به آسانی برای اجزا است.

واکشی داده ها یک ویژگی ضروری است که به توسعه دهندگان اجازه می دهد داده ها را در یک وب سایت/برنامه وب نمایش دهند. چند راه مختلف برای واکشی داده در Next.js وجود دارد که هر کدام مزایا و موارد استفاده خود را دارند. این مقاله راه‌های مختلف واکشی داده در Next.js را بررسی می‌کند.

استفاده از قلاب useEffect برای واکشی داده ها

قلاب useEffect یک قلاب React است که برای انجام عوارض جانبی مانند فراخوانی API در کامپوننت ها استفاده می شود. می توانید از قلاب useEffect برای واکشی داده ها در Next.js استفاده کنید.

این قلاب برای صفحاتی که به داده‌های پویا نیاز دارند مفید است، مانند صفحات نمایه کاربر که اطلاعات ویژه‌ای را برای کاربر وارد شده نشان می‌دهد.

برای استفاده از قلاب useEffect، ابتدا آن را به جزء انتخابی خود وارد می‌کنید، داده‌ها را واکشی می‌کنید و صفحه خود را با استفاده از آن رندر می‌کنید.

مثلا:

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>
    )
}

این بلوک کد از قلاب useEffect برای واکشی داده ها از یک API استفاده می کند. If دو پارامتر را به قلاب useEffect ارسال می کند: یک تابع برای واکشی داده ها و یک آرایه وابستگی. در صورت موفقیت، از setData() برای به‌روزرسانی وضعیت مؤلفه با داده‌هایی که درخواست واکشی برمی‌گرداند استفاده می‌کند.

آرایه وابستگی که به قلاب useEffect ارسال می کنید باید حاوی مقداری باشد که افکت به آن بستگی دارد. مؤلفه فقط زمانی اثر را دوباره اجرا می کند که مقدار آرایه وابستگی تغییر کند. اگر آرایه وابستگی خالی باشد – مانند این مثال – افکت فقط در اولین رندر اجرا می شود.

مدیریت اعتبار مجدد خودکار با استفاده از SWR

کتابخانه SWR (کهنه-در حالی که- اعتبار مجدد) یک کتابخانه React hook برای مدیریت واکشی داده است. برای استفاده از آن در برنامه بعدی، ابتدا باید کتابخانه SWR را راه اندازی کنید.

یکی از ویژگی های کلیدی کتابخانه SWR توانایی آن در خودکارسازی مجدد اعتبار داده ها است. این ویژگی زمانی ضروری است که داده ها به طور مکرر به روز می شوند و شما نیاز دارید که به طور مداوم به روز باشد. این عملکرد تضمین می کند که برنامه شما همیشه به جدیدترین داده ها دسترسی داشته باشد و آن را پویاتر و پاسخگوتر به کاربران شما می کند.

کتابخانه SWR زمانی که کاربر دوباره روی یک صفحه تمرکز می کند یا بین برگه ها جابجا می شود، یک درخواست واکشی جدید به یک API می دهد. هنگامی که کاربر صفحه ای را ترک می کند، داده های نمایش داده شده روی صفحه کهنه می شوند. هنگامی که آنها به صفحه باز می گردند، کتابخانه SWR یک درخواست واکشی جدید به API ارسال می کند و داده های جدید را با داده های قدیمی مقایسه می کند تا تعیین کند که آیا تغییر کرده است یا خیر.

برای جلوگیری از انجام این عمل توسط کتابخانه SWR، می توانید از گزینه revalidateOnFocus استفاده کنید.

اینطوری:

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

تنظیم ویژگی revalidateOnFocus روی false تضمین می کند که کتابخانه SWR هر بار که دوباره روی صفحه تمرکز می کنید، داده های شما را مجدداً تأیید نمی کند.

کتابخانه SWR همچنین هر زمان که کاربر دوباره به اینترنت متصل شود، داده ها را مجدداً تأیید می کند. این عمل می تواند در شرایط خاص بسیار مفید باشد و به طور خودکار عمل می کند.

برای غیرفعال کردن عملکرد، می توانید از گزینه revalidateOnReconnect استفاده کنید:

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

برای غیرفعال کردن تأیید مجدد خودکار داده‌های خود، هر دو ویژگی revalidateOnFocus و revalidateOnRecconect را روی false تنظیم کنید.

استفاده از کتابخانه Isomorphic-Unfetch برای انجام درخواست‌های واکشی

کتابخانه isomorphic-unfetch یک کتابخانه کوچک و سبک است که می تواند درخواست های واکشی را در برنامه Next.js انجام دهد. این کتابخانه یک جایگزین عالی برای API واکشی بومی است. استفاده از آن ساده است، که آن را برای توسعه دهندگانی که تازه درخواست های واکشی می کنند عالی می کند.

می‌توانید از isomorphic-unfetch به‌عنوان پلی‌پر برای مرورگرهای قدیمی‌تر که از API واکشی بومی پشتیبانی نمی‌کنند استفاده کنید. کتابخانه isomorphic-unfetch مینیمالیستی است و برای کار بر روی برنامه های کوچک مناسب است.

برای استفاده از isomorphic-unfetch در برنامه Next.js، کتابخانه را با اجرای دستور زیر نصب کنید:

npm install isomorphic-unfetch

سپس می‌توانید کتابخانه را وارد کنید و از آن در مؤلفه خود برای واکشی داده‌ها استفاده کنید، مانند این:

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>
    )
}

تابع isomorphic-unfetch هم در سمت کلاینت و هم در سمت سرور کار می کند.

واکشی کارآمد داده با Next.js

واکشی داده ها یک ویژگی مهم در هنگام توسعه برنامه ها است. Next.js چندین راه برای واکشی داده ها ارائه می دهد که هر کدام مزایا و معاوضه های خود را دارند.

هنگام تصمیم گیری در مورد روش استفاده، معاوضه ها را در نظر بگیرید و مطمئن شوید که از تکنیکی استفاده می کنید که با آن راحت هستید.

منبع مقاله