Skip to Content Contact Us
דף הבית » בלוג » מהם אתרי Single Page Application (או SPA) ולמה זה חשוב לנו?
image description
משה רדמן

יוני 2, 2019

מהם אתרי Single Page Application (או SPA) ולמה זה חשוב לנו?

במשך שנים אתרי אינטרנט עבדו פחות או יותר באותה שיטה, השיטה נקראת Server Rendering (בתרגום חופשי – הגשה מהשרת) והיא עבדה בגדול ככה:
משתמש שמעוניין לגלוש באתר מסויים נכנס לדפדפן (כרום, ספארי אקספלורר וכו׳) ומקליד את הכתובת של האתר שאליו הוא רוצה לגלוש (או לחלופין לוחץ על לינק במודעה / גוגל / אי מייל וכדומה) >>> הדפדפן של המשתמש פונה לשרת של אותו אתר מבוקש (שיושב איפשהו בארץ או בחו״ל) שאליו המשתמש מעוניין לגלוש, בבקשה לקבל עמוד מסוים באותו אתר. הבקשה נעשית באמצעות פניה לכתובת מסוימת באתר, לדוגמה – עמוד הבית או עמוד מוצר או עמוד מידע מסוים) >>> השרת מקבל את הפניה ומגיש לדפדפן של אותו המשתמש את העמוד שהוא ביקש (קובץ HTML שמכיל את התמונות, עיצוב, פונטים, תוכן וכו׳), וכך חוזר חלילה – בכל מעבר לעמוד חדש / אחר באתר, הדפדפן של המשתמש פונה לאתר בבקשה לאותו עמוד >>> השרת מגיש את העמוד >>> הדפדפן מציג ללקוח וכן הלאה; מתקיים מעין ״פינג פונג״ בין השרת לבין הלקוח. חשוב לציין כי בשיטה זו, גם במקרה שבו עמוד מסוים דומה מאוד לעמוד שקדם לו, עדיין השרת יגיש למשתמש את כל ה-HTML מחדש. מה רע בזה? תכל׳ס לא הרבה, אבל בעידן שבו אנחנו הגולשים מצפים שהכל יקרה מהר ובצורה חלקה ובעולם שבו אתרי אינטרנט הם כבר מזמן לא עמוד סטטי עם כמה תמונות וטקסט, אלא עולם תוכן שלם, דינמי ועשיר, כל פניה כזו שמתבצעת בין הדפדפן של המשתמש לבין השרת יכולה לייצר עיכוב בשל:
  • בעיות רשת
  • תגובה איטית של השרת
  • משקל ה-HTML של העמוד
  • כמות הפניות בו זמנית לאותו שרת
  • מיקומו הפיזי של השרת בעולם (ישראל / אירופה / ארה״ב)
ועוד ועוד
 

סינגל פייג – 1

 
ולכן, בין היתר, המציאו את אתרי ה-Single Page Application (או בקיצור SPA).
בגדול, מדובר בשיטה חדשה להגשת אתרים משרת ללקוח, בעוד שבשיטה המסורתית של Server Rendering התקיים, כאמור, ״פינג פונג״ בין הלקוח לבין השרת, לא משנה מה גודל העמוד ולא משנה כמה הוא שונה או דומה לעמוד שקדם לו, השרת תמיד הגיש קבצי HTML מלאים של העמוד החדש. באתרי SPA השיטה הנהוגה היא אחרת והיא נקראת Client Rendering, איך זה עובד?
ב-SPA הלקוח ניגש לשרת פעם אחת בלבד (בתחילת הביקור באתר) ומבקש ״בערך״ את כל האתר ישירות לדפדפן שלו (במדויק יותר, הוא מבקש את כל המסגרת והמבנה של האתר – עיצוב, פונטים, תמונות וכו׳), ולאחר מכן, כל פעולה שהלקוח יעשה על גבי האתר תתרחש מקומית בדפדפן שלו (באמצעות Java Scripts), וזאת עם מינימום גישה לשרת (מתקיימת גישה מאוד חלקית להשלמת תוכן כמו טקסט וכדומה). כמובן שבמצב כזה היכולת לספק חוויה מהירה יותר וחלקה יותר עולה משמעותית.
 
