ביצועים כברירת מחדל עם Next.js

מערכת Next.js מטפלת בהרבה אופטימיזציות באפליקציית React שלכם, כך שלא תצטרכו:

חוסיין ג'ירד

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

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

מה נלמד?

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

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

מה ההבדל בין Next.js ל-React?

ספריית React היא ספרייה שמאפשרת לפתח ממשקי משתמש בקלות באמצעות גישה המבוססת על רכיבים. React הוא באופן ספציפי ספרייה של ממשק משתמש, למרות שהיא חזקה. מפתחים רבים משתמשים בכלים נוספים, כמו מודול בחבילה (webpack) וממיר (לדוגמה, Babel) כדי ליצור שרשרת כלים מלאה של build.

באוסף התגובות, השתמשנו ב-Create React App (CRA) כדי ליצור במהירות אפליקציות של React. ההגדרה של אפליקציית React ב-CRA מאפשרת לכם ליצור רשימת כלים מלאה של build באמצעות פקודה אחת, כדי שתוכלו לעשות זאת.

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

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

  • רינדור בצד השרת
  • פיצול קוד אוטומטי
  • שליפה מראש (prefetch) של מסלול
  • ניתוב מערכת קבצים
  • סגנון CSS-in-JS (styled-jsx)

בתהליך הגדרה

כדי ליצור אפליקציית Next.js חדשה, מריצים את הפקודה הבאה:

npx create-next-app new-app

לאחר מכן, עוברים לספרייה ומפעילים את שרת הפיתוח:

cd new-app
npm run dev

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

  • לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
  • כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.

שימו לב שספריית pages/ נוצרת עם קובץ יחיד: index.jsx. Next.js פועל לפי גישת ניתוב של מערכת קבצים, שבה כל דף בספרייה הזו מוצג כנתיב נפרד. יצירת קובץ חדש בספרייה הזו, כמו about.js, תיצור באופן אוטומטי נתיב חדש (/about).

אפשר גם ליצור רכיבים ולהשתמש בהם כמו כל אפליקציית React אחרת. כבר נוצרה ספריית components/ עם רכיב יחיד, nav.js, שכבר מיובא ב-index.js. כברירת מחדל, כל ייבוא שנעשה בו שימוש ב-Next.js מאוחזר רק כאשר אותו דף נטען, ומספק את היתרונות של פיצול קוד אוטומטי.

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

הכרטיסייה 'תצוגה מקדימה' בחלונית 'רשת' מראה ש-Next.js מחזיר HTML מלא מבחינה חזותית כאשר יש בקשה לדף.
בכרטיסייה 'תצוגה מקדימה' בחלונית 'רשת' אפשר לראות ש-Next.js מחזיר HTML באופן חזותי כאשר יש בקשה לדף.

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

מה השלב הבא?

מכוון הרחקה 😛

כל מדריך אחר באוסף הזה יחקור לעומק תכונה ספציפית של Next.js: