renderToString API’si

renderToString — bu React tomonidan taqdim etilgan server tomonidagi render qilish API’sidir, bu bizga React komponentini serverda HTML satriga render qilish imkonini beradi. Ushbu API sinxron ishlaydi va to’liq render qilingan HTML satrini qaytaradi, bu esa keyinchalik klientga javob sifatida yuborilishi mumkin. renderToString odatda server tomonidan render qilingan React ilovalarida ishlatiladi va bu, o’z navbatida, ishlash samaradorligi, SEO va foydalanish imkoniyati qulayligini yaxshilashga yordam beradi.

Foydalanish

renderToStringdan foydalanish uchun react-dom/server paketidan renderToString funksiyasini import qilishingiz kerak. Keyin, siz ushbu funksiyani React komponenti bilan argument sifatida chaqirishingiz mumkin. Bu esa sizga to’liq render qilingan HTML’ni satr sifatida qaytaradi. Quyida renderToStringdan foydalanib, oddiy React komponentini render qilish misoli keltirilgan:

import React from "react";
import { renderToString } from "react-dom/server";
 
function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a simple React app.</p>
    </div>
  );
}
 
const html = renderToString(<App />);
console.log(html);

Ushbu misolda biz oddiy App komponentini yaratamiz va uni renderToString funksiyasinining argumenti sifatida chaqiramiz. Funksiya to’liq render qilingan HTM’Lni qaytaradi, bu esa klientga yuborilishi mumkin.

Bu qanday ishlaydi

renderToString funksiyasi React elementlari daraxtidan o’tadi, ularni real DOM elementlarining satr ko’rinishiga o’giradi va nihoyat, satrni chiqaradi.

Eslatib o’tish joiz, React’da <div> quyidagicha o’girilib yoziladi:

React.createElement("div", {}, "Hello, world!");

Bu natijada chiqadigan qiymat:

{
  type: "div",
  props: {},
  children: ["Hello, world!"]
}

Buni avvalgi boblarda muhokama qilganmiz, lekin biz endi qilishimiz kerak bo’lgan muhokama uchun buni eslatib o’tishimiz foydadan holi emas. Asosan, JSX quyidagi oqim orqali HTML’ga o’giriladi:

JSX → React.createElement → React element → renderToString(React element) → HTML

renderToString API’si sinxron va blok qiluvchi bo’lib, ya’ni uni to’xtatib yoki pauza qilib bo’lmaydi. Agar komponentlar daraxti ko’p darajalarda chuqur bo’lsa, u ko’p jarayonni talab qilishi mumkin. Odatda server bir nechta klientlarga xizmat ko’rsatadi, shuning uchun renderToString har bir klient uchun chaqirilishi mumkin, agar biron bir turdagi kesh mavjud bo’lmasa, bu tezda event loop’ni to’sib qo’yishi va tizimga ortiqcha yuklama(overload) qilishi mumkin.

Kod nuqtai nazaridan, renderToString bu ko’rinishni o’zgartiradi:

React.createElement(
  "section",
  { id: "list" },
  React.createElement("h1", {}, "This is my list!"),
  React.createElement(
    "p",
    {},
    "Isn't my list amazing? It contains amazing things!"
  ),
  React.createElement(
    "ul",
    {},
    amazingThings.map((t) => React.createElement("li", { key: t.id }, t.label))
  )
);

Natijada, quyidagi HTML’ga aylantiriladi:

<section id="list">
  <h1>This is my list!</h1>
  <p>Isn't my list amazing? It contains amazing things!</p>
  <ul>
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
  </ul>
</section>

React deklarativ bo’lgani sababli va React elementlari deklarativ abstraksiyalar sifatida, ularning daraxti boshqa har qanday daraxtga — bu holatda HTML elementlarining satr ko’rinishidagi daraxtga aylantirilishi mumkin.

Kamchiliklari

renderToString bir qancha afzalliklarga ega bo’lishiga qaramay, ayrim kamchiliklari ham mavjud

Ishlash samaradorligi(Performance):

• renderToStringning asosiy kamchiliklaridan biri katta React ilovalari uchun sekin bo’lishi mumkinligidir. Ushbu funksiya sinxron ravishda ishlaydi, bu esa event loop’ni bloklab, serverning javobsiz bo’lib qolishiga olib kelishi mumkin. Bu muammo ayniqsa yuqori trafikga ega bo’lgan ilovalarda dolzarb bo’ladi, chunki ko’p foydalanuvchilar serverga bir vaqtning o’zida murojaat qilishi mumkin.
• Shuningdek, renderToString butunlay render qilingan HTML satrini qaytaradi, bu katta ilovalar uchun xotira sarfini oshirib, javob berish vaqtini sekinlashtirishi mumkin. Katta yuklama ostida bu holat server jarayonining to’xtashiga olib kelishi mumkin.

Uzluksiz uzatishlik(streaming) qo’llab-quvvatlanmaydi

• Boshqa cheklovlardan biri “streaming” imkoniyatining yo’qligidir. renderToString barcha HTML satrini avval to’liq generatsiya qilishi kerak, shundan keyingina klientga jo’natish mumkin bo’ladi.
• Bu esa birinchi baytga (TTFB) erishish vaqtini sekinlashtiradi, ya’ni klient HTML’ni olishni boshlash uchun uzoqroq kutishga majbur bo’ladi.
• Ushbu cheklov ayniqsa katta hajmdagi kontentga ega bo’lgan ilovalarda seziladi, chunki barcha HTML yaratilgunicha hech qanday kontent ko’rsatilmaydi.

renderToStringga alternativlar

Katta ilovalar yoki renderToString ning kamchiliklari muammo bo’lib qoladigan vaziyatlarda, React server tomonida render qilish uchun alternativ API’larni taklif etadi, masalan renderToPipeableStream va renderToReadableStream kabi. Ushbu API’lar Node.js stream yoki brauzer streamni qaytaradi, bu esa yaxshiroq ishlash samaradorligini va uzluksiz uzatishlik imkoniyatini ta’minlaydi. Biz bular haqida keyingi mavzularda batafsil to’xtalamiz