SPA – מה זה?
Single Page Application (תרגום – יישומי דף יחיד) הם יישומי רשת שמטרתם לתת חוויית משתמש יותר מהירה וזורמת ויותר, הדומה יותר לתוכנת מחשב רגילה (שאינה יישום רשת). ביישומים אלו, כל הקוד הדרוש – HTML, CSS, JS – מגיע אל הדפדפן בטעינת דף אחת, ומשאבים נוספים נטענים בצורה דינמית, בדרך כלל כתגובה לפעולות המשתמש. דף האינטרנט לא מבצע טעינה מחדש בשום שלב, אולם כתובת האינטרנט עשויה להשתנות מעט, על מנת לתת למשתמש הבנה יותר טובה של הניווט בדף.
איך אתר אינטרנט עובד?
מה הן הסיבות לעיכוב בין דפדפן ושרת?
עיכובים בין שרת ודפדפן נגרמים לרוב בגלל 5 הסיבות הבאות:
- בעיות רשת.
- תגובה איטית של השרת.
- משקל ה-HTML של העמוד.
- כמות הפניות בו זמנית לאותו שרת.
- מיקומו הפיזי של השרת בעולם (ישראל / אירופה / ארה״ב).
יש דוגמאות לאתרים שמשתמשים בSPA?
SPA – יתרונות וחסרונות
חסרונות:
יתרונות:
למה זה חשוב?
1. איך מתכננים לספק מענה לחולשות של SPA?
2. האם המהירות באתר היא כל כך חיונית עבורכם?
3. מה הניסיון של הצוות המלווה אתכם בעבודה עם פרויקטים של SPA?
שאלות ותשובות
מזה Single Page Application?
Single Page Application (תרגום יישומי דף יחיד) הם יישומי רשת שמטרתם לתת חוויית משתמש יותר מהירה וזורמת ויותר, הדומה יותר לתוכנת מחשב רגילה (שאינה יישום רשת). ביישומים אלו, כל הקוד הדרוש – HTML, CSS, JS – מגיע אל הדפדפן בטעינת דף אחת, ומשאבים נוספים נטענים בצורה דינמית, בדרך כלל כתגובה לפעולות המשתמש. דף האינטרנט לא מבצע טעינה מחדש בשום שלב, אולם כתובת האינטרנט עשויה להשתנות מעט, על מנת לתת למשתמש הבנה יותר טובה של הניווט בדף.
איך אתר אינטרנט עובד?
במשך שנים אתרי אינטרנט עבדו פחות או יותר באותה שיטה, השיטה נקראת Server Rendering (בתרגום חופשי - הגשה מהשרת) והיא עבדה בגדול ככה: משתמש שמעוניין לגלוש באתר מסויים נכנס לדפדפן (כרום, ספארי אקספלורר וכו׳) ומקליד את הכתובת של האתר שאליו הוא רוצה לגלוש (או לחלופין לוחץ על לינק במודעה / גוגל / אי מייל וכדומה) >>> הדפדפן של המשתמש פונה לשרת של אותו אתר מבוקש (שיושב איפשהו בארץ או בחו״ל) שאליו המשתמש מעוניין לגלוש, בבקשה לקבל עמוד מסוים באותו אתר. הבקשה נעשית באמצעות פניה לכתובת מסוימת באתר, לדוגמה – עמוד הבית או עמוד מוצר או עמוד מידע מסוים) >>> השרת מקבל את הפניה ומגיש לדפדפן של אותו המשתמש את העמוד שהוא ביקש (קובץ HTML שמכיל את התמונות, עיצוב, פונטים, תוכן וכו׳), וכך חוזר חלילה – בכל מעבר לעמוד חדש / אחר באתר, הדפדפן של המשתמש פונה לאתר בבקשה לאותו עמוד >>> השרת מגיש את העמוד >>> הדפדפן מציג ללקוח וכן הלאה; מתקיים מעין ״פינג פונג״ בין השרת לבין הלקוח. חשוב לציין כי בשיטה זו, גם במקרה שבו עמוד מסוים דומה מאוד לעמוד שקדם לו, עדיין השרת יגיש למשתמש את כל ה-HTML מחדש. מה רע בזה? תכל׳ס לא הרבה, אבל בעידן שבו אנחנו הגולשים מצפים שהכל יקרה מהר ובצורה חלקה ובעולם שבו אתרי אינטרנט הם כבר מזמן לא עמוד סטטי עם כמה תמונות וטקסט, אלא עולם תוכן שלם, דינמי ועשיר, כל פניה כזו שמתבצעת בין הדפדפן של המשתמש לבין השרת יכולה לייצר עיכוב בשל: בעיות רשת תגובה איטית של השרת משקל ה-HTML של העמוד כמות הפניות בו זמנית לאותו שרת מיקומו הפיזי של השרת בעולם (ישראל / אירופה / ארה״ב) ועוד ועוד.
מה הן הסיבות לעיכוב בין דפדפן ושרת?
•בעיות רשת.
•תגובה איטית של השרת.
•משקל ה-HTML של העמוד.
•כמות הפניות בו זמנית לאותו שרת.
•מיקומו הפיזי של השרת בעולם (ישראל / אירופה / ארה״ב).
אז למה המציאו את אתרי ה?Single Page Application
בגדול, מדובר בשיטה חדשה להגשת אתרים משרת ללקוח, בעוד שבשיטה המסורתית של Server Rendering התקיים, כאמור, ״פינג פונג״ בין הלקוח לבין השרת, לא משנה מה גודל העמוד ולא משנה כמה הוא שונה או דומה לעמוד שקדם לו, השרת תמיד הגיש קבצי HTML מלאים של העמוד החדש. באתרי SPA השיטה הנהוגה היא אחרת והיא נקראת Client Rendering, איך זה עובד? ב-SPA הלקוח ניגש לשרת פעם אחת בלבד (בתחילת הביקור באתר) ומבקש ״בערך״ את כל האתר ישירות לדפדפן שלו (במדויק יותר, הוא מבקש את כל המסגרת והמבנה של האתר - עיצוב, פונטים, תמונות וכו׳), ולאחר מכן, כל פעולה שהלקוח יעשה על גבי האתר תתרחש מקומית בדפדפן שלו (באמצעות Java Scripts), וזאת עם מינימום גישה לשרת (מתקיימת גישה מאוד חלקית להשלמת תוכן כמו טקסט וכדומה). כמובן שבמצב כזה היכולת לספק חוויה מהירה יותר וחלקה יותר עולה משמעותית. אתרי SPA הפכו בשנים האחרונות לנפוצים מאוד (Gmail, Facebook, Twitter ועוד) ונראה כי הם יהפכו להיות נפוצים עוד יותר בשנים הקרובות, בין השפות הנפוצות יותר לפיתוח אתרי SPA ניתן למצוא את React JS, Angular, Vue.JS ועוד. יתרונות וחסרונות של שימוש באתרים מסוג SPA ובשיטת Client Rendering.
יש דוגמאות לאתרים שמשתמשים בSPA?
אתרי SPA הפכו בשנים האחרונות לנפוצים מאוד (Gmail, Facebook, Twitter ועוד) ונראה כי הם יהפכו להיות נפוצים עוד יותר בשנים הקרובות, בין השפות הנפוצות יותר לפיתוח אתרי SPA ניתן למצוא את React JS, Angular, Vue.JS ועוד. יתרונות וחסרונות של שימוש באתרים מסוג SPA ובשיטת Client Rendering.
מה החסרונות בשימוש באתרי SPA?
1.בעיה עם מנועי חיפוש - בתחילת דרכם, אתרי SPA היו ממש לא נגישים למנועי החיפוש ובראשם גוגל, בשל העובדה שהכלים של Google שמאנדקסים את אתרי האינטרנט השונים לא ידעו לקרוא טוב את האתרים הללו (הם רגילים למבנה שבו שרת מגיש להם את התוכן ולא רגילים להפעיל Java Scripts על מנת לקבל תוכן), אך נראה כי הגרסאות החדשות של ReactJS ו-Angular מספקות פתרונות טובים להתמודדות עם הבעיה.
2. טעינה ראשונית יחסית ארוכה יותר - מכיוון שבאינטראקציה הראשונה שלו עם האתר הלקוח מוריד לדפדפן פחות או יותר את כל האתר, לרוב הטעינה הראשונית באתרים מסוג SPA תהיה ארוכה יותר.
3. ברירת המחדל באתרי SPA היא שהכתובת של האתר נשארת תמיד קבועה (אותו URL לכל האתר), כך שאם משתמש נכנס לעמוד מוצר או עמוד פירוט מסוים, הכתובת תישאר כמו בעמוד הבית. עובדה זו יכולה לייצר בעיות עם הפניות לעמודים ספציפיים. ניתן לפתור זאת יחסית בקלות, אך חשוב להיות מודעים ולדרוש זאת כבר באפיון.
