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

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

פונקציות Edge הן אחת התכונות המרגשות ביותר של Next.js. למד על פונקציות Edge וחמש דרכים להשתמש בהן ב-Next.js.

מהן פונקציות Edge?

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

פונקציות Edge יכולות לשנות את הבקשה או התגובה, להביא נתונים, לאמת ועוד.

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

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

הנה כמה דרכים בהן תוכל להשתמש בפונקציות Edge ב-Next.js.

instagram viewer

1. ניתוב דינמי

דרך אחת שבה אתה יכול להשתמש בפונקציות Edge ב-Next.js היא באמצעות ניתוב דינמי. ניתן להגדיר ולנהל מסלולים מותאמים אישית על סמך נתונים דינמיים, כגון פרמטרי שאילתה או כותרות בקשות.

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

אתה יכול להשתמש בפונקציות Edge של Next.js כדי ליישם ניתוב דינמי באופן הבא:

// pages/api/[slug].js
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמטפל(דרישה, מילואים) {
const { slug } = req.query;
אם (שבלול 'על אודות') {
 res.status(200).לִשְׁלוֹחַ('זהו דף אודות!');
 } אַחֵראם (שבלול 'איש קשר') {
 res.status(200).לִשְׁלוֹחַ('זה דף יצירת הקשר!');
 } אַחֵר {
 res.status(404).לִשְׁלוֹחַ('הדף לא נמצא.');
 }
}

דוגמה זו מציגה את התוכן של קובץ בשם [slug.js] בתוך ה דפים/ממשק API ספרייה כדי להגדיר מסלול מותאם אישית עם נתונים דינמיים. לאחר מכן, גבול הקליעה מוסר משאילתת הבקשה באמצעות req.query, המאפשר לך להתמודד עם דרישות המבוססות בעוצמה על הערך של שבלול.

לדוגמה, אם משתמש הולך אל http://example.com/api/about, הפרמטר slug יוגדר ל על אודות. ה מטפל הפונקציה תפעיל את גוש הקוד המתאים ותציג את ההודעה "זהו דף אודות!"

אם הלקוח מבקר http://example.com/api/contact, מטפל יחזיר את ההודעה "זהו דף יצירת הקשר!"

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

2. אחזור נתונים

ב-Next.js, מקרה שימוש נפוץ אחד עבור פונקציות Edge הוא אחזור נתונים. אתה יכול להפחית את העומס על השרת ולהגביר את ביצועי אפליקציית האינטרנט על ידי הבאת נתונים לקצה.

פונקציות ה-Edge של Next.js יכולות לבצע אחזור נתונים, כפי שמוצג בדוגמה זו:

// pages/api/users/[id].js
יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהמטפל(דרישה, מילואים) {
const { id } = req.query;


// אחזר נתוני משתמש מ-API של צד שלישי
const תגובה = לְהַמתִין לְהָבִיא(` https://api.example.com/users/${id}`);
const משתמש = לְהַמתִין response.json();
// החזר את נתוני המשתמש
 res.status(200).json (משתמש);
}

דוגמה זו מגדירה נקודת קצה API המשתמשת ב- תְעוּדַת זֶהוּת פרמטר שאילתה לאחזור נתוני משתמש מ-API של צד שלישי. משתמש ב לְהָבִיא השיטה, תוכל לשלוח בקשה ל-API ולאחר מכן להמתין לתגובה עם מילת המפתח await.

לאחר מכן, הקוד מחלץ את מידע ה-JSON על ידי קריאה response.json() ומאחסן אותו במשתנה. לבסוף, הוא משתמש ב- json שיטת התגובה לעיצוב נתוני התגובה כ-JSON.

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

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

3. משמש באימות

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

כדוגמה, שקול פונקציה הבודקת את מצב האימות של לקוח ומהדהדת אותו בחזרה בתגובה. להלן מתווה של אימות הכולל יכולות Edge ב-Next.js:

// pages/api/auth.js
יְצוּאבְּרִירַת מֶחדָל (req, res) => {
const { isAuthenticated } = req.cookies;
אם (מאומת) {
 res.status(200).json({ הוֹדָעָה: 'אתה מאומת' });
 } אַחֵר {
 res.status(401).json({ הוֹדָעָה: 'אתה לא מאומת' });
 }
}

באיור זה, פונקציית ה-Edge בודקת את קובץ ה-cookie עבור אסימון אימות, ואם נמצא, יוצרת תגובת JSON עם המידע של המשתמש.

