Next.js היא מסגרת חזקה המאפשרת למפתחים לבנות במהירות יישומי React מעובדים בצד השרת. יש לו תכונות חיוניות שונות. אחת מתכונות המפתח שלו היא היכולת שלו להביא נתונים בקלות ולהפוך אותם לזמינים לרכיבים.
שליפת נתונים היא תכונה חיונית המאפשרת למפתחים לאחזר ולהציג נתונים באתר/אפליקציית אינטרנט. ישנן מספר דרכים שונות להביא נתונים ב-Next.js, כל אחת עם היתרונות ומקרי השימוש שלה. מאמר זה יבדוק דרכים שונות לאחזר נתונים ב-Next.js.
שימוש ב-useEffect Hook כדי להביא נתונים
ה useEffect וו הוא א הווק תגובה המשמש לביצוע תופעות לוואי, כגון קריאות API ברכיבים. אתה יכול להשתמש ב-useEffect Hook כדי להביא נתונים ב-Next.js.
הוק זה מועיל עבור דפים הזקוקים לנתונים דינמיים, כמו דפי פרופיל משתמש המציגים מידע ספציפי למשתמש המחובר.
כדי להשתמש בהוק useEffect, תחילה עליך לייבא אותו לרכיב שבחרת, להביא את הנתונים ולעבד את הדף שלך באמצעותו.
לדוגמה:
יְבוּא { useEffect, useState } מ'לְהָגִיב';יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const [data, setData] = useState("");useEffect(() => {
לְהָבִיא(' https://api.example.com/data');
.לאחר מכן( (תְגוּבָה) => response.json())
.לאחר מכן( (נתונים) => setData (נתונים) )
}, []);
לַחֲזוֹר (
{data.name}
</div>
)
}
בלוק קוד זה משתמש ב-useEffect hook כדי להביא נתונים מ-API. If מעביר שני פרמטרים ל-useEffect hook: פונקציה לאחזרת הנתונים ומערך תלות. על הצלחה, זה משתמש setData() כדי לעדכן את מצב הרכיב עם הנתונים שבקשת האחזור מחזירה.
מערך התלות שאתה מעביר ל-useEffect hook צריך להכיל את הערך שהאפקט תלוי בו. הרכיב יפעיל מחדש את האפקט רק כאשר הערך במערך התלות ישתנה. אם מערך התלות ריק - כמו בדוגמה זו - האפקט יפעל רק בעיבוד הראשון.
טיפול באימות אוטומטי באמצעות SWR
ה SWR ספריית (stale-while-revalidate) היא ספריית React hook לטיפול באחזור נתונים. אתה חייב הגדר את ספריית SWR ראשית, להשתמש בו ביישום הבא שלך.
אחת מתכונות המפתח של ספריית SWR היא היכולת שלה לבצע אוטומציה של אימות נתונים מחדש. תכונה זו חיונית כאשר הנתונים מתעדכנים לעתים קרובות ואתה צריך שהוא יהיה מעודכן באופן עקבי. פונקציונליות זו מבטיחה שלאפליקציה שלך תהיה תמיד גישה לנתונים העדכניים ביותר, מה שהופך אותה ליותר דינמית ומגיבה למשתמשים שלך.
ספריית SWR מבצעת בקשת אחזור חדשה ל-API כאשר משתמש מתמקד מחדש בדף או עובר בין כרטיסיות. כאשר משתמש עוזב דף, הנתונים המוצגים על המסך הופכים מיושנים. כשהם חוזרים לדף, ספריית SWR שולחת בקשת אחזור חדשה ל-API ומשווה את הנתונים החדשים לנתונים המעופשים כדי לקבוע אם הם השתנו.
כדי למנוע מספריית SWR לבצע פעולה זו, אתה יכול להשתמש ב- revalidateOnFocus אוֹפְּצִיָה.
ככה:
const { data, error, isLoading } = useSWR(' https://api.example.com/data', מביא, {
revalidateOnFocus: שֶׁקֶר,
})
הגדרת המאפיין revalidateOnFocus ל-false תבטיח שספריית SWR לא תאמת מחדש את הנתונים שלך בכל פעם שתתמקד מחדש בדף.
ספריית SWR גם מאמתת נתונים מחדש בכל פעם שמשתמש מתחבר מחדש לאינטרנט. פעולה זו יכולה להועיל מאוד במצבים מסוימים ופועלת באופן אוטומטי.
כדי להשבית את הפעולה, אתה יכול להשתמש ב- revalidateOnReconnect אוֹפְּצִיָה:
const { data, error, isLoading } = useSWR(' https://api.example.com/data', מביא, {
revalidateOnReconnect: שֶׁקֶר,
})
כדי להשבית את האימות האוטומטי של הנתונים שלך, הגדר את המאפיינים revalidateOnFocus ו-revalidateOnRecconect כ-false.
שימוש בספריית Isomorphic-Unfetch לביצוע בקשות אחזור
ה איזומורפי-לא מביאים library היא ספרייה קטנה וקלת משקל שיכולה לבצע בקשות אחזור ביישום Next.js. הספרייה היא אלטרנטיבה מצוינת ליליד לְהָבִיא ממשק API. זה פשוט לשימוש, מה שהופך אותו למושלם עבור מפתחים חדשים בביצוע בקשות אחזור.
אתה יכול להשתמש ב-isomorphic-unfetch כ-polyfill עבור דפדפנים ישנים שאינם תומכים בממשק ה-API המקורי לאחזור. הספרייה isomorphic-unfetch היא מינימליסטית ומתאימה לעבודה על יישומים קטנים.
כדי להשתמש ב-isomorphic-unfetch ביישום Next.js, התקן את הספרייה על ידי הפעלת הפקודה הבאה:
npm להתקין isomorphic-unfetch
לאחר מכן תוכל לייבא את הספרייה ולהשתמש בה ברכיב שלך כדי להביא נתונים, כך:
יְבוּא לְהָבִיא מ'איזמורפי-לא מביאים'
יְבוּא {useState, useEffect} מ'לְהָגִיב'יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const [data, setData] = useState(ריק)useEffect(() => {
לְהָבִיא(' https://api.example.com/data')
.לאחר מכן( (תְגוּבָה) => response.json)
.לאחר מכן( (נתונים) => setData (נתונים) )
}, [])
אם (!נתונים) לַחֲזוֹר<div>טוען...div>
לַחֲזוֹר ({data.name}</h1>
</div>
)
}
הפונקציה isomorphic-unfetch פועלת הן בצד הלקוח והן בצד השרת.
אחזור נתונים יעיל עם Next.js
שליפת נתונים היא תכונה חשובה בעת פיתוח יישומים. Next.js מספק מספר דרכים לאחזר נתונים, שלכל אחת מהן היתרונות והפשרות שלה.
כאשר מחליטים על השיטה להשתמש, שקול את הפשרות והבטח שאתה משתמש בטכניקה שאתה מרגיש איתה בנוח.
