ReactDOMServer

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

react-dom: Server APIs

ReactDOMServer nesnesi, bileşenleri statik işaretlemeye dönüştürmenizi sağlar. Genellikle, bir Node sunucusunda kullanılır:

// ES modules
import * as ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

Genel Bakış

Bu metotlar yalnızca Node.js Akışlarını içeren ortamlarda mevcuttur:

renderToPipeableStream()
renderToNodeStream() (Deprecated)
renderToStaticNodeStream()

Bu metotlar sadece Web Akışları’nın olduğu ortamlarda (tarayıcılar, Deno, ve bazı modern runtime lar) kullanılabilir:

renderToReadableStream()

Aşağıdaki metotlar akışları (stream) desteklemeyen ortamlarda kullanılabilir:

renderToString()
renderToStaticMarkup()

Referans

`renderToPipeableStream()`

This content is out of date.

Read the new React documentation for renderToPipeableStream.

ReactDOMServer.renderToPipeableStream(element, options)

Render a React element to its initial HTML. Returns a stream with a pipe(res) method to pipe the output and abort() to abort the request. Fully supports Suspense and streaming of HTML with “delayed” content blocks “popping in” via inline <script> tags later. Read more

If you call ReactDOM.hydrateRoot() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

let didError = false;
const stream = renderToPipeableStream(
  <App />,
  {
    onShellReady() {
      // The content above all Suspense boundaries is ready.
      // If something errored before we started streaming, we set the error code appropriately.
      res.statusCode = didError ? 500 : 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
    onShellError(error) {
      // Something errored before we could complete the shell so we emit an alternative shell.
      res.statusCode = 500;
      res.send(
        '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>'
      );
    },
    onAllReady() {
      // If you don't want streaming, use this instead of onShellReady.
      // This will fire after the entire page content is ready.
      // You can use this for crawlers or static generation.

      // res.statusCode = didError ? 500 : 200;
      // res.setHeader('Content-type', 'text/html');
      // stream.pipe(res);
    },
    onError(err) {
      didError = true;
      console.error(err);
    },
  }
);

See the full list of options.

Note:

This is a Node.js-specific API. Environments with Web Streams, like Deno and modern edge runtimes, should use renderToReadableStream instead.

`renderToReadableStream()`

This content is out of date.

Read the new React documentation for renderToReadableStream.

ReactDOMServer.renderToReadableStream(element, options);

Streams a React element to its initial HTML. Returns a Promise that resolves to a Readable Stream. Fully supports Suspense and streaming of HTML. Read more

let controller = new AbortController();
let didError = false;
try {
  let stream = await renderToReadableStream(
    <html>
      <body>Success</body>
    </html>,
    {
      signal: controller.signal,
      onError(error) {
        didError = true;
        console.error(error);
      }
    }
  );
  
  // This is to wait for all Suspense boundaries to be ready. You can uncomment
  // this line if you want to buffer the entire HTML instead of streaming it.
  // You can use this for crawlers or static generation:

  // await stream.allReady;

  return new Response(stream, {
    status: didError ? 500 : 200,
    headers: {'Content-Type': 'text/html'},
  });
} catch (error) {
  return new Response(
    '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
    {
      status: 500,
      headers: {'Content-Type': 'text/html'},
    }
  );
}

See the full list of options.

Note:

This API depends on Web Streams. For Node.js, use renderToPipeableStream instead.

`renderToNodeStream()` (Deprecated)

This content is out of date.

Read the new React documentation for renderToNodeStream.

ReactDOMServer.renderToNodeStream(element)

React öğesini başlangıç HTML’ine dönüştürün. React bir HTML string çıktısı veren bir Node.js Readable stream döndürür. Bu akışın HTML çıktısı ReactDOMServer.renderToString öğesinin döndüreceği değer ile tamamen aynıdır. Sunucuda HTML oluşturmak ve daha hızlı sayfa yüklemeleri için ilk istek üzerine işaretlemeyi göndermek ve arama motorlarının sayfalarınızı SEO amacıyla taramasını sağlamak için bu yöntemi kullanabilirsiniz.

Zaten sunucu tarafından oluşturulmuş işaretlemeye sahip olan bir birimde ReactDOM.hydrateRoot()‘i çağırırsanız, gayet performanslı bir ilk yükleme deneyimine sahip olmanız için React bunu saklayıp, yalnızca olay yöneticilerini ekleyecektir.

Not:

Yalnızca sunucu için. Bu API tarayıcıda mevcut değildir.

Bu metot utf-8 ile kodlanmış bir bayt akışı (byte stream) döndürür. Başka bir kodlamadaki bir akışa ihtiyacınız varsa, kod dönüştürme metni için dönüştürme akışları (transform streams) sağlayan iconv-lite gibi bir projeye göz atın.

`renderToStaticNodeStream()`

This content is out of date.

Read the new React documentation for renderToStaticNodeStream.

ReactDOMServer.renderToStaticNodeStream(element)

renderToNodeStream‘e benzer şekildedir. Farklı olarak, React’in data-reactroot gibi dahili olarak kullandığı fazladan DOM nitelikleri oluşturmaz. Bu, ekstra özellikleri bir kenara atarak biraz bayt kurtarabileceğiniz için, React’i basit bir statik sayfa oluşturucu olarak kullanmak isterseniz yararlıdır.

Bu akışın HTML çıktısı ReactDOMServer.renderToStaticMarkup öğesinin döndüreceği değer ile tamamen aynıdır.

İşaretlemeyi etkileşimli hale getirmek için istemci tarafında React’i kullanmayı planlıyorsanız, bu yöntemi kullanmayın. Onun yerine, sunucuda renderToNodeStream ve istemcide ReactDOM.hydrateRoot() kullanın.

Not:

Yalnızca sunucu için. Bu API tarayıcıda mevcut değildir.

Bu metot utf-8 ile kodlanmış bir bayt akışı (byte stream) döndürür. Başka bir kodlamadaki bir akışa ihtiyacınız varsa, kod dönüştürme metni için dönüştürme akışları (transform streams) sağlayan iconv-lite gibi bir projeye göz atın.

`renderToString()`

This content is out of date.

Read the new React documentation for renderToString.

ReactDOMServer.renderToString(element)

React öğesini başlangıç HTML’ine dönüştürün. React bir HTML stringi döndürür. Sunucuda HTML oluşturmak ve daha hızlı sayfa yüklemeleri için ilk istek üzerine işaretlemeyi göndermek ve arama motorlarının sayfalarınızı SEO amacıyla taramasını sağlamak için bu yöntemi kullanabilirsiniz.

Note

This API has limited Suspense support and does not support streaming.

On the server, it is recommended to use either renderToPipeableStream (for Node.js) or renderToReadableStream (for Web Streams) instead.

`renderToStaticMarkup()`

This content is out of date.

Read the new React documentation for renderToStaticMarkup.

ReactDOMServer.renderToStaticMarkup(element)

renderToString‘e benzer şekildedir. Farklı olarak, React’in data-reactroot gibi dahili olarak kullandığı fazladan DOM nitelikleri oluşturmaz. Bu, ekstra özellikleri bir kenara atarak biraz bayt kurtarabileceğiniz için, React’i basit bir statik sayfa oluşturucu olarak kullanmak isterseniz yararlıdır.

İşaretlemeyi etkileşimli hale getirmek için istemci tarafında React’i kullanmayı planlıyorsanız, bu yöntemi kullanmayın. Onun yerine, sunucuda renderToString ve istemcide ReactDOM.hydrateRoot() kullanın.

Bu sayfayı yararlı buldun mu?Bu sayfayı düzenle

Genel Bakış

Referans

renderToPipeableStream()

renderToReadableStream()

renderToNodeStream() (Deprecated)

renderToStaticNodeStream()