Vue'de Streaming Markdown: LLM Tokenlerini Titresiz Render Etmek

Bir AI sohbet uygulaması yaptığında kaçınılmaz bir soruna çarparısın: LLM cevapları Server-Sent Events (SSE) üzerinden token token gelir, sen de `content += token` diye ekliyorsun, sonra hesaplanmış bir özellik (computed property) `marked.parse(content)` çağırıyor. Kısa cevaplar için sorun yok. Ama 3000 token, tablo, kod bloğu ve Mermaid diyagramı içeren bir cevap? O zaman saniyede onlarca kez yeniden render olur, ekran titrer, kaydırma konumu zıplar, diyagramlar kapanış işareti gelene kadar kayboluverir.

Sorun aslında Markdown değil, zamanlamadır. `marked`, `markdown-it` ve `react-markdown` bitmış bir belgeyi render etmek için harika. Onların sözleşmesi basit: geçerli Markdown ver, HTML ya da bileşen ağacı al. Ama LLM akışı o sözleşmeyi sürekli bozar. Akış ortasında kapalı olmayan `**`, tamamlanmamış liste öğeleri, hatta geçersiz kod blok başlangıçları vardır.

markstream-vue gibi akış-merkezli bir renderer bu sorunu kökünden çözer. Renderer her token geldiğinde tüm metni yeniden parse etmek yerine, yalnızca yeni kısmı işler. Kısmi Markdown yapılarını akıllıca yönetir: kapalı olmayan başlık, liste ya da kod bloğunun sonlanmadığını bilir ve HTML'i buna göre oluşturur. Sonuç? Hiç titreme yok, kaydırma düzgün, diyagramlar anında görünür.

Temel fark şu: geleneksel renderer "bitmemiş Markdown" ile başa çıkamaz, ama streaming renderer bunu tasarımın merkezine koyar. Her token eklendiğinde yalnızca değişen bölüm güncellenir. Ana iş parçacığı meşgul olmaz, kullanıcı deneyimi pürüzsüz kalır.

Eğer Vue ile gerçek zamanlı AI arayüzü yapıyorsan ve cevaplar uzunsa, token akışını doğru yönetmek performans ve kullanıcı memnuniyetinde büyük fark yaratır.