React Streaming: Progresivni Server-Side Rendering za Optimizirano Korisničko Iskustvo

U svijetu web razvoja, pružanje brzog i responzivnog korisničkog iskustva je najvažnije. Korisnici očekuju da se web stranice brzo učitavaju i da budu interaktivne bez odgode. React, popularna JavaScript biblioteka za izgradnju korisničkih sučelja, nudi moćnu tehniku zvanu Streaming Server-Side Rendering (SSR) za rješavanje ovog izazova. Ovaj članak se bavi konceptom React Streaming SSR-a, istražujući njegove prednosti, implementaciju i utjecaj na performanse web stranice i korisničko iskustvo.

Što je Server-Side Rendering (SSR)?

Tradicionalno client-side rendering (CSR) uključuje preglednik koji preuzima HTML, JavaScript i CSS datoteke, a zatim renderira sadržaj na strani klijenta. Iako fleksibilan, ovaj pristup može dovesti do odgođenog početnog renderiranja, jer korisnik mora pričekati da se svi resursi preuzmu i JavaScript izvrši prije nego što vidi bilo kakav sadržaj. SSR, s druge strane, renderira React komponente na serveru i šalje potpuno renderirani HTML klijentu. To rezultira bržim početnim vremenom učitavanja, jer preglednik prima potpuno oblikovani HTML koji se može odmah prikazati.

Ograničenja tradicionalnog SSR-a

Iako tradicionalni SSR nudi značajno poboljšanje u odnosu na CSR, ima svoja ograničenja. U tradicionalnom SSR-u, cijela aplikacija mora biti renderirana na serveru prije nego što se bilo koji HTML pošalje klijentu. To može biti usko grlo, posebno za složene aplikacije s više komponenti i ovisnosti o podacima. Vrijeme do Prvog Bajta (TTFB) može biti visoko, što dovodi do percipirane sporosti za korisnika.

Ulazimo u React Streaming SSR: Progresivni Pristup

React Streaming SSR prevladava ograničenja tradicionalnog SSR-a usvajanjem progresivnog pristupa. Umjesto da čeka da se cijela aplikacija renderira na serveru, Streaming SSR razbija proces renderiranja u manje dijelove i struji te dijelove klijentu čim postanu dostupni. To omogućuje pregledniku da počne prikazivati sadržaj mnogo ranije, poboljšavajući percipirane performanse i smanjujući TTFB. Zamislite to kao restoran koji priprema vaš obrok u fazama: predjelo se poslužuje prvo, zatim glavno jelo i na kraju desert, umjesto da čekate da cijeli obrok bude spreman odjednom.

Prednosti React Streaming SSR-a

React Streaming SSR nudi brojne prednosti za performanse web stranice i korisničko iskustvo:

• Brže Početno Vrijeme Učitavanja: Strujanjem HTML dijelova klijentu, preglednik može početi prikazivati sadržaj mnogo ranije, što rezultira bržim percipiranim vremenom učitavanja i poboljšanim angažmanom korisnika.
• Poboljšano Vrijeme do Prvog Bajta (TTFB): Streaming SSR smanjuje TTFB slanjem početnog HTML dijela čim je spreman, umjesto da čeka da se cijela aplikacija renderira.
• Poboljšano Korisničko Iskustvo: Brže početno vrijeme učitavanja dovodi do boljeg korisničkog iskustva, jer korisnici ne čekaju da se sadržaj pojavi.
• Bolji SEO: Tražilice mogu učinkovitije indeksirati sadržaj, jer je HTML odmah dostupan na serveru.
• Progresivna Hidracija: Streaming SSR omogućuje progresivnu hidraciju, gdje klijentski React kod postupno pričvršćuje event listener-e i čini aplikaciju interaktivnom dok se HTML dijelovi struje.
• Poboljšano Iskorištavanje Resursa: Razbijanjem procesa renderiranja u manje dijelove, Streaming SSR može poboljšati iskorištavanje resursa na serveru.

Kako Radi React Streaming SSR

React Streaming SSR koristi ReactDOMServer.renderToPipeableStream() API za strujanje HTML dijelova klijentu. Ovaj API vraća readable stream koji se može preusmjeriti na response objekt servera. Evo pojednostavljene ilustracije kako to funkcionira:

1. Server prima zahtjev za stranicu.
2. Server poziva ReactDOMServer.renderToPipeableStream() da renderira React aplikaciju u stream.
3. Stream počinje emitirati HTML dijelove dok se React komponente renderiraju.
4. Server preusmjerava stream na response objekt, šaljući HTML dijelove klijentu.
5. Preglednik prima HTML dijelove i počinje ih progresivno prikazivati.
6. Nakon što su svi HTML dijelovi primljeni, preglednik hidratizira React aplikaciju, čineći je interaktivnom.

Implementacija React Streaming SSR-a

Za implementaciju React Streaming SSR-a, trebat će vam Node.js server i React aplikacija. Evo vodiča korak po korak:

1. Postavite Node.js server: Napravite Node.js server koristeći framework poput Expressa ili Koa.
2. Instalirajte React i ReactDOMServer: Instalirajte react i react-dom pakete.
3. Napravite React aplikaciju: Napravite React aplikaciju s komponentama koje želite renderirati na serveru.
4. Koristite ReactDOMServer.renderToPipeableStream(): U svom serverskom kodu, koristite ReactDOMServer.renderToPipeableStream() API za renderiranje vaše React aplikacije u stream.
5. Preusmjerite stream na response objekt: Preusmjerite stream na response objekt servera da biste poslali HTML dijelove klijentu.
6. Rukujte pogreškama: Implementirajte rukovanje pogreškama kako biste uhvatili sve pogreške koje se mogu pojaviti tijekom procesa renderiranja.
7. Dodajte script tag za hidraciju: Uključite script tag u HTML za hidratizaciju React aplikacije na strani klijenta.

Primjer Koda (Server-Side):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Vaša React komponenta

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

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Ulazna točka na strani klijenta
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Žao nam je, nešto je pošlo po zlu
');
    }
  });

  setTimeout(abort, 10000); // Opcionalno: Timeout za sprječavanje beskonačnog vješanja
});

app.use(express.static('public')); // Poslužite statičke resurse

app.listen(port, () => {
  console.log(`Server sluša na http://localhost:${port}`);
});

Primjer Koda (Client-Side - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

Primjer React App Komponente (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Podaci su uspješno učitani!");
    }, 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)); // Simulirajte kašnjenje učitavanja
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Dobrodošli u Streaming SSR!
      
Ovo je demonstracija React Streaming SSR-a.
      Učitavanje...
}>