React Streaming: Foydalanuvchi tajribasini optimallashtirish uchun progressiv server-side rendering

Veb-dasturlash olamida tezkor va sezgir foydalanuvchi tajribasini taqdim etish juda muhim. Foydalanuvchilar veb-saytlarning tez yuklanishini va kechikishlarsiz interaktiv bo'lishini kutishadi. Foydalanuvchi interfeyslarini yaratish uchun mashhur JavaScript kutubxonasi bo'lgan React ushbu muammoni hal qilish uchun Oqimli Server-Side Rendering (SSR) deb nomlangan kuchli usulni taklif qiladi. Ushbu maqola React Streaming SSR tushunchasini, uning afzalliklari, amalga oshirilishi va veb-sayt unumdorligi hamda foydalanuvchi tajribasiga ta'sirini chuqur o'rganadi.

Server-Side Rendering (SSR) nima?

An'anaviy mijoz tomonida rendering (CSR) brauzerning HTML, JavaScript va CSS fayllarini yuklab olishini va keyin kontentni mijoz tomonida render qilishini o'z ichiga oladi. Moslashuvchan bo'lishiga qaramay, bu yondashuv dastlabki renderning kechikishiga olib kelishi mumkin, chunki foydalanuvchi har qanday kontentni ko'rishdan oldin barcha resurslarning yuklanishini va JavaScriptning bajarilishini kutishi kerak. Boshqa tomondan, SSR React komponentlarini serverda render qiladi va to'liq render qilingan HTMLni mijozga yuboradi. Bu dastlabki yuklanish vaqtining tezroq bo'lishiga olib keladi, chunki brauzer darhol ko'rsatilishi mumkin bo'lgan to'liq shakllangan HTMLni oladi.

An'anaviy SSRning cheklovlari

An'anaviy SSR CSRga nisbatan sezilarli yaxshilanishni taklif qilsa-da, uning o'z cheklovlari mavjud. An'anaviy SSRda mijozga har qanday HTML yuborilishidan oldin butun dastur serverda render qilinishi kerak. Bu, ayniqsa, bir nechta komponentlar va ma'lumotlarga bog'liqliklari bo'lgan murakkab dasturlar uchun to'siq bo'lishi mumkin. Birinchi baytgacha bo'lgan vaqt (TTFB) yuqori bo'lishi mumkin, bu esa foydalanuvchi uchun sekinlik sifatida qabul qilinishiga olib keladi.

React Streaming SSR: Progressiv yondashuv

React Streaming SSR progressiv yondashuvni qo'llash orqali an'anaviy SSRning cheklovlarini yengib o'tadi. Butun dasturning serverda render qilinishini kutish o'rniga, Streaming SSR render qilish jarayonini kichikroq bo'laklarga ajratadi va bu bo'laklarni ular mavjud bo'lishi bilan mijozga oqim bilan yuboradi. Bu brauzerga kontentni ancha oldinroq ko'rsatishni boshlash imkonini beradi, bu esa seziladigan unumdorlikni yaxshilaydi va TTFBni kamaytiradi. Buni restoranda ovqatni bosqichma-bosqich tayyorlashdek tasavvur qiling: avval gazak, keyin asosiy taom va nihoyat shirinlik tortiladi, butun ovqatning bir vaqtda tayyor bo'lishini kutish o'rniga.

React Streaming SSRning afzalliklari

React Streaming SSR veb-sayt unumdorligi va foydalanuvchi tajribasi uchun ko'plab afzalliklarni taklif qiladi:

