פריסת רכיבים עם שדות מטריקס ב-Craft CMS: מדריך הגדרה

תצורת פריסת רכיבים עם שדות Matrix ב-Craft CMS: מדריך הגדרה

מפתחים נתקלים לעיתים קרובות במלכודות עם שדה Matrix ב-Craft CMS: או ששאילתות N+1 הורגות את השרת, או שעורכים מבקשים "עוד סוג בלוק אחד". בפרויקט אחד, עמוד "אודות" של לקוח הכיל 25 בלוקים, כל אחד עם תמונה. טעינת העמוד ארכה 8 שניות עקב 25 שאילתות מדיה נפרדות. לאחר הגדרה נכונה של טעינה מוקדמת (eager loading), הזמן ירד ל-1.2 שניות — שיפור של פי 6.7. עם יותר מ-50 פרויקטי Craft, חידדנו גישה שבה Matrix אינו מאט ולא מתסכל את הצוות.

כיצד לתכנן בלוקים כדי להימנע מעיצובים מחדש

באתר תאגידי טיפוסי, שדה ה-pageBody מכיל 6–10 סוגי בלוקים. כל בלוק הוא מיקרו-מבנה: טקסט, תמונה, קישור, ציטוט, קוד, סטטיסטיקות. קריטי לתכנן את מערך השדות — הוספת שדה מאוחר יותר קשה יותר מהסרת אחד. המבנה האופטימלי לעמוד נחיתה:

pageBody (Matrix)
├── hero
│   ├── heading, subheading, backgroundImage, ctaButton
├── richTextContent
│   └── content (Redactor)
├── imageWithCaption
│   ├── image, caption, alignment
├── twoColumns
│   ├── leftContent, rightContent (Redactor)
├── testimonial
│   ├── quote, author, role, avatar
├── stats
│   └── items (Table field внутри)
├── ctaBanner
│   ├── heading, text, buttonLabel, buttonUrl
└── codeSnippet
    ├── language, code

השתמשו בשדות Table לרשימות (סטטיסטיקות, מחירים) — הם מהירים יותר מ-Matrix מקונן וקל יותר לשמור אותם במטמון.

עיבוד Twig: switch לעומת include לעומת component

רוב הפרויקטים משתמשים ב-pageBody (Matrix) ├── hero │ ├── heading, subheading, backgroundImage, ctaButton ├── richTextContent │ └── content (Redactor) ├── imageWithCaption │ ├── image, caption, alignment ├── twoColumns │ ├── leftContent, rightContent (Redactor) ├── testimonial │ ├── quote, author, role, avatar ├── stats │ └── items (Table field внутри) ├── ctaBanner │ ├── heading, text, buttonLabel, buttonUrl └── codeSnippet ├── language, code בתוך לולאה — אמין וקריא. אבל עם 10+ בלוקים, התבנית הופכת מגושמת. חלופה היא לחלץ כל בלוק ל-include נפרד. זה מפשט את התחזוקה אך מעט איטי יותר עקב קריאות include מרובות. הגישה האופטימלית מעבדת בלוקים באמצעות גישת רכיבים עם מטמון מקטעים (fragment caching).

בניסיוננו, עמודים עם 15+ בלוקים מרוויחים 40–50 אלפיות השנייה על ידי הוספת תגי מטמון.

מדוע N+1 הורס ביצועים וכיצד להימנע מכך

ללא טעינה מוקדמת, כל בלוק עם שדה Assets יוצר שאילתה נפרדת. לדוגמה, בלוק תמונה מחפש את התמונה, בלוק המלצה מחפש את התמונה הממוזערת. אם לעמוד יש 10 בלוקים, מקבלים 10 שאילתות DB בתוספת שאילתת רשימת הבלוקים. הפתרון הוא קריאה אחת של {% switch %}: with().

עבור בלוקים המכילים Matrix מקונן (למשל, טאבים עם תוכן פנימי), השתמשו ב-{% set blocks = entry.pageBody.with(['image', 'avatar', 'backgroundImage']).all() %} — Craft תומך בטעינה מוקדמת עמוקה. פרטים מלאים בתיעוד הרשמי של Craft CMS.

מה לעשות אם Matrix מאט את לוח הבקרה

Matrix עם 50+ בלוקים בלוח הבקרה הוא סיוט נפוץ. הסיבה: כל בלוק מעבד את השדות שלו. הפתרון הוא לפצל את ה-Matrix למספר שדות: Matrix נפרד ל"כותרת עליונה", "גוף" ו"כותרת תחתונה". לחלופין, השתמשו ב-Neo Field של McDowell — תחליף התומך בקינון, בעלות של $99.

בחירת כלי: מתי להשתמש ב-Matrix, Neo, Table

Matrix הוא הבחירה הטובה ביותר עבור 80% מהפרויקטים. Neo שווה רק עבור יותר משתי רמות קינון. Table ו-SuperTable מיועדים לנתונים טבלאיים.

אסטרטגיות מטמון בלוקים עבור Matrix

בלוקי Matrix שוברים את מטמון העמוד ללא אסטרטגיה. הפתרון הוא לשמור כל בלוק בנפרד עם תגים. ב-Twig:

{% cache globally using key 'block-' ~ block.id tags 'matrixBlock:' ~ block.id %}
    {% include 'matrix/_' ~ block.type.handle %}
{% endcache %}

כאשר בלוק משתנה, Craft מבטל רק את המטמון שלו. עבור בלוקים סטטיים (richText), שמרו במטמון ליום; עבור מדיה, לשעה.

pageBody (Matrix):
  - hero (heading, subheading, backgroundImage, ctaButton)
  - richTextContent (content Redactor)
  - imageWithCaption (image, caption, alignment)
  - twoColumns (leftContent, rightContent Redactor)
  - testimonial (quote, author, role, avatar)
  - stats (items Table field)
  - ctaBanner (heading, text, buttonLabel, buttonUrl)
  - codeSnippet (language, code)