דף זה תורגם על ידי Cloud Translation API.

בניית רכיב תמונה יעיל

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

Leena Sohoni

Kara Erickson

Alex Castle

תמונות הן מקור נפוץ לצווארי בקבוק בביצועים ביישומי אינטרנט, ואזור למיקוד מרכזי לאופטימיזציה. תמונות שלא עברו אופטימיזציה תורמות לריבוי דפים ומהוות כרגע יותר מ-70% מהמשקל הכולל של הדף בבייטים באחוזון ה-90. יש כמה דרכים לביצוע אופטימיזציה של תמונות, ולכן נדרש 'רכיב תמונה' חכם, שכולל פתרונות לשיפור הביצועים כברירת מחדל.

הצוות של Aurora עבד עם Next.js כדי לפתח רכיב אחד כזה. המטרה הייתה ליצור תבנית תמונה אופטימלית שמפתחי אתרים יוכלו להתאים אישית עוד יותר. הרכיב משמש כמודל טוב ומגדיר תקן לבניית רכיבי תמונות במסגרות אחרות, במערכות ניהול תוכן (CMS) ובמאגרים טכנולוגיים. שיתפנו פעולה על רכיב דומה עבור Nuxt.js,ואנחנו עובדים עם Angular על אופטימיזציה של תמונות בגרסאות עתידיות. פוסט זה מתאר כיצד תכננו את רכיב התמונה Next.js ואת הלקחים שלמדנו לאורך הדרך.

רכיב תמונה כהרחבה של תמונות

בעיות והזדמנויות באופטימיזציה של תמונות

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

תמונות לא בגודל כואבות ב-CLS

תמונות שמוצגות בלי לציין את הגודל שלהן עלולות לגרום לאי יציבות בפריסה ולגרום לשינוי גבוה של הפריסה המצטברת (CLS). הגדרת המאפיינים width ו-height ברכיבי img יכולה לעזור במניעת שינויים בפריסה. למשל:

<img src="flower.jpg" width="360" height="240">

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

תמונות גדולות עלולות לפגוע ב-LCP

ככל שגודל הקובץ של התמונה גדול יותר, כך תהליך ההורדה נמשך זמן רב יותר. תמונה גדולה יכולה להיות התמונה הראשית (Hero) של הדף או הרכיב המשמעותי ביותר באזור התצוגה שאחראי להפעלת התכונה Largest Contentful Paint (LCP). תמונה שהיא חלק מהתוכן הקריטי וההורדה שלה נמשכת זמן רב תעכב את ה-LCP.

במקרים רבים, מפתחים יכולים להקטין את גודל התמונות על ידי דחיסה טובה יותר ושימוש בתמונות רספונסיביות. המאפיינים srcset ו-sizes של הרכיב <img> עוזרים לספק קובצי תמונה בגדלים שונים. לאחר מכן הדפדפן יוכל לבחור את הפרמטר הנכון בהתאם לגודל המסך ולרזולוציה.

דחיסת תמונות באיכות נמוכה עלולה לפגוע ב-LCP

פורמטים מודרניים של תמונות, כמו AVIF או WebP, יכולים לספק דחיסה טובה יותר בהשוואה לפורמטים נפוצים של JPEG ו-PNG. דחיסה טובה יותר מפחיתה את גודל הקובץ ב-25% עד 50% במקרים מסוימים, כדי לאותה איכות של התמונה. הפחתה זו מובילה להורדות מהירות יותר וצריכת נתונים נמוכה יותר. האפליקציה צריכה להציג פורמטים מודרניים של תמונות בדפדפנים שתומכים בפורמטים האלה.

טעינה של תמונות לא נחוצות פוגעת ב-LCP

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

אתגרי אופטימיזציה

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

