renderToString

const html = renderToString(reactNode, options?)

• Başvuru dokümanı
  • renderToString(reactNode, options?)
• Kullanım
  • Bir React ağacını HTML olarak bir string’e dönüştürme
• Alternatifler
  • renderToString’den sunucuda bir streaming render’a geçiş yapma
  • renderToString’den sunucuda statik önceden render’a geçiş yapma
  • İstemci kodundan renderToString’i kaldırma
• Sorun giderme
  • Bir bileşen askıya alındığında, HTML her zaman bir fallback içerir

Başvuru dokümanı

renderToString(reactNode, options?)

Sunucuda, uygulamanızı HTML’e dönüştürmek için renderToString çağrısı yapınız.

import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);

İstemci üzerinde, sunucu tarafından oluşturulan HTML’i etkileşimli hale getirmek için hydrateRoot çağrısı yapınız.

Aşağıda daha fazla örnek görebilirsiniz.

Parametreler

• reactNode: HTML’e dönüştürmek istediğiniz bir React düğümü. Örneğin, <App /> gibi bir JSX düğümü.

• isteğe bağlı options: Sunucu render’ı için bir nesne.

  • isteğe bağlı identifierPrefix: React’in useId ile oluşturduğu ID’ler için kullandığı bir string öneki. Aynı sayfada birden fazla kök kullanıldığında çakışmaları önlemek için faydalıdır. hydrateRoot fonksiyonuna geçirilen aynı önek olmalıdır.

Dönüş değeri

Bir HTML string’i.

Uyarılar

• renderToString sınırlı Suspense desteğine sahiptir. Bir bileşen askıya alınırsa, renderToString geri dönüşünü HTML olarak hemen gönderir.

• renderToString tarayıcıda çalışır, ancak istemci kodunda kullanılması tavsiye edilmez.

Kullanım

Bir React ağacını HTML olarak bir string’e dönüştürme

Uygulamanızı sunucu yanıtınızla birlikte gönderebileceğiniz bir HTML string’ine dönüştürmek için renderToString öğesini çağırınız:

import { renderToString } from 'react-dom/server';

// Rota işleyici sözdizimi backend framework'ünüze bağlıdır
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

Bu, React bileşenlerinizin etkileşimli olmayan ilk HTML çıktısını üretecektir. İstemcide, sunucu tarafından oluşturulan HTML’i hydrate etmek ve etkileşimli hale getirmek için hydrateRoot çağırmanız gerekecektir.

Alternatifler

renderToString’den sunucuda bir streaming render’a geçiş yapma

renderToString, hemen bir string döndürdüğü için, içerik yüklenirken streaming yapmayı desteklemez.

Mümkün olduğunda, bu tam özellikli alternatifleri kullanmanızı öneririz:

• Eğer Node.js kullanıyorsanız, renderToPipeableStream kullanınız.
• Deno veya Web Streams ile modern bir edge çalışma zamanı kullanıyorsanız,renderToReadableStream’i kullanabilirsiniz.

Sunucu ortamınız akışları desteklemiyorsa renderToString kullanmaya devam edebilirsiniz.

renderToString’den sunucuda statik önceden render’a geçiş yapma

renderToString, hemen bir string döndürdüğü için, statik HTML oluşturmak için veri yüklenmesini beklemeyi desteklemez.

Bu tam özellikli alternatifleri kullanmanızı öneririz:

• Node.js kullanıyorsanız, prerenderToNodeStream kullanın.
• Deno veya Web Streams destekleyen modern bir edge runtime kullanıyorsanız, prerender kullanın.

Statik site oluşturma ortamınız stream’leri desteklemiyorsa, renderToString kullanmaya devam edebilirsiniz.

İstemci kodundan renderToString’i kaldırma

Bazen, renderToString istemcide bazı bileşenleri HTML’e dönüştürmek için kullanılır.

// 🚩 Gereksiz: istemcide renderToString kullanmak
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // Örneğin, "<svg>...</svg>"

İstemci üzerinde react-dom/server’ı import etmek paket boyutunuzu gereksiz yere artırır ve bundan kaçınılmalıdır. Bazı bileşenleri tarayıcıda HTML’e render etmeniz gerekiyorsa, createRoot kullanınız ve DOM’dan HTML okuyunuz:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // Örneğin, "<svg>...</svg>"

DOM’un innerHTML özelliği okunmadan önce güncellenmesi için flushSync çağrısı gereklidir.

Sorun giderme

Bir bileşen askıya alındığında, HTML her zaman bir fallback içerir

renderToString Suspense’i tam olarak desteklemez.

Bir bileşen askıya alınırsa (örneğin, lazy ile tanımlandığı veya veri getirdiği için), renderToString içeriğinin çözümlenmesini beklemeyecektir. Bunun yerine, renderToString bunun üzerindeki en yakın <Suspense> sınırını bulacak ve HTML’de fallback prop’unu render edecektir. İstemci kodu yüklenene kadar içerik görünmeyecektir.

Bunu çözmek için, önerilen streaming çözümlerinden birini kullanın. Sunucu tarafı render’ı için, içerik sunucuda çözülürken parça parça akıtılabilir, böylece kullanıcı istemci kodu yüklenmeden önce sayfanın kademeli olarak doldurulduğunu görür. Statik site oluşturma için, tüm içerik çözülene kadar bekleyebilir ve ardından statik HTML’i oluşturabilir.