• Tezroq dastlabki yuklanish vaqti: HTML bo'laklarini mijozga oqim bilan yuborish orqali brauzer kontentni ancha oldinroq ko'rsatishni boshlashi mumkin, natijada tezroq seziladigan yuklanish vaqti va yaxshilangan foydalanuvchi jalb etilishi ta'minlanadi.
• Yaxshilangan birinchi baytgacha bo'lgan vaqt (TTFB): Streaming SSR butun dasturning render qilinishini kutish o'rniga, dastlabki HTML bo'lagini tayyor bo'lishi bilanoq yuborib, TTFBni kamaytiradi.
• Yaxshilangan foydalanuvchi tajribasi: Tezroq dastlabki yuklanish vaqti yaxshiroq foydalanuvchi tajribasiga olib keladi, chunki foydalanuvchilar kontentning paydo bo'lishini kutib o'tirmaydilar.
• Yaxshiroq SEO: Qidiruv tizimlari kontentni yanada samaraliroq skanerlashi va indekslashi mumkin, chunki HTML serverda tayyor holda bo'ladi.
• Progressiv gidratatsiya: Streaming SSR progressiv gidratatsiyaga imkon beradi, bunda mijoz tomonidagi React kodi HTML bo'laklari oqim bilan yuborilishi bilan asta-sekin hodisa tinglovchilarini biriktiradi va dasturni interaktiv qiladi.
• Resurslardan foydalanishni yaxshilash: Render qilish jarayonini kichikroq bo'laklarga ajratish orqali Streaming SSR serverdagi resurslardan foydalanishni yaxshilashi mumkin.

React Streaming SSR qanday ishlaydi

React Streaming SSR mijozga HTML bo'laklarini oqim bilan yuborish uchun ReactDOMServer.renderToPipeableStream() API-sidan foydalanadi. Ushbu API serverning javob obyektiga yo'naltirilishi mumkin bo'lgan o'qiladigan oqimni qaytaradi. Bu qanday ishlashining soddalashtirilgan tasviri:

1. Server sahifa uchun so'rovni qabul qiladi.
2. Server React dasturini oqimga render qilish uchun ReactDOMServer.renderToPipeableStream() ni chaqiradi.
3. React komponentlari render qilinishi bilan oqim HTML bo'laklarini chiqara boshlaydi.
4. Server oqimni javob obyektiga yo'naltiradi va HTML bo'laklarini mijozga yuboradi.
5. Brauzer HTML bo'laklarini qabul qiladi va ularni progressiv ravishda ko'rsatishni boshlaydi.
6. Barcha HTML bo'laklari qabul qilingandan so'ng, brauzer React dasturini gidratatsiya qiladi va uni interaktiv holga keltiradi.

React Streaming SSRni amalga oshirish

React Streaming SSRni amalga oshirish uchun sizga Node.js serveri va React dasturi kerak bo'ladi. Bu yerda qadam-baqadam qo'llanma:

1. Node.js serverini sozlang: Express yoki Koa kabi freymvorkdan foydalanib Node.js serverini yarating.
2. React va ReactDOMServer-ni o'rnating: react va react-dom paketlarini o'rnating.
3. React dasturini yarating: Serverda render qilmoqchi bo'lgan komponentlar bilan React dasturini yarating.
4. ReactDOMServer.renderToPipeableStream() dan foydalaning: Server kodingizda React dasturingizni oqimga render qilish uchun ReactDOMServer.renderToPipeableStream() API-sidan foydalaning.
5. Oqimni javob obyektiga yo'naltiring: HTML bo'laklarini mijozga yuborish uchun oqimni serverning javob obyektiga yo'naltiring.
6. Xatolarni boshqaring: Render qilish jarayonida yuzaga kelishi mumkin bo'lgan har qanday xatolarni ushlash uchun xatolarni boshqarishni amalga oshiring.
7. Gidratatsiya uchun skript tegini qo'shing: Mijoz tomonida React dasturini gidratatsiya qilish uchun HTMLga skript tegini qo'shing.

Kod parchasiga misol (Server tomoni):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Kechirasiz, nimadir xato ketdi
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server http://localhost:${port} manzilida tinglanmoqda`);
});

Kod parchasiga misol (Mijoz tomoni - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

React App komponentiga misol (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Ma'lumotlar muvaffaqiyatli yuklandi!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Streaming SSRga xush kelibsiz!
      
Bu React Streaming SSRning namoyishi.
      Yuklanmoqda...
}>