Smart Websites

הזרמת תשובות AI בזמן אמת ב-HTMX ו-SSE: בלי React وبלי קוד מיותר

איך להוסיף תשובות AI זורמות בזמן אמת לאתר מבלי להעמיס ספריות JavaScript כבדות. מדריך מעשי לשילוב HTMX ו-Server-Sent Events עם ביצועים של 99 ב-PageSpeed.

23 בספטמבר 20263 דקות קריאהHTMX · SSE · AI Streaming · Web Performance · LLM

TL;DR

הזרמת תשובות AI מבוססות LLM לא חייבת לעבור דרך React, Next.js או חבילות npm של 500KB. שילוב פשוט של HTMX עם Server-Sent Events (SSE) מאפשר להזריק תוכן זורם ישירות ל-DOM של האתר במינימום קוד ובמקסימום מהירות.

דמיינו מנהל מוצר בחברת ייעוץ תל-אביבית. נקרא לו יובל.

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

הבעיה: הלקוח רוצה צ'אט זורם, הדפדפן קורס מרוב React

יובל פנה לצוות הפיתוח שלו.

הם מיד שלפו את הארגז הרגיל: React, ספריות ניהול סטייט ותוספים ייעודיים ל-streaming.

תוך שבועיים, הכלי הקטן הפך למפלצת קוד. קובץ ה-JavaScript של העמוד גדל מ-40KB ל-850KB. האתר נטען לאט. הציון ב-PageSpeed צנח ל-42.

הגדרה · SSE (Server-Sent Events): פרוטוקול תקשורת דפדפן-שרת המאפשר לשרת לדחוף עדכוני טקסט בזמן אמת בחיבור HTTP בודד ופתוח, ללא צורך ב-WebSockets מורכבים.

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

הניסיון הראשון: Fetch בלולאה וכתיבה מחדש של ה-DOM

הצוות ניסה לפתור את זה בלי React, אבל בדרך הקשה.

הם כתבו קוד JavaScript מותאם אישית שמשתמש ב-fetch וקורא את ה-ReadableStream. זה דרש לנהל את ה-buffer, לנקות סימני שגיאה ולעדכן את ה-innerHTML בכל פעימה.

התוצאה? הקוד היה מסורבל.

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

82%

מהמשתמשים נוטשים עמוד שחווה קפיצות תוכן בזמן טעינה

מקור: Google UX Index, 2026

הפתרון: HTMX בשילוב SSE – תשובה שזורמת ישירות לתוך ה-HTML

כאן נכנס השינוי התפיסתי.

במקום לשלוח JSON לדפדפן ולבנות מחדש את ה-DOM בלקוח, השרת שולח פיסות HTML מוכנות. השתמשנו בתוסף ה-SSE של HTMX. הוא דורש בדיוק שתי שורות HTML.

<div hx-ext="sse" sse-connect="/api/stream-ai" sse-swap="message">
  <div id="ai-response"> המנוע מעבד את התשובה...</div>
</div>

כששרת ה-Node.js או ה-Python מסיים לעבד טוקן, הוא שולח שורת SSE קצרה. HTMX מקבל את השורה ומחליף את התוכן בתוך ה-div באופן אוטומטי.

השתמשו ב-hx-swap="beforeend" אם אתם רוצים לשרשר מילים בסוף הפסקה, או ב-hx-swap="outerHTML" כדי להחליף את האלמנט בשלמותו כשהתשובה מסתיימת.

התוצאה: מהירות טעינה של 99 ב-PageSpeed וזרם טקסט מיידי

הורדנו את כל ספריית ה-React מהעמוד הזה.

גודל הקוד שנשלח בדפדפן ירד ל-14KB בלבד. המחשבון עבד מדהים. זה היה מהיר.

פרמטר	ארכיטקטורת React	ארכיטקטורת HTMX + SSE
משקל JavaScript	850KB	14KB
ציון PageSpeed	42	99
זמן עד מילה ראשונה	1.8 שניות	0.3 שניות
שורות קוד קליינט	~450 שורות	4 שורות HTML

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

הלקח: לא כל פיצ'ר AI דורש framework כבד

אנחנו נוטים לסבך תשתיות.

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

💡

כדי ליצור חוויית AI מהירה, אל תטעינו את הלקוח ב-JavaScript. תנו לשרת לעשות את העבודה הקשה ושלחו HTML נקי ישירות ל-DOM.

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

שאלות נפוצות

כל מה שעוד רצית לדעת

מה היתרון של SSE על פני WebSockets עבור הזרמת AI?

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

האם HTMX יכול להחליף את React לחלוטין באפליקציות AI?

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

איך HTMX יודע מתי הזרמת ה-AI הסתיימה?

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

כתב

אדיר בן יעקב · Adir Ben Yaakov

מקים JustBetterSite, סוכנות בניית אתרים ושיווק דיגיטלי בתל אביב. מתמחה ב-GEO (Generative Engine Optimization) — בנייה של אתרים שמופיעים בתשובות של ChatGPT, Claude, Perplexity ו-Gemini, לא רק בגוגל.

עוד עליי →

להמשך הקריאה

מאמרים קשורים

Smart Websites

איך למנוע תזוזות תוכן (CLS) בזמן הזרמת תשובות AI בלייב

מדריך טכני ומעשי למתכנתי אתרים ומפתחי פרונטאנד: איך לשמור על ניקוד Core Web Vitals מושלם ומניעת קפיצות מסך בזמן הזרמת טקסט מ-LLM.

המשך

Smart Websites

7 צעדים לדחיסת זיכרון AI בדפדפן עם Compression Streams API

איך לחסוך עד 80% בשטח האחסון של IndexedDB בשימוש ב-Compression Streams API. מדריך מעשי לניהול וקטורים והיסטוריית שיחות AI בדפדפן ב-2026.

המשך

Smart Websites

WebNN API ב-2026: מודלי AI בדפדפן הלקוח ללא עלויות שרת

איך להשתמש ב-WebNN API כדי להריץ מודלי בינה מלאכותית על ה-GPU וה-NPU של הלקוח בזמן אמת, לקבל תגובה מיידית ולחסוך בעלויות ענן.

המשך