React Streaming: Progresīva servera puses renderēšana optimizētai lietotāja pieredzei

Tīmekļa izstrādes pasaulē ātras un atsaucīgas lietotāja pieredzes nodrošināšana ir ārkārtīgi svarīga. Lietotāji sagaida, ka vietnes ielādēsies ātri un būs interaktīvas bez kavēšanās. React, populāra JavaScript bibliotēka lietotāja interfeisu izveidei, piedāvā spēcīgu tehniku, ko sauc par Straumēšanas servera puses renderēšanu (SSR), lai risinātu šo problēmu. Šajā rakstā ir aplūkots React straumēšanas SSR jēdziens, izpētot tā priekšrocības, ieviešanu un ietekmi uz vietnes veiktspēju un lietotāja pieredzi.

Kas ir servera puses renderēšana (SSR)?

Tradicionālā klienta puses renderēšana (CSR) ietver to, ka pārlūkprogramma lejupielādē HTML, JavaScript un CSS failus un pēc tam renderē saturu klienta pusē. Lai gan šī pieeja ir elastīga, tā var novest pie aizkavētas sākotnējās renderēšanas, jo lietotājam ir jāgaida, kamēr visi resursi tiks lejupielādēti un JavaScript tiks izpildīts, pirms tiek parādīts jebkāds saturs. SSR, no otras puses, renderē React komponentus serverī un nosūta pilnībā renderētu HTML klientam. Rezultātā tiek nodrošināts ātrāks sākotnējais ielādes laiks, jo pārlūkprogramma saņem pilnībā izveidotu HTML, ko var nekavējoties parādīt.

Tradicionālā SSR ierobežojumi

Lai gan tradicionālā SSR piedāvā ievērojamu uzlabojumu salīdzinājumā ar CSR, tai ir savi ierobežojumi. Tradicionālajā SSR visa lietojumprogramma ir jārenderē serverī, pirms jebkāds HTML tiek nosūtīts klientam. Tas var būt šaurs profils, īpaši sarežģītām lietojumprogrammām ar vairākiem komponentiem un datu atkarībām. Laiks līdz pirmajam baitam (TTFB) var būt augsts, kas lietotājam var radīt uztveri par lēnumu.

Iepazīstinām ar React straumēšanas SSR: progresīva pieeja

React straumēšanas SSR pārvar tradicionālā SSR ierobežojumus, pieņemot progresīvu pieeju. Tā vietā, lai gaidītu, kamēr visa lietojumprogramma tiks renderēta serverī, straumēšanas SSR sadala renderēšanas procesu mazākos blokos un straumē šos blokus klientam, tiklīdz tie kļūst pieejami. Tas ļauj pārlūkprogrammai sākt satura rādīšanu daudz agrāk, uzlabojot uztverto veiktspēju un samazinot TTFB. Iedomājieties restorānu, kas gatavo jūsu maltīti pa posmiem: vispirms tiek pasniegta uzkoda, pēc tam pamatēdiens un visbeidzot deserts, nevis gaidot, kamēr visa maltīte būs gatava vienlaikus.

React straumēšanas SSR priekšrocības

React straumēšanas SSR piedāvā daudzas priekšrocības vietnes veiktspējai un lietotāja pieredzei:

• Ātrāks sākotnējais ielādes laiks: Straumējot HTML blokus klientam, pārlūkprogramma var sākt satura rādīšanu daudz agrāk, kā rezultātā tiek nodrošināts ātrāks uztvertais ielādes laiks un uzlabota lietotāju iesaiste.
• Uzlabots laiks līdz pirmajam baitam (TTFB): Straumēšanas SSR samazina TTFB, nosūtot sākotnējo HTML bloku, tiklīdz tas ir gatavs, nevis gaidot, kamēr visa lietojumprogramma tiks renderēta.
• Uzlabota lietotāja pieredze: Ātrāks sākotnējais ielādes laiks nodrošina labāku lietotāja pieredzi, jo lietotājiem nav jāgaida, kamēr saturs parādīsies.
• Labāks SEO: Meklētājprogrammas var efektīvāk pārmeklēt un indeksēt saturu, jo HTML ir viegli pieejams serverī.
• Progresīva hidratācija: Straumēšanas SSR nodrošina progresīvu hidratāciju, kur klienta puses React kods pakāpeniski pievieno notikumu klausītājus un padara lietojumprogrammu interaktīvu, kad tiek straumēti HTML bloki.
• Uzlabota resursu izmantošana: Sadalot renderēšanas procesu mazākos blokos, straumēšanas SSR var uzlabot resursu izmantošanu serverī.

Kā darbojas React straumēšanas SSR

React straumēšanas SSR izmanto ReactDOMServer.renderToPipeableStream() API, lai straumētu HTML blokus klientam. Šis API atgriež lasāmu straumi, ko var novadīt uz servera atbildes objektu. Šeit ir vienkāršots attēlojums par to, kā tas darbojas:

1. Serveris saņem pieprasījumu pēc lapas.
2. Serveris izsauc ReactDOMServer.renderToPipeableStream(), lai renderētu React lietojumprogrammu straumē.
3. Straumēšana sāk izstarot HTML blokus, kad tiek renderēti React komponenti.
4. Serveris novada straumi uz atbildes objektu, nosūtot HTML blokus klientam.
5. Pārlūkprogramma saņem HTML blokus un sāk tos parādīt pakāpeniski.
6. Kad visi HTML bloki ir saņemti, pārlūkprogramma hidratē React lietojumprogrammu, padarot to interaktīvu.

React straumēšanas SSR ieviešana

Lai ieviestu React straumēšanas SSR, jums būs nepieciešams Node.js serveris un React lietojumprogramma. Šeit ir soli pa solim sniegta rokasgrāmata:

1. Izveidojiet Node.js serveri: Izveidojiet Node.js serveri, izmantojot tādu ietvaru kā Express vai Koa.
2. Instalējiet React un ReactDOMServer: Instalējiet pakotnes react un react-dom.
3. Izveidojiet React lietojumprogrammu: Izveidojiet React lietojumprogrammu ar komponentiem, kurus vēlaties renderēt serverī.
4. Izmantojiet ReactDOMServer.renderToPipeableStream(): Servera kodā izmantojiet ReactDOMServer.renderToPipeableStream() API, lai renderētu savu React lietojumprogrammu straumē.
5. Novadiet straumi uz atbildes objektu: Novadiet straumi uz servera atbildes objektu, lai nosūtītu HTML blokus klientam.
6. Apstrādājiet kļūdas: Ieviesiet kļūdu apstrādi, lai uztvertu visas kļūdas, kas var rasties renderēšanas procesā.
7. Pievienojiet skripta tagu hidratācijai: Iekļaujiet HTML skripta tagu, lai hidratētu React lietojumprogrammu klienta pusē.

Koda fragmenta piemērs (servera pusē):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Jūsu React komponents

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

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Klienta puses ievades punkts
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Atvainojiet, kaut kas nogāja greizi
');
    }
  });

  setTimeout(abort, 10000); // Neobligāti: taimauts, lai novērstu nenoteiktu karāšanos
});

app.use(express.static('public')); // Apkalpojiet statiskos resursus

app.listen(port, () => {
  console.log(`Serveris klausās vietnē http://localhost:${port}`);
});

Koda fragmenta piemērs (klienta pusē - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

React lietotnes komponenta piemērs (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Dati ielādēti veiksmīgi!");
    }, 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)); // Simulēt ielādes aizkavi
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Laipni lūdzam straumēšanas SSR!
      
Šis ir React straumēšanas SSR demonstrējums.
      Ielādē...
}>