ReactDOMServer

آبجکت ReactDOMServer به شما این امکان را می‌دهد که کامپوننت‌ها را به مارکآپ استاتیک رندر کنید. به طور معمول روی یک سرور Node استفاده می‌شود:

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

بررسی اجمالی

متدهای زیر می‌توانند در هر دوی محیط‌های مرورگر و سرور استفاده شوند:

  • renderToString()
  • renderToStaticMarkup()

این متدهای اضافی نیز به یک پکیج (stream) وابسته بوده و فقط روی سرور قابل دسترسی هستند و در مرورگر کار نخواهند کرد:

  • renderToNodeStream()
  • renderToStaticNodeStream()

مرجع

renderToString()

ReactDOMServer.renderToString(element)

یک المان React را در HTML اولیۀ آن رندر می‌کند. ری اکت یک رشتۀ HTML را برمی‌گرداند. شما می‌توانید از این متد برای تولید HTML روی سرور و فرستادن مارکآپ به پایین روی درخواست اولیه استفاده کنید تا بارگذاری صفحات با سرعت بیشتری انجام پذیرد و به موتورهای جستجو اجازه دهد جهت اهداف SEO در صفحات شما حرکت کند.

اگر شما ReactDOM.hydrate() را روی یک node که این مارکآپ رندر روی سرور را از پیش دارد، فراخوانی کنید، React آن را حفظ کرده و فقط کنترل کننده‌های رویداد را متصل می‌کند و به شما اجازه می‌دهد یک تجربۀ اجرای توانمند داشته باشید.

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

مشابه renderToString بوده با این تفاوت که DOM اضافی مانند data-reactroot نمی‌سازد. اگر بخواهید از React به عنوان یک تولید کنندۀ پیج استاتیک ساده استفاده کنید، بسیار کارآمد خواهد بود چون کنار گذاشتن attribute های اضافی می‌تواند چند بایتی برایتان صرفه جویی کند.

اگر برنامه دارید که از React برای کار مشتری و تعاملی کردن مارکآپ استفاده کنید، از این متد استفاده نکنید. به جای آن، renderToString روی سرور و ReactDOM.hydrate() در سمت مشتری استفاده کنید.

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

یک المان React را در HTML اولیۀ آن رندر می‌کند. یک stream قابل خواندن را برمی‌گراند که یک رشتۀ HTML را به عنوان خروجی می‌دهد. خروجی HTML این stream دقیقا برابر با چیزی است که ReactDOMServer.renderToString برمی‌گرداند. شما می‌توانید از این متد برای تولید HTML روی سرور و فرستادن مارکآپ به پایین روی درخواست اولیه استفاده کنید تا بارگذاری صفحات با سرعت بیشتری انجام پذیرد و به موتورهای جستجو اجازه دهد جهت اهداف SEO در صفحات شما حرکت کند.

اگر شما ReactDOM.hydrate() را روی یک node که این مارکآپ رندر روی سرور را از پیش دارد، فراخوانی کنید، React آن را حفظ کرده و فقط کنترل کننده‌های رویداد را متصل می‌کند و به شما اجازه می‌دهد یک تجربۀ اجرای توانمند داشته باشید.

نکته: این API برای مرورگر قابل استفاده نبوده و فقط برای سرور است. Stream برگردانده شده توسط این متد، یک stream یک بایتی کدنویسی شده در utf-8 است. اگر شما به یک stream در کدنویسی دیگری نیاز دارید، نگاهی به پروژه‌ای مانند iconv-lite بیندازید که تبدیل stream ها را برای تبدیل کدنویسی آنها فراهم کرده است.

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

مشابه renderToNodeStream بوده با این تفاوت که DOM اضافی مانند data-reactroot نمی‌سازد. اگر بخواهید از React به عنوان یک تولید کنندۀ پیج استاتیک ساده استفاده کنید، بسیار کارآمد خواهد بود چون کنار گذاشتن attribute های اضافی می‌تواند چند بایتی برایتان صرفه جویی کند.

خروجی HTML این stream دقیقا برابر با چیزی است که ReactDOMServer.renderToStaticMarkup برمی‌گرداند.

اگر برنامه دارید که از React برای کار مشتری و تعاملی کردن مارکآپ استفاده کنید، از این متد استفاده نکنید. به جای آن، renderToNodeStream روی سرور و ReactDOM.hydrate() در سمت مشتری استفاده کنید.

نکته: این API برای مرورگر قابل استفاده نبوده و فقط برای سرور است. Stream برگردانده شده توسط این متد، یک stream یک بایتی کدنویسی شده در utf-8 است. اگر شما به یک stream در کدنویسی دیگری نیاز دارید، نگاهی به پروژه‌ای مانند iconv-lite بیندازید که تبدیل stream ها را برای تبدیل کدنویسی آنها فراهم کرده است.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5٫00 out of 5)
Loading...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit