CSR, SSR, SSG, ISR: כיצד לבחור את פרדיגמת העיבוד הנכונה

CSR, SSR, SSG, ISR: כיצד לבחור את פרדיגמת העיבוד הנכונה
קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

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





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





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

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





עיבוד אתרים ביותר מדרך אחת

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

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



אחריות אחריות: הדפדפן לוקח אחריות

CSR ראשי תיבות של Client Side Rendering. כאשר אתה מעבד צד לקוח של אפליקציה או אתר, השרת מעביר מעט HTML עד לא פרט לחתיכה קטנה של קוד לוח. לאחר מכן, העמוד מבקש מהשרת כל נתונים שהוא צריך, לאחר אירוע טעינת העמוד, באמצעות בקשות AJAX.

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





  תקריב של קוד תכנות בעורך טקסט

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

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





SSR: עיבוד בשרת מרכזי

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

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

  מישהו יושב ליד שולחן ומקליד במחשב נייד

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

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

דינמיקה מעורבת מציעה למשתמשים את היכולת לעבור ישירות לכל דף באפליקציה, תוך כדי קבלת המהירות והחלקות של אפליקציה של עמוד בודד. Next.js מציע פרדיגמות עיבוד מרובות , כמו גם Nuxt.js ו-Sveltekit.

SSG: עיבוד ממוזער

SSG, או Static Site Generation, עוקפת את הצורך ביצירת HTML בצד הלקוח או השרת. במקום זאת, אתרים ואפליקציות בסגנון SSG מרכיבים מראש כל עמוד שהם יכולים להזדקק להם, ודוחפים את התוצאות ל-CDN למסירה מהירה.

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

  מישהו שעובד עם קוד בעורך טקסט

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

כיצד להסיר נצפה לאחרונה ב- Netflix

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

ISR: קצת מהכל

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

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

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

  מחשב נייד עם קוד על המסך שלו יושב על שולחן

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

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

איזה סוג עיבוד הוא הטוב ביותר?

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

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