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

רינדור הוא תהליך המרת קוד React ל-HTML. שיטת הרינדור שתבחר תלויה בנתונים שאתה עובד איתם וכמה אכפת לך מהביצועים.

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

תסתכל כיצד שיטות אלה פועלות וכיצד כל אחת מהן פועלת.

עיבוד בצד השרת

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

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

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

השתמש ב-getServerSideProps כדי לבנות מחדש את הדף בכל פעם שמשתמש מבקש זאת.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית({ נתונים }) {
לַחֲזוֹר (
<רָאשִׁי>
 // להשתמשנתונים
</main>
 );
}
יְצוּאאסינכרוןפוּנקצִיָהgetServerSideProps() {
// אחזר נתונים מ-API חיצוני
const res = לְהַמתִין להביא('https://.../data')
const נתונים = לְהַמתִין res.json()





instagram viewer

// יועבר לרכיב העמוד כאביזרים
לַחֲזוֹר { אביזרים: { נתונים } }
}

getServerSideProps פועל רק על השרת וכך הוא פועל:

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

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

שליפות נתונים דינמיות הן בקשות fetch() שמבטלות את הסכמתך לאחסון במטמון על ידי הגדרת אפשרות המטמון ל-"no-store".

לְהָבִיא('https://...', { מטמון: 'ללא חנות' });

לחלופין, הגדר את אימות מחדש ל-0:

לְהָבִיא('https://...', { next: { revalidate: 0 } });

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

עיבוד בצד הלקוח

עליך להשתמש בעיבוד צד לקוח (CSR) כאשר אתה צריך לעדכן נתונים לעתים קרובות או כאשר אינך רוצה לעבד מראש את הדף שלך. אתה יכול ליישם CSR ברמת הדף או ברמת הרכיב. ברמת העמוד, Next.js מאחזר נתונים בזמן ריצה וכאשר נעשה ברמת הרכיב, הוא מביא נתונים בעת mount. בשל כך, אחריות חברתית יכולה לתרום לביצועים איטיים.

להשתמש ב הוק של useEffect(). כדי לעבד דפים בלקוח כך:

יְבוּא { useState, useEffect } מ 'לְהָגִיב'
פוּנקצִיָהבית() {
const [data, setData] = useState(ריק)
const [isLoading, setLoading] = useState(שֶׁקֶר)
useEffect(() => {
 setLoading(נָכוֹן)


לְהָבִיא('/api/get-data')
 .then((res) => res.json())
 .then((נתונים) => {
 setData (נתונים)
 setLoading(שֶׁקֶר)
 })
 }, [])


if (isLoading) חוזר <ע>טוען...</p>
 אם (!נתונים) חוזרים <ע>אין מידע</p>
לַחֲזוֹר (
<div>
 // להשתמשנתונים
</div>
 )
}

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

יְבוּא השתמש בSWR מ 'סוור'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
פוּנקצִיָהבית() {
const { data, error } = useSWR('/api/נתונים', מאחזר)
 אם (שגיאה) תחזיר <div>הטעינה נכשלה</div>
 אם (!נתונים) חוזרים <div>טוען...</div>
לַחֲזוֹר (
<div>
 // להשתמשנתונים
</div>
 )
}

ב-Next.js 13, עליך להשתמש ברכיב לקוח על ידי הוספת ההנחיה "השתמש בלקוח" בראש הקובץ.

"להשתמשלָקוּחַ";
יְצוּאבְּרִירַת מֶחדָל () => {
לַחֲזוֹר (
<div>
// רכיב לקוח
</div>
 );
};

ההבדל בין SSR ל-CSR הוא שהנתונים נשלפים בכל בקשת עמוד בשרת ב-SSR בעוד שהנתונים נשלפים בצד הלקוח ב-CSR.

יצירת אתרים סטטיים

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

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

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית({ נתונים }) {
לַחֲזוֹר (
<רָאשִׁי>
 // להשתמשנתונים
</main>
 );
}
יְצוּאאסינכרוןפוּנקצִיָהgetStaticProps() {
// אחזר נתונים מ-API חיצוני בזמן בנייה
const res = לְהַמתִין להביא('https://.../data') 
const נתונים = לְהַמתִין res.json()
// יועבר לרכיב העמוד כאביזרים
לַחֲזוֹר { אביזרים: { נתונים } }
}

אתה יכול גם לשאול את מסד הנתונים בתוך getStaticProps.

יְצוּאאסינכרוןפוּנקצִיָהgetStaticProps() {
 // שִׂיחָהפוּנקצִיָהללְהָבִיאנתוניםממאגר מידע
const נתונים = לְהַמתִין getDataFromDB()
לַחֲזוֹר { אביזרים: { נתונים } }
}

ב-Next.js 13, רינדור סטטי הוא ברירת המחדל, והתוכן מאוחזר ומאחסן במטמון, אלא אם כן תגדיר את אפשרות האחסון במטמון כבויה.

אסינכרוןפוּנקצִיָהgetData() {
const res = לְהַמתִין להביא('https://.../data');
לַחֲזוֹר res.json();
}
יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהבית() {
const נתונים = לְהַמתִין getData();
לַחֲזוֹר (
<רָאשִׁי>
 // להשתמשנתונים
</main>
 );
}

למידע נוסף על עיבוד סטטי ב-Next.js 13 מהמסמכים.

יצירה אינקרמנטלית-סטטית

יש מקרים שבהם אתה רוצה להשתמש ב-SSG אבל גם רוצה לעדכן את התוכן באופן קבוע. זה המקום שבו ייצור סטטי מצטבר (ISG) עוזר.

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

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

כדי להשתמש ב-ISR, הוסף את ה-revalidate prop לפונקציה getStaticProps בדף.

יְצוּאאסינכרוןפוּנקצִיָהgetStaticProps() {
const res = לְהַמתִין להביא('https://.../data')
const נתונים = לְהַמתִין res.json()
לַחֲזוֹר {
 אביזרים: {
 נתונים,
 },
 תוקף מחדש: 60
 }
}

כאן, Next.js ינסה לבנות מחדש את הדף כשמגיעה בקשה לאחר 60 שניות. הבקשה הבאה תגרום לתשובה עם הדף המעודכן.

ב-Next.js 13, השתמש ב-revalidate באחזור כך:

לְהָבִיא('https://.../data', { הבא: { revalidate: 60 } });

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

כיצד לבחור שיטת רינדור

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

SSG מתאים לדפים שהנתונים שלהם לרוב סטטיים בעוד ש-ISG הוא הטוב ביותר עבור דפים המכילים נתונים שברצונך לעדכן במרווחים. SSG ו-ISG מעולים מבחינת ביצועים ו-SEO מכיוון שהנתונים נשלפים מראש ותוכלו לשמור אותם במטמון.