renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Başvuru dokümanı
  • renderToStaticMarkup(reactNode, options?)
• Kullanım
  • Bir etkileşimli olmayan React ağacını HTML olarak string’e çevirme

Başvuru dokümanı

renderToStaticMarkup(reactNode, options?)

Sunucuda, uygulamanızı HTML’ye dönüştürmek için renderToStaticMarkup yöntemini çağırın.

import { renderToStaticMarkup } from 'react-dom/server';
const html = renderToStaticMarkup(<Page />);

Bu, React bileşenlerinizin etkileşimli olmayan HTML çıktısını üretecektir.

Buradan daha fazla örnek görebilirsiniz.

Parametreler

• reactNode: Bir JSX düğümü gibi HTML’ye dönüştürmek istediğiniz bir React düğümü. Örneğin, şöyle bir JSX düğümü <Page />.
• isteğe bağlı options: Sunucu renderı için bir obje.
  • isteğe bağlı identifierPrefix: useId tarafından oluşturulan kimlikler için React’in kullandığı string ön eki. Aynı sayfada birden fazla kök kullanırken çakışmaları önlemek için kullanışlıdır.

Dönüş Değeri

Bir HTML string’i.

Dikkat Edilmesi Gerekenler

• renderToStaticMarkup çıktısı “hydrate” edilemez.

• renderToStaticMarkup sınırlı Suspense desteğine sahiptir. Bir bileşen askıya alındığında, renderToStaticMarkup hemen yedek olarak HTML gönderir.

• renderToStaticMarkup tarayıcıda çalışır, ancak istemci kodunda kullanılması önerilmez. Bir bileşeni tarayıcıda HTML’e dönüştürmeniz gerekiyorsa, HTML’yi bir DOM düğümüne render ederek alın.

Kullanım

Bir etkileşimli olmayan React ağacını HTML olarak string’e çevirme

Sunucu yanıtınızla birlikte gönderebileceğiniz bir HTML string’i olarak uygulamanızı renderToStaticMarkup ile HTML’ye dönüştürün:

import { renderToStaticMarkup } from 'react-dom/server';
// Rota işleyicisinin sözdizimi, kullandığınız arka uç çatısına bağlıdır
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

Bu, React bileşenlerinizin başlangıç olarak etkileşimsiz HTML çıktısını üretecektir.