מה זה SWR וכיצד אתה משתמש בו ב-Next.js?

מה זה SWR וכיצד אתה משתמש בו ב-Next.js?
קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

SWR (state-while-revalidate) היא שיטת אחזור נתונים שנבנתה על ידי Vercel. זה עובד על ידי שליפת נתונים תחילה, שליחת בקשת אחזור כדי לאמת אותם מחדש, ואז החזרת הנתונים המעודכנים.





SWR הוא חזק מאוד מכיוון שהוא לא רק מאפשר אחזור נתונים לשימוש חוזר אלא גם כולל מטמון מובנה, עימוד ואימות מחדש בפוקוס. באמצעות SWR, אתר אינטרנט מציג תוכן שמור בזמן שהוא מביא תוכן עדכני ברקע.



למה האייפון שלי לא מתחבר לאייטונס

איך SWR עובד?

בדרך כלל, היית עושה זאת אחזר נתונים באמצעות Axios או שיטת האחזור . שיטות אלו מתחברים למשאב הנתונים, מאחזרים ומחזירים את הנתונים ואז סוגרים את החיבור. עם זאת, SWR מביא נתונים בצורה שונה. זה עובד בשלושה שלבים:





  1. מחזיר נתונים מיושנים מהמטמון.
  2. שולח את בקשת האחזור לאימות נתונים מחדש.
  3. מחזיר נתונים עדכניים.

SWR אינו תחליף ל-API לאחזור. במקום זאת, הוא מאפשר לך להציג תוכן שמור באתר שלך ברגע שהמשתמש מבקר ולעדכן את התוכן הזה כאשר הוא הופך מיושן.

אז איך SWR יודע מתי המטמון לא חוקי? דרך תגובת כותרת של בקרת מטמון. לתגובה יש שני מצבים: טרי ומעופש. מצב טרי פירושו שניתן לעשות שימוש חוזר במטמון בעוד שמצב מעופש אומר שהוא לא חוקי. אתה מציין את הזמן שבו התגובה תישאר בתוקף בהנחיית הגיל המקסימלי.



SWR מחשיב כל תגובה בקובץ שמור מעל גיל המקסימום לא חוקית. לאחר שהאפליקציה שלך תציג את הנתונים המטופחים במטמון, SWR תאמת אותם מחדש ותחזיר נתונים טריים שבהם תוכל להשתמש כדי לעדכן את הדף.

כיצד להביא נתונים ב-Next.js עם SWR

התחל להשתמש ב-SWR ב-React על ידי התקנתו תחילה דרך מנהל חבילות. פקודה זו משתמשת ב-npm.



 npm install swr\n

בקובץ רכיב, ייבא את ה-useSWR hook מ-swr.

 import useSWR from "swr"\n

ה-useSWR Hook מקבל שני טיעונים:



  1. מזהה ייחודי לנתונים. בדרך כלל כתובת ה-API.
  2. פונקציית שליפה. זוהי הפונקציה המשמשת לאחזור נתונים. זה יכול להשתמש באחזור, ב-Axios או בכלים אחרים לאחזור נתונים.

ה-hook מחזיר את הנתונים ואובייקט שגיאה. תהיה בטוח ש השתמש בוו זה בהתאם לשיטות העבודה המומלצות .

הנה דוגמה שמראה כיצד להשתמש ב-UseSWR Hook.

 const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

אתה יכול לרנדר את הנתונים ברכיב כזה:

 import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

זהו יישום פשוט של SWR. ה מסמכי SWR למד יותר לעומק אז בדוק אותם כדי ללמוד עוד.

איך אתה רואה הודעות שנמחקו בפייסבוק

למה להשתמש ב-SWR?

ל-SWR יתרונות רבים על פני שיטות אחזור נתונים אחרות.

שמירה במטמון

בשיטות מסורתיות לאחזור נתונים, עליך להשתמש בספינר או בהודעת טעינה כדי לשפר את חווית המשתמש כאשר האפליקציה שואבת נתונים.

כיצד לשנות את ספריית שורת הפקודה

SWR מאפשר לך להציג נתונים מיושנים למשתמש, בזמן שאתה מאמת אותם מחדש. המשמעות היא שהמשתמש לא צריך לחכות שהמשחזר יחזיר נתונים.

אימות מחדש

באמצעות אימות מחדש, SWR הופך את הנתונים השמורים לרעננים שוב והדף מעובד מחדש עם נתונים עדכניים. אימות מחדש חשוב במיוחד עבור אתרים שהתוכן שלהם משתנה באופן קבוע.

דִפּוּף

ה השתמש SWRInfinite וו מ-SWR מאפשר לך ליישם עימוד בקלות או אפילו ליצור ממשק משתמש טעינה אינסופי.

שחזור מיקום גלילה

SWR מאפשר למשתמש לחזור למיקום הגלילה בדף כאשר הוא חוזר אליו. זה תורם לחוויית משתמש טובה יותר.

אחזור נתונים תלוי

אתה יכול להביא נתונים התלויים בנתונים אחרים. זה מאפשר לך להשתמש בנתונים המוחזרים מבקשה אחת בבקשה אחרת.

השתמש ב-SWR כדי לשפר את השימושיות

SWR הוא כלי לאיפת נתונים עם תכונת אימות אוטומטי המסייעת ליישומים לעבד תוכן שמור בזמן המתנה לתוכן מעודכן. משתמשים יכולים לעסוק בתוכן מיד במקום לחכות בשרת כדי להחזיר נתונים.

SWR גם עוזר לך ליצור עימוד, טעינה אינסופית, שחזור מיקום גלילה ותכונות מורכבות אחרות. אם אתה מביא נתונים הזקוקים לעדכונים שוטפים, אתה בהחלט צריך לשקול להשתמש בהם.