עדיפות: מפתחי אתרים נוטים להתמקד בקוד, ב-JavaScript ובאופטימיזציה של נתונים. לכן, יכול להיות שהם לא מודעים לבעיות בתמונות או איך לבצע אופטימיזציה שלהן. יכול להיות שתמונות שנוצרו על ידי מעצבים או שמשתמשים העלו לא יוצגו בראש סדר העדיפויות.
פתרון מוכן לשימוש: גם אם מפתחים מודעים לדקויות של אופטימיזציה של תמונות, היעדר פתרון כולל ומוכן למסגרת או לסטאק התוכנות שלהם עשוי להרתיע.
תמונות דינמיות: בנוסף לתמונות סטטיות שהן חלק מהאפליקציה, תמונות דינמיות מועלות על ידי משתמשים או מגיעות ממסדי נתונים חיצוניים או ממערכות ניהול תוכן. ייתכן שתתקשה להגדיר את הגודל של תמונות כאלה כאשר מקור התמונה הוא דינמי.
עומס יתר של תגי עיצוב: פתרונות שכוללים את גודל התמונה או srcset שמיועדים לגדלים שונים מחייבים תגי עיצוב נוספים לכל תמונה. עיצוב זה עלול להיות מעייף. המאפיין srcset הושק בשנת 2014, אבל רק 26.5% מהאתרים משתמשים בו היום. כשמשתמשים ב-srcset, המפתחים צריכים ליצור תמונות בגדלים שונים. כלים כמו just-gimme-an-img יכולים לעזור, אבל יש להשתמש בהם באופן ידני לכל תמונה.
תמיכה בדפדפן: פורמטים מודרניים של תמונות כמו AVIF ו-WebP יוצרים קובצי תמונה קטנים יותר, אבל דורשים טיפול מיוחד בדפדפנים שלא תומכים בהם. המפתחים צריכים להשתמש באסטרטגיות כמו משא ומתן על תוכן או האלמנט <picture> כדי שהתמונות יוצגו לכל הדפדפנים.
סיבוכים של טעינה מושהית: יש כמה שיטות וספריות שבהן אפשר להשתמש כדי להטמיע טעינה עצלה בתמונות בחלק הנגלל. בחירת התמונה הטובה ביותר יכולה להיות אתגר. ייתכן גם שהמפתחים לא יודעים מהו המרחק הטוב ביותר מ "קיפול" כדי לטעון תמונות שנדחו. גדלים שונים של אזורי תצוגה במכשירים יכולים לסבך עוד יותר את הבעיה.
שינוי בנוף: כשהדפדפנים מתחילים לתמוך בתכונות חדשות של HTML או CSS כדי לשפר את הביצועים, יכול להיות שהמפתחים יתקשו להעריך כל אחת מהן. לדוגמה, Chrome מוסיף את התכונה עדיפות אחזור כגרסת מקור לניסיון. אתם יכולים להשתמש בה כדי לשפר את העדיפות של תמונות ספציפיות בדף. באופן כללי, למפתחים יהיה קל יותר אם השיפורים האלה ייבדקו וייישםו ברמת הרכיב.

רכיב תמונה כפתרון

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

בשנה האחרונה עבדנו עם המסגרת של Next.js כדי לעצב וimplement את רכיב התמונות שלהן. אפשר להשתמש בו כתחליף לרכיבי <img> הקיימים באפליקציות Next.js.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

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

הגנה מפני שינויים בפריסה

כפי שצוין קודם, תמונות לא בגודל גורמות לתנודות בפריסה ותורמות ל-CLS. כשמשתמשים ברכיב התמונה Next.js, מפתחים חייבים לציין גודל תמונה באמצעות המאפיינים width ו-height כדי למנוע שינויים בפריסה. אם הגודל לא ידוע, מפתחים צריכים לציין layout=fill כדי להציג תמונה לא בגודל שנמצא בתוך מאגר בגודל. לחלופין, ניתן להשתמש בייבוא תמונות סטטיות כדי לאחזר את גודל התמונה בפועל בכונן הקשיח בזמן ה-build ולכלול אותה בתמונה.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

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

מאפשרים תגובה מהירה

כדי שהתמונות יהיו רספונסיביות במכשירים שונים, המפתחים צריכים להגדיר את המאפיינים srcset ו-sizes ברכיב <img>. רצינו לצמצם את המאמץ הזה עם רכיב התמונה. תכננו את רכיב התמונה של Next.js כך שיגדיר את ערכי המאפיינים רק פעם אחת לכל אפליקציה. אנחנו מחילים אותן על כל המופעים של רכיב התמונה, בהתבסס על מצב הפריסה. חשבנו על פתרון שמורכב משלושה חלקים:

