מה משמעות ראשי התיבות SPA?

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

איך עובדים אתרי אינטרנט

במשך שנים רבות רוב אתרי האינטרנט עבדו באותה דרך, והדרך נקראת Server Side Rendering או בקצרה SSR, והיו כמה פעולות שהתבצעו:

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

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

מה יכול לגרום לעיכוב בין בקשת דפדפן ותגובת שרת?

ישנן כמה סיבות העלולות לגרום לעיכוב בתקשורת בין הדפדפן והשרת כגון:

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

זאת אחת מיני סיבות רבות שהמציאו יישום דף יחיד (SPA) וזאת דרך חדשה לגשר בין דפדפן המשתמש לשרת עצמו. בעוד בשיטה הקודמת של SSR התקיים משחק שחזר על עצמו בין המשתמש לשרת, אשר הגיש דפים מלאים בקוד HTML מחדש, בדרך החדשה דרך אתרי SPA הנקראת Client Side Rendering או CSR. רוצים לדעת איך הדרך החדשה עובדת? פשוט.

איך עובד ה-CSR דרך אתרי SPA?

בשביל שהמשתמש יקבל חווית גלישה יותר מהירה ומהנה, זה מה שה-CSR מאפשר למשתמש לעשות:

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

אילו אתרים משתמשים ב-SPA?

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

החסרונות

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

היתרונות

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

למה אתרי SPA חשובים?

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

• איזה מענה או פתרון אפשר לתת לחולשות של SPA

1. אינדקס בגוגל

2. שכל עמוד יקבל URL משלו למניעת בעיות.

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

• האם מהירות הגלישה באתר הרצוי חיונית לכם?

לדוגמה, אם האתר שלכם מכיל תוכן מגוון כגון תמונות ואייקונים שונים, יכול להיות שתרצו להשקיע דווקא בדרך הישנה ולא ב-SPA.

• הצוות שלכם חייב להיות מנוסה בעבודה עם SPA

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

איזו בעיה עלולה להיווצר בגלל URL קבוע באתרי SPA?

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

למה מהירות הגלישה חיונית

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

הדרך הישנה מול החדשה

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