renderToString

const html = renderToString(reactNode)

• Başvuru dokümanı
  • renderToString(reactNode)
• Kullanım
  • Bir React ağacını HTML olarak bir string’e dönüştürme
• Alternatifler
  • Sunucuda renderToString’den bir akış yöntemine geçiş
  • İ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)

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ü.

• optional options: An object for server render.

  • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to hydrateRoot.

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 çatınıza 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

Sunucuda renderToString’den bir akış yöntemine geçiş

renderToString hemen bir string döndürür, bu nedenle akışı veya veri beklemeyi 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.

İ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 akış çözümlerinden birini kullanın. Sunucuda çözümlendikçe içeriği parçalar halinde yayınlayabilirler, böylece kullanıcı istemci kodu yüklenmeden önce sayfanın aşamalı olarak doldurulduğunu görür.