4. מבחן A/B

דרך נוספת שבה אתה יכול להשתמש בפונקציות Edge של Next.js היא לייעל את הביצועים של יישום אינטרנט באמצעות בדיקות A/B. אתה יכול להשוות גרסאות שונות של אתר או אפליקציה באמצעות בדיקות A/B כדי לקבוע איזו מהן מניבה ביצועים טובים יותר.

המחשה של האופן שבו ניתן להשתמש בפונקציות Edge של Next.js לביצוע בדיקות A/B היא כדלקמן:

// pages/api/abtest.js
const גרסאות = ['variantA', 'variantB'];
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמטפל(דרישה, מילואים) {
const { userId } = req.query;


// צור וריאנט אקראי עבור המשתמש
const variantIndex = מתמטיקה.קוֹמָה(מתמטיקה.random() * variants.length);
const variant = variants[variantIndex];


// אחסן את הגרסה בעוגייה
 res.setHeader('קובצי Cookie', `variant=${variant}; Max-Age=604800;`);
// עבד את הגרסה המתאימה
אם (גִרְסָה אַחֶרֶת 'variantA') {
 res.status(200).לִשְׁלוֹחַ('ברוכים הבאים לגרסה א'!');
 } אַחֵר {
 res.status(200).לִשְׁלוֹחַ('ברוכים הבאים לגרסה ב'!');
 }
}

קוד זה מדגים נקודת קצה של ממשק API המריץ בדיקת A/B עבור שתי וריאציות ייחודיות של דף אתר. הוא משתמש ב- Math.random() שיטה ליצור וריאנט אקראי עבור המשתמש ולאחסן אותו בקובץ cookie עם res.setHeader שיטה. זה מאפשר לקוד להבטיח שהלקוח יראה את אותה וריאציה בביקורים עתידיים.

לאחר מכן הקוד משתמש ב- גִרְסָה אַחֶרֶת הערך של קובץ Cookie כדי להציג את הגרסה המתאימה. הוא מציג הודעה המציינת באיזו גרסה הוא בחר.

באמצעות פונקציות Edge, מפתחים יכולים להשתמש בכלי רב עוצמה הנקרא A/B testing כדי להשוות גרסאות שונות של אפליקציה או דף אינטרנט כדי לראות איזו מהן מניבה ביצועים טובים יותר. אתה יכול לאסוף נתונים על התנהגות משתמשים ולשפר את הביצועים וחווית המשתמש של אפליקציית האינטרנט על ידי הקצאה אקראית של משתמשים לגרסאות שונות.

5. תגובות בשמירת מטמון

אחסון תגובות הוא דרך נוספת שבה אתה יכול להשתמש ביכולות Edge ב-Next.js כדי לייעל את ביצוע האינטרנט. זה מאפשר לנו לשמור תגובות למשך זמן מסוים כדי להפחית את מספר הבקשות שנשלחו לשרת ולעבוד על מהירות יישום האינטרנט.

הנה המחשה של איך אתה יכול לבצע אחסון תגובה עם Edge Capabilities ב-Next.js:

// pages/api/data.js
const נתונים = { שֵׁם: 'פלוני אלמוני', גיל: 30 };
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמטפל(דרישה, מילואים) {
// הגדר כותרות תגובה כדי לאפשר שמירה במטמון
 res.setHeader('בקרת מטמון', 's-maxage=10, stale-while-revalidate');
// החזר נתונים
 res.status(200).json (נתונים);
}

דוגמה זו מגדירה נקודת קצה API שמחזירה תגובת JSON עם נתונים מסוימים.

אנחנו מגדירים את כותרות התגובה באמצעות ה res.setHeader טכניקה לאפשר הזמנה למשך 10 שניות באמצעות s-max-age גְבוּל. זה מציין שה-CDN יכול לאחסן את התגובה עד עשר שניות לפני שיידרש רענון.

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

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

פונקציות Edge הן תכונה עוצמתית להפליא של Next.js

התמיכה של Next.js בפונקציות Edge היא תכונה משכנעת המאפשרת לך להפעיל פונקציות מותאמות אישית ללא שרת קרוב יותר למשתמש הקצה ברשת הקצה.

ישנן מספר דרכים בהן תוכל להשתמש בפונקציות Edge כדי לשפר יישומי אינטרנט: בדיקת A/B, שמירה במטמון של תגובות, ניתוב דינמי, אחזור נתונים, אימות.

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