פרונטאנד (Frontend) הוא החלק של האתר שרץ בדפדפן של הגולש — מה שרואים ומה שקורה כשלוחצים: מבנה העמוד, העיצוב, האנימציות, הטפסים. בקאנד (Backend) הוא החלק שרץ על השרת — הקוד שמחליט איזה תוכן להחזיר, שומר ושולף נתונים, מנהל משתמשים ומדבר עם מערכות אחרות. בכל אתר דינמי יש את שניהם, והם מדברים זה עם זה כל הזמן.
פרונטאנד ובקאנד: איפה כל אחד רץ
MDN מסבירה את ההבדל לפי המקום שבו הקוד רץ: קוד בצד הלקוח רץ בתוך הדפדפן, עם גישה מוגבלת מאוד למחשב של הגולש; קוד בצד השרת רץ על השרת, עם גישה מלאה למערכת שלו. מזה נגזר כל השאר:
| פרונטאנד | בקאנד | |
|---|---|---|
| איפה רץ | בדפדפן של הגולש | על השרת |
| שפות | HTML, CSS, JavaScript | PHP, Python, Node.js, Ruby, C# ועוד |
| אחראי על | מבנה, עיצוב, אינטראקציה, נגישות, התאמה למובייל | נתונים, לוגיקה עסקית, הרשאות, חיבורים, אבטחה |
| מה משפיע על המהירות | משקל הקבצים, סקריפטים, תמונות | זמן תגובת השרת, שאילתות, מטמון |
| מי רואה את הקוד | כל גולש יכול לראות אותו | רק מי שיש לו גישה לשרת |
JavaScript היא היוצאת מן הכלל: היא רצה גם בדפדפן וגם על השרת (ב-Node.js).
דוגמה: מה קורה כששולחים טופס צור קשר
- פרונטאנד: הטופס מוצג, השדות מסומנים כראוי לקוראי מסך, והדפדפן בודק שהמייל כתוב נכון לפני השליחה.
- בקאנד: השרת מקבל את הנתונים, בודק אותם שוב (כי בדיקה בדפדפן אפשר לעקוף), מסנן ספאם, שומר את הפנייה ושולח מייל.
- פרונטאנד: הגולש רואה הודעת "תודה" או שגיאה ברורה.
שימו לב לשלב 2: כל בדיקה שחשובה לאבטחה חייבת להיות בבקאנד. קוד בדפדפן הוא של הגולש — הוא יכול לשנות אותו או לעקוף אותו לגמרי. זו גם הסיבה שמפתחות API וסיסמאות לא נכנסים לקוד של הפרונטאנד אף פעם.
איך זה נראה בוורדפרס
- הבקאנד הוא וורדפרס עצמה: קוד PHP שרץ על השרת, שולף את התוכן ממסד הנתונים ובונה את עמוד ה-HTML.
- הפרונטאנד הוא מה שהתבנית מוציאה: ה-HTML, קובצי ה-CSS וה-JavaScript שהדפדפן מקבל.
- "ממשק הניהול" של וורדפרס — שגם הוא נקרא לפעמים בבלבול "בקאנד" — הוא בעצם עוד פרונטאנד, לעורכי האתר במקום לגולשים.
יש גם ארכיטקטורה שבה מפרידים את השניים לגמרי: וורדפרס משמשת רק כבקאנד שמנהל תוכן ומגיש אותו דרך API, ואתר נפרד בונה את הפרונטאנד. זה נקרא Headless CMS, ויש לו יתרונות — אבל גם עלות תחזוקה כפולה.
למה זה רלוונטי לבעל עסק
כשמזמינים אתר
אתר "יפה" הוא עבודת פרונטאנד. אתר שעובד — טפסים שמגיעים, חיפוש שמחזיר תוצאות נכונות, הרשאות, חיבור לסליקה — הוא עבודת בקאנד. הצעת מחיר שמפרטת רק עיצוב ועמודים, בלי לדבר על מה קורה מאחורי הקלעים, משאירה חצי מהפרויקט לא מוגדר. פירטתי במאמר מה צריכה לכלול הצעת מחיר.
כשהאתר איטי
אתר יכול להיות איטי בגלל הבקאנד (השרת לוקח זמן לבנות את העמוד) או בגלל הפרונטאנד (העמוד מגיע מהר, אבל כבד מדי להצגה). התיקון שונה לגמרי, ולכן מאבחנים קודם — ראו TTFB לצד השרת ומשאבים שחוסמים תצוגה לצד הדפדפן.
כשמחפשים מפתח
מפתח פרונטאנד ומפתח בקאנד הם התמחויות שונות. מי שעושה את שניהם נקרא מפתח פול סטאק.
שאלות נפוצות
איזה חלק חשוב יותר?
אין אתר טוב בלי שניהם. פרונטאנד גרוע מבריח גולשים; בקאנד גרוע מאבד פניות, הזמנות ונתונים.
האם בוני אתרים כמו וויקס הם פרונטאנד?
הם נותנים לכם לערוך את הפרונטאנד, ומנהלים את הבקאנד בשבילכם. לכן אין לכם שליטה על מה שקורה בשרת — וזה גם היתרון וגם המגבלה.
אני עובד בשני הצדדים — מהתבנית ועד מסד הנתונים והחיבורים למערכות אחרות — ולכן גם רואה את התמונה המלאה כשמשהו לא עובד. בעמוד אתרים מתקדמים מפורט איך אני בונה מערכות כאלה, ואפשר לספר לי על הפרויקט.
אהבתם את המאמר?