המאפיין deviceSizes: אפשר להשתמש במאפיין הזה כדי להגדיר נקודות עצירה באופן חד-פעמי על סמך המכשירים המשותפים לבסיס המשתמשים באפליקציה. ערכי ברירת המחדל של נקודות עצירה (breakpoint) כלולים בקובץ התצורה.
המאפיין imageSizes: זהו גם מאפיין שניתן להגדרה ומשמש לקבלת גדלים של תמונות שתואמים לנקודות עצירה (breakpoint) של גודל המכשיר.
המאפיין layout בכל תמונה: משמש לציון אופן השימוש במאפיינים deviceSizes ו-imageSizes לכל תמונה. הערכים הנתמכים במצב פריסה הם fixed, fill, intrinsic ו-responsive

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

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

התמונות עברו רינדור בהתאם לפריסות שונות
מסך של מחשב נייד	מסך הטלפון
Layout = Intrinsic: ניתן לשנות את גודל המאגר בהתאם לרוחב של מאגר התגים באזורי תצוגה קטנים יותר. לא ניתן להרחבה מעבר לגודל הפנימי של התמונה באזור תצוגה גדול יותר. רוחב המאגר הוא 100%

פריסה = קבועה: התמונה לא רספונסיבית. הרוחב והגובה קבועים באופן דומה לרכיב '', ללא קשר למכשיר שבו הוא מעובד.

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

פריסה = מילוי: הרוחב והגובה נמתחים עד למילוי מאגר ההורה. (הורה ` הרוחב מוגדר ל-300*500 בדוגמה זו).

לספק טעינה מדורגת מובנית

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

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

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

טעינה מראש של תמונות חשובות

לעיתים קרובות, רכיבי LCP הם תמונות, ותמונות גדולות עלולות לעכב את ה-LCP. מומלץ לטעון מראש תמונות קריטיות כדי שהדפדפן יוכל לגלות את התמונה מוקדם יותר. כשמשתמשים ברכיב <img>, ניתן לכלול רמז לטעינה מראש בכותרת ה-HTML באופן הבא.

<link rel="preload" as="image" href="important.png">

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

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

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

עידוד אירוח תמונות שמניב ביצועים גבוהים

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

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

בתצורה הזו, מפתחים יכולים להשתמש בכתובות URL יחסיות במקור התמונה, וה-framework ישרשר את כתובת ה-URL היחסית עם נתיב ה-CDN כדי ליצור את כתובת ה-URL המוחלטת. נתמכים קובצי CDN פופולריים של תמונות כמו Imgix, Cloudinary ו-Akamai. הארכיטקטורה תומכת בשימוש בספק מותאם אישית של שירותי ענן באמצעות הטמעה של פונקציה מותאמת אישית loader באפליקציה.

תמיכה בתמונות באירוח עצמי

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

תמיכה בטעינה מתקדמת

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

רכיב התמונה Next.js תומך בטעינה הדרגתית של התמונה באמצעות המאפיין placeholder. אפשר להשתמש בו כ-LQIP (placeholder של תמונה באיכות נמוכה) להצגת תמונה מטושטשת או באיכות נמוכה בזמן שהתמונה נטענת בפועל.

השפעה

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

כש-Leboncoin העבירו את ממשק ה-JavaScript הקודם ל-Next.js, הם גם שדרגו את צינור עיבוד התמונות ל-Next.js והשתמשו ברכיב התמונה Next.js. בדף שהועבר מ-<img> לתמונה/הבאה, מדד ה-LCP ירד מ-2.4 ל-1.7. סך הבייטים של תמונות שהורדו לדף ירד מ-663kB ל-326kB (כ-100kB של בייטים של תמונות שנטענו בהדרגה).

שיעורים שנלמדו

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

שסתומי בטיחות יכולים לגרום יותר נזק מתועלת

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

מפרידים בין חיכוך שימושי להטרדה חסרת טעם

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

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

למצוא איזון בין תכונות נוחות לבין אופטימיזציות של ביצועים

אם רכיב התמונה שלכם לא עושה דבר חוץ מאשר "חיכוך שימושי" על המשתמשים, לרוב המפתחים לא ירצו להשתמש בו. גילינו שהחשובות ביותר היו תכונות הביצועים, כמו שינוי הגודל של התמונות ויצירה אוטומטית של ערכי srcset. גם תכונות נוחות המיועדות למפתחים, כמו טעינה מדורגת אוטומטית וערכי placeholder מטושטשים מובנים, עוררו עניין ברכיב התמונה Next.js.

הכנת מפת דרכים לתכונות שיעודדו הטמעה

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

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

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

סיכום

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

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

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