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

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

Houssein Djirdeh

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

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

מה תלמדו?

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

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

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

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

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

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

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

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

בתהליך הגדרה

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

npx create-next-app new-app

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

cd new-app
npm run dev

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

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

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

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

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

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

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

מה השלב הבא?

משחק מילים מכוון 😛

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