אתרי SPA הפכו בשנים האחרונות לנפוצים מאוד (Gmail, Facebook, Twitter ועוד) ונראה כי הם יהפכו להיות נפוצים עוד יותר בשנים הקרובות, בין השפות הנפוצות יותר לפיתוח אתרי SPA ניתן למצוא את React JS, Angular, Vue.JS ועוד. יתרונות וחסרונות של שימוש באתרים מסוג SPA ובשיטת Client Rendering.
 

חסרונות:

1. בעיה עם מנועי חיפוש – בתחילת דרכם, אתרי SPA היו ממש לא נגישים למנועי החיפוש ובראשם גוגל, בשל העובדה שהכלים של Google שמאנדקסים את אתרי האינטרנט השונים לא ידעו לקרוא טוב את האתרים הללו (הם רגילים למבנה שבו שרת מגיש להם את התוכן ולא רגילים להפעיל Java Scripts על מנת לקבל תוכן), אך נראה כי הגרסאות החדשות של ReactJS ו-Angular מספקות פתרונות טובים להתמודדות עם הבעיה.
2. טעינה ראשונית יחסית ארוכה יותר – מכיוון שבאינטראקציה הראשונה שלו עם האתר הלקוח מוריד לדפדפן פחות או יותר את כל האתר, לרוב הטעינה הראשונית באתרים מסוג SPA תהיה ארוכה יותר.
3. ברירת המחדל באתרי SPA היא שהכתובת של האתר נשארת תמיד קבועה (אותו URL לכל האתר), כך שאם משתמש נכנס לעמוד מוצר או עמוד פירוט מסוים, הכתובת תישאר כמו בעמוד הבית. עובדה זו יכולה לייצר בעיות עם הפניות לעמודים ספציפיים. ניתן לפתור זאת יחסית בקלות, אך חשוב להיות מודעים ולדרוש זאת כבר באפיון.
 

יתרונות:

1. חווית משתמש חלקה וטובה יותר.
2. יכולת לייצר אתרים יותר עשירים ויותר אינטראקטיביים.
 

חווית משתמש חלקה

 

למה זה חשוב?

כאמור, אתרי SPA הופכים ויהפכו להיות נפוצים יותר בשנים האחרונות, וסביר להניח שכל איש/ת שיווק שיעמוד בפני פיתוח אתר כזה או אחר, יקבל הצעה לפתח את האתר כ-SPA ולא אתר ״סטנדרטי״; חשוב להבין מה המשמעויות ולשאול את השאלות החשובות (את עצמכם ואת הגורמים הטכנולוגיים המעורבים בפרויקט):
 
1. איך מתכננים לספק מענה לחולשות של SPA?
1.1. אנדקוס בגוגל.
1.2. כל עמוד יקבל URL משלו.
1.3. טעינה ראשונית צריכה להיות מהירה ככל שאפשר.
 
2. האם המהירות באתר היא כל כך חיונית עבורכם? לדוגמה, אם האתר שלכם הוא מעין מיני סייט מורחב שכולל עמודי תוכן, כתבות ומעט תמונות ואייקונים, והמיקומים והאינדקוס של Google הם יחסית דומיננטיים עבורו, מומלץ לשקול פיתוח ״בשיטה הישנה והטובה״, ולאו דווקא כ-SPA.
 
3. מה הניסיון של הצוות המלווה אתכם בעבודה עם פרויקטים של SPA? צוות הפיתוח, צוות ניהול הפרויקט, צוות ה-SEO, צוות התשתיות (לטובת הביצועים), צוות האנליזה (לטובת הטמעה נכונה של כלים כמו Google Analytics ודומיו) וכדומה.

רוצה לרוץ מהר יותר?

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

תדברו איתי
Back top top