Vue Academy · Ders

renderToWebStream ile Akış SSR'si

renderToWebStream() ile renderToString() karşılaştırması, HTTP akışı, TTFB iyileştirmesi ve parçaları gönderme.

renderToWebStream ile Akış SSR'si, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

renderToString'den Akışa

Klasik SSR, tüm HTML'yi tek bir bayt göndermeden önce bellekte oluşturan renderToString'i kullanır. Tarayıcı, tüm sayfa hazır olana kadar bekler.

Akışlı SSR, uygulama oluşturuldukça HTML'yi parçalar hâlinde gönderir; böylece tarayıcı ayrıştırmaya daha erken başlar.

renderToWebStream Temelleri

Vue'nun sunucu oluşturucusu akış işlevleri sunar. renderToWebStream bir ReadableStream (Web Akışları API'si) döndürürken, renderToNodeStream/pipeToNodeWritable Node'un akış arayüzünü hedefler.

Bileşen ağacı çözüldükçe her parça gönderilir.

import { renderToWebStream } from 'vue/server-renderer'
import { createSSRApp } from 'vue'
import App from './App.vue'

const app = createSSRApp(App)
const stream = renderToWebStream(app)

Bir HTTP Yanıtına Akış Aktarma

Bir Node sunucusunda akışı yanıta aktarırsınız. pipeToNodeWritable kullanarak doğrudan res yazılabilir akışına yazabilir ve üretildikçe parçaları gönderebilirsiniz.

import { pipeToNodeWritable } from 'vue/server-renderer'

server.get('*', (req, res) => {
  const app = createSSRApp(App)
  res.write('<!DOCTYPE html><html><body><div id="app">')
  pipeToNodeWritable(app, {}, res)
})

Web/Uç Çalışma Ortamında Akış

Uç çalışma ortamlarında (Workers, Deno, Bun), doğrudan web akışından oluşturulan bir Response döndürürsünüz. Node akışları devreye girmez.

import { renderToWebStream } from 'vue/server-renderer'

export default async function handler(request) {
  const app = createSSRApp(App)
  const stream = renderToWebStream(app)
  return new Response(stream, {
    headers: { 'Content-Type': 'text/html' }
  })
}

Parçalar Tarayıcıya Nasıl Ulaşır

Vue düğümleri oluştururken serileştirilmiş HTML dizelerini akışa iter. HTTP katmanı bu baytları hemen gönderir. Tarayıcının artımlı HTML ayrıştırıcısı, yanıt tamamlanmadan önce görünür içeriği oluşturur.

Bu nedenle sayfa gövdesi hâlâ akış hâlindeyken kullanıcı üst bilgiyi ve yerleşimi görür.

TTFB: Temel Ölçüm

TTFB (İlk Bayta Kadar Geçen Süre), ilk yanıt baytının ulaşmasına kadar geçen süreyi ölçer.

renderToString kullanıldığında TTFB, oluşturmanın tamamı için gereken süreyi içerir. Akışta ise ilk parça sunucudan neredeyse hemen çıkar; bu da TTFB'yi büyük ölçüde düşürür ve algılanan hızı artırır.

// renderToString: client waits for full HTML
const html = await renderToString(app) // blocks
res.end(fullPage(html))

// streaming: first bytes flush right away
pipeToNodeWritable(app, {}, res) // non-blocking chunks

Akışı Yerleşim HTML'siyle Sarma

Genellikle belge kabuğunu (<head>, açılış etiketleri) uygulama akışından önce, kapanış etiketlerini ise akıştan sonra göndermeniz gerekir. Ön eki yazın, uygulamayı aktarın, ardından akış sona erdiğinde son eki yazın.

res.write('<!DOCTYPE html><head><title>App</title></head>')
res.write('<body><div id="app">')

pipeToNodeWritable(app, ctx, {
  write: (chunk) => res.write(chunk),
  end: () => res.end('</div></body></html>')
})

Akışın Ortasında Hataları Ele Alma

Baytlar gönderildikten sonra HTTP durum kodunu değiştiremezsiniz. Oluşturma hatalarını onError seçeneğiyle (veya yazılabilir akışın hata yoluyla) ele alın. Erken tespit edilen kritik hatalarda, yine de 500 yanıtı gönderebilmek için akışsız oluşturmayı tercih edin.

pipeToNodeWritable(app, ctx, {
  write: (c) => res.write(c),
  end: () => res.end(suffix),
  destroy: (err) => {
    console.error('Stream failed:', err)
    res.end() // status already sent
  }
})

Akış Sonrası Hidratasyon

Akışla gönderilen HTML, istemcide yine createSSRApp().mount() ile hidrate edilir. Vue, DOM'u yeniden oluşturmak yerine dinleyicileri mevcut DOM'a bağlar. Akış yalnızca işaretlemenin nasıl iletildiğini etkiler; hidratasyonun nasıl çalıştığını etkilemez.

// client entry
import { createSSRApp } from 'vue'
import App from './App.vue'

createSSRApp(App).mount('#app') // hydrates streamed markup

Akış ve Eşzamansız Veriler

Veriye bağlı bileşenlerde kritik verileri akıştan önce veya akış sırasında çözümleyin. Akış, ağacın bazı bölümleri birbirinden bağımsız olduğunda en iyi sonucu verir: kabuk anında akarken daha yavaş bölümler, verileri hazır oldukça oluşturulur.

// fetch critical data, then stream the rest
const app = createSSRApp(App, { initialData })
const stream = renderToWebStream(app)
return new Response(stream, {
  headers: { 'Content-Type': 'text/html' }
})

Akış Ne Zaman Seçilmeli

TTFB'nin ve algılanan hızın önemli olduğu, içerik açısından yoğun sayfalarda ve önce sabit bir kabuk gönderebildiğiniz durumlarda akışı kullanın. Küçük sayfalarda veya son durum kodu ve üst bilgiler üzerinde tam denetim gerektiğinde renderToString kullanmaya devam edin.

Hızlı Kontrol

Akışlı SSR konusundaki anlayışınızı sınayın.

Özet

Akışlı SSR'yi öğrendiniz:

renderToWebStream bir ReadableStream döndürür; Node ise pipeToNodeWritable kullanır
Ağaç oluşturuldukça parçalar gönderilir; böylece tarayıcı içeriği artımlı olarak ayrıştırır
Bu, engelleyici renderToString'e kıyasla TTFB'yi düşürür
Belge kabuğunu akışın çevresine yazın; ilk gönderimden sonraki hatalar durumu değiştiremez
createSSRApp().mount() ile hidratasyon değişmez

Sıkça Sorulan Sorular

“renderToWebStream ile Akış SSR'si” dersi ücretsiz mi?

Evet — “renderToWebStream ile Akış SSR'si” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“renderToWebStream ile Akış SSR'si” dersinde ne öğreneceğim?

renderToWebStream() ile renderToString() karşılaştırması, HTTP akışı, TTFB iyileştirmesi ve parçaları gönderme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“renderToWebStream ile Akış SSR'si” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue Suspense Bileşeni
defineAsyncComponent ile Asenkron Bileşenler
renderToWebStream ile Akış SSR'si
Ertelenmiş Hydration Stratejileri

← Vue Academy Sayfasına Dön