റിയാക്ട് സ്ട്രീമിംഗ്: ഒപ്റ്റിമൈസ് ചെയ്ത ഉപയോക്തൃ അനുഭവത്തിനായി പ്രോഗ്രസ്സീവ് സെർവർ-സൈഡ് റെൻഡറിംഗ്

വെബ് ഡെവലപ്‌മെൻ്റ് ലോകത്ത്, വേഗതയേറിയതും പ്രതികരണാത്മകവുമായ ഉപയോക്തൃ അനുഭവം നൽകുന്നത് വളരെ പ്രധാനമാണ്. വെബ്സൈറ്റുകൾ വേഗത്തിൽ ലോഡ് ചെയ്യണമെന്നും കാലതാമസമില്ലാതെ ഇൻ്ററാക്ടീവ് ആകണമെന്നും ഉപയോക്താക്കൾ പ്രതീക്ഷിക്കുന്നു. യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയായ റിയാക്ട്, ഈ വെല്ലുവിളിയെ അഭിമുഖീകരിക്കുന്നതിനായി സ്ട്രീമിംഗ് സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) എന്ന ശക്തമായ ഒരു സാങ്കേതികവിദ്യ വാഗ്ദാനം ചെയ്യുന്നു. ഈ ലേഖനം റിയാക്ട് സ്ട്രീമിംഗ് SSR എന്ന ആശയത്തിലേക്ക് ആഴത്തിൽ കടന്നുചെല്ലുന്നു, അതിൻ്റെ പ്രയോജനങ്ങൾ, നടപ്പാക്കൽ, വെബ്സൈറ്റ് പ്രകടനത്തിലും ഉപയോക്തൃ അനുഭവത്തിലുമുള്ള സ്വാധീനം എന്നിവ പര്യവേക്ഷണം ചെയ്യുന്നു.

എന്താണ് സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR)?

പരമ്പരാഗത ക്ലയിൻ്റ്-സൈഡ് റെൻഡറിംഗ് (CSR)-ൽ, ബ്രൗസർ HTML, JavaScript, CSS ഫയലുകൾ ഡൗൺലോഡ് ചെയ്യുകയും തുടർന്ന് ക്ലയിൻ്റ് ഭാഗത്ത് ഉള്ളടക്കം റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു. ഇത് ഫ്ലെക്സിബിൾ ആണെങ്കിലും, ഈ സമീപനം ഒരു വൈകിയ പ്രാരംഭ റെൻഡറിലേക്ക് നയിച്ചേക്കാം, കാരണം എല്ലാ റിസോഴ്സുകളും ഡൗൺലോഡ് ചെയ്യാനും എന്തെങ്കിലും ഉള്ളടക്കം കാണുന്നതിന് മുമ്പ് JavaScript എക്സിക്യൂട്ട് ചെയ്യാനും ഉപയോക്താവ് കാത്തിരിക്കേണ്ടതുണ്ട്. എന്നാൽ SSR, സെർവറിൽ റിയാക്ട് കമ്പോണൻ്റുകൾ റെൻഡർ ചെയ്യുകയും പൂർണ്ണമായി റെൻഡർ ചെയ്ത HTML ക്ലയിൻ്റിന് അയയ്ക്കുകയും ചെയ്യുന്നു. ഇത് വേഗതയേറിയ പ്രാരംഭ ലോഡ് സമയത്തിന് കാരണമാകുന്നു, കാരണം ബ്രൗസറിന് ഉടനടി പ്രദർശിപ്പിക്കാൻ കഴിയുന്ന പൂർണ്ണ രൂപത്തിലുള്ള HTML ലഭിക്കുന്നു.

പരമ്പരാഗത SSR-ൻ്റെ പരിമിതികൾ

പരമ്പരാഗത SSR, CSR-നേക്കാൾ ഗണ്യമായ മെച്ചപ്പെടുത്തൽ വാഗ്ദാനം ചെയ്യുന്നുണ്ടെങ്കിലും, അതിന് അതിൻ്റേതായ പരിമിതികളുണ്ട്. പരമ്പരാഗത SSR-ൽ, ഏതെങ്കിലും HTML ക്ലയിൻ്റിന് അയക്കുന്നതിന് മുമ്പ് മുഴുവൻ ആപ്ലിക്കേഷനും സെർവറിൽ റെൻഡർ ചെയ്യേണ്ടതുണ്ട്. ഇത് ഒരു തടസ്സമാകാം, പ്രത്യേകിച്ചും ഒന്നിലധികം കമ്പോണൻ്റുകളും ഡാറ്റാ ഡിപൻഡൻസികളുമുള്ള സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക്. ടൈം ടു ഫസ്റ്റ് ബൈറ്റ് (TTFB) ഉയർന്നതായിരിക്കാം, ഇത് ഉപയോക്താവിന് വേഗത കുറഞ്ഞതായി തോന്നാൻ ഇടയാക്കും.

റിയാക്ട് സ്ട്രീമിംഗ് SSR: ഒരു പ്രോഗ്രസ്സീവ് സമീപനം

റിയാക്ട് സ്ട്രീമിംഗ് SSR ഒരു പ്രോഗ്രസ്സീവ് സമീപനം സ്വീകരിച്ച് പരമ്പരാഗത SSR-ൻ്റെ പരിമിതികളെ മറികടക്കുന്നു. സെർവറിൽ മുഴുവൻ ആപ്ലിക്കേഷനും റെൻഡർ ചെയ്യുന്നതിനായി കാത്തിരിക്കുന്നതിനു പകരം, സ്ട്രീമിംഗ് SSR റെൻഡറിംഗ് പ്രക്രിയയെ ചെറിയ ചങ്കുകളായി വിഭജിക്കുകയും അവ ലഭ്യമാകുമ്പോൾ ഈ ചങ്കുകൾ ക്ലയിൻ്റിലേക്ക് സ്ട്രീം ചെയ്യുകയും ചെയ്യുന്നു. ഇത് ബ്രൗസറിന് വളരെ നേരത്തെ തന്നെ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാൻ തുടങ്ങാൻ അനുവദിക്കുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുകയും TTFB കുറയ്ക്കുകയും ചെയ്യുന്നു. ഒരു റെസ്റ്റോറൻ്റ് നിങ്ങളുടെ ഭക്ഷണം ഘട്ടം ഘട്ടമായി തയ്യാറാക്കുന്നതുപോലെ ഇതിനെക്കുറിച്ച് ചിന്തിക്കുക: ആദ്യം വിശപ്പടക്കാനുള്ള വിഭവം, പിന്നെ പ്രധാന കോഴ്സ്, ഒടുവിൽ മധുരപലഹാരം, അല്ലാതെ മുഴുവൻ ഭക്ഷണവും ഒരേസമയം തയ്യാറാകുന്നതുവരെ കാത്തിരിക്കുന്നില്ല.

റിയാക്ട് സ്ട്രീമിംഗ് SSR-ൻ്റെ പ്രയോജനങ്ങൾ

റിയാക്ട് സ്ട്രീമിംഗ് SSR വെബ്സൈറ്റ് പ്രകടനത്തിനും ഉപയോക്തൃ അനുഭവത്തിനും നിരവധി ഗുണങ്ങൾ നൽകുന്നു:

• വേഗതയേറിയ പ്രാരംഭ ലോഡ് സമയം: ക്ലയിൻ്റിലേക്ക് HTML ചങ്കുകൾ സ്ട്രീം ചെയ്യുന്നതിലൂടെ, ബ്രൗസറിന് വളരെ നേരത്തെ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാൻ കഴിയും, ഇത് വേഗതയേറിയ ലോഡ് സമയത്തിനും മെച്ചപ്പെട്ട ഉപയോക്തൃ ഇടപെടലിനും കാരണമാകുന്നു.
• മെച്ചപ്പെട്ട ടൈം ടു ഫസ്റ്റ് ബൈറ്റ് (TTFB): മുഴുവൻ ആപ്ലിക്കേഷനും റെൻഡർ ചെയ്യാൻ കാത്തിരിക്കുന്നതിനുപകരം, പ്രാരംഭ HTML ചങ്ക് തയ്യാറായ ഉടൻ അയച്ചുകൊണ്ട് സ്ട്രീമിംഗ് SSR, TTFB കുറയ്ക്കുന്നു.
• മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: വേഗതയേറിയ പ്രാരംഭ ലോഡ് സമയം ഒരു മികച്ച ഉപയോക്തൃ അനുഭവത്തിലേക്ക് നയിക്കുന്നു, കാരണം ഉള്ളടക്കം ദൃശ്യമാകുന്നതുവരെ ഉപയോക്താക്കളെ കാത്തിരിപ്പിക്കേണ്ടതില്ല.
• മികച്ച എസ്.ഇ.ഒ: സെർവറിൽ HTML എളുപ്പത്തിൽ ലഭ്യമാകുന്നതിനാൽ സെർച്ച് എഞ്ചിനുകൾക്ക് ഉള്ളടക്കം കൂടുതൽ കാര്യക്ഷമമായി ക്രോൾ ചെയ്യാനും ഇൻഡെക്സ് ചെയ്യാനും കഴിയും.
• പ്രോഗ്രസ്സീവ് ഹൈഡ്രേഷൻ: സ്ട്രീമിംഗ് SSR പ്രോഗ്രസ്സീവ് ഹൈഡ്രേഷൻ സാധ്യമാക്കുന്നു, അവിടെ ക്ലയിൻ്റ്-സൈഡ് റിയാക്ട് കോഡ് ക്രമേണ ഇവൻ്റ് ലിസണറുകളെ അറ്റാച്ചുചെയ്യുകയും HTML ചങ്കുകൾ സ്ട്രീം ചെയ്യുമ്പോൾ ആപ്ലിക്കേഷനെ ഇൻ്ററാക്ടീവ് ആക്കുകയും ചെയ്യുന്നു.
• മെച്ചപ്പെട്ട റിസോഴ്സ് വിനിയോഗം: റെൻഡറിംഗ് പ്രക്രിയയെ ചെറിയ ചങ്കുകളായി വിഭജിക്കുന്നതിലൂടെ, സ്ട്രീമിംഗ് SSR-ന് സെർവറിലെ റിസോഴ്സ് വിനിയോഗം മെച്ചപ്പെടുത്താൻ കഴിയും.

റിയാക്ട് സ്ട്രീമിംഗ് SSR എങ്ങനെ പ്രവർത്തിക്കുന്നു

ക്ലയിൻ്റിലേക്ക് HTML ചങ്കുകൾ സ്ട്രീം ചെയ്യുന്നതിന് റിയാക്ട് സ്ട്രീമിംഗ് SSR, ReactDOMServer.renderToPipeableStream() API ഉപയോഗിക്കുന്നു. ഈ API, സെർവറിൻ്റെ റെസ്പോൺസ് ഒബ്ജക്റ്റിലേക്ക് പൈപ്പ് ചെയ്യാൻ കഴിയുന്ന ഒരു റീഡബിൾ സ്ട്രീം നൽകുന്നു. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിൻ്റെ ലളിതമായ ഒരു ചിത്രീകരണം ഇതാ:

1. സെർവറിന് ഒരു പേജിനായുള്ള അഭ്യർത്ഥന ലഭിക്കുന്നു.
2. റിയാക്ട് ആപ്ലിക്കേഷനെ ഒരു സ്ട്രീമിലേക്ക് റെൻഡർ ചെയ്യുന്നതിനായി സെർവർ ReactDOMServer.renderToPipeableStream() കോൾ ചെയ്യുന്നു.
3. റിയാക്ട് കമ്പോണൻ്റുകൾ റെൻഡർ ചെയ്യുമ്പോൾ സ്ട്രീം HTML ചങ്കുകൾ പുറപ്പെടുവിക്കാൻ തുടങ്ങുന്നു.
4. സെർവർ സ്ട്രീമിനെ റെസ്പോൺസ് ഒബ്ജക്റ്റിലേക്ക് പൈപ്പ് ചെയ്യുകയും, HTML ചങ്കുകൾ ക്ലയിൻ്റിലേക്ക് അയക്കുകയും ചെയ്യുന്നു.
5. ബ്രൗസർ HTML ചങ്കുകൾ സ്വീകരിക്കുകയും അവയെ ക്രമാനുഗതമായി പ്രദർശിപ്പിക്കാൻ തുടങ്ങുകയും ചെയ്യുന്നു.
6. എല്ലാ HTML ചങ്കുകളും ലഭിച്ചുകഴിഞ്ഞാൽ, ബ്രൗസർ റിയാക്ട് ആപ്ലിക്കേഷനെ ഹൈഡ്രേറ്റ് ചെയ്യുകയും അതിനെ ഇൻ്ററാക്ടീവ് ആക്കുകയും ചെയ്യുന്നു.

റിയാക്ട് സ്ട്രീമിംഗ് SSR നടപ്പിലാക്കുന്നു

റിയാക്ട് സ്ട്രീമിംഗ് SSR നടപ്പിലാക്കാൻ, നിങ്ങൾക്ക് ഒരു Node.js സെർവറും ഒരു റിയാക്ട് ആപ്ലിക്കേഷനും ആവശ്യമാണ്. അതിനുള്ള ഒരു ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ് ഇതാ:

1. ഒരു Node.js സെർവർ സജ്ജീകരിക്കുക: എക്സ്പ്രസ് അല്ലെങ്കിൽ കോവ പോലുള്ള ഒരു ഫ്രെയിംവർക്ക് ഉപയോഗിച്ച് ഒരു Node.js സെർവർ ഉണ്ടാക്കുക.
2. റിയാക്ടും റിയാക്ട് ഡോം സെർവറും ഇൻസ്റ്റാൾ ചെയ്യുക: react, react-dom പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക.
3. ഒരു റിയാക്ട് ആപ്ലിക്കേഷൻ ഉണ്ടാക്കുക: നിങ്ങൾ സെർവറിൽ റെൻഡർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന കമ്പോണൻ്റുകൾ ഉപയോഗിച്ച് ഒരു റിയാക്ട് ആപ്ലിക്കേഷൻ ഉണ്ടാക്കുക.
4. ReactDOMServer.renderToPipeableStream() ഉപയോഗിക്കുക: നിങ്ങളുടെ സെർവർ കോഡിൽ, നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനെ ഒരു സ്ട്രീമിലേക്ക് റെൻഡർ ചെയ്യുന്നതിനായി ReactDOMServer.renderToPipeableStream() API ഉപയോഗിക്കുക.
5. സ്ട്രീമിനെ റെസ്പോൺസ് ഒബ്ജക്റ്റിലേക്ക് പൈപ്പ് ചെയ്യുക: HTML ചങ്കുകൾ ക്ലയിൻ്റിലേക്ക് അയക്കുന്നതിന് സെർവറിൻ്റെ റെസ്പോൺസ് ഒബ്ജക്റ്റിലേക്ക് സ്ട്രീം പൈപ്പ് ചെയ്യുക.
6. പിശകുകൾ കൈകാര്യം ചെയ്യുക: റെൻഡറിംഗ് പ്രക്രിയയിൽ ഉണ്ടാകാനിടയുള്ള പിശകുകൾ പിടിക്കുന്നതിനായി എറർ ഹാൻഡ്ലിംഗ് നടപ്പിലാക്കുക.
7. ഹൈഡ്രേഷനായി ഒരു സ്ക്രിപ്റ്റ് ടാഗ് ചേർക്കുക: ക്ലയിൻ്റ്-സൈഡിൽ റിയാക്ട് ആപ്ലിക്കേഷനെ ഹൈഡ്രേറ്റ് ചെയ്യുന്നതിനായി HTML-ൽ ഒരു സ്ക്രിപ്റ്റ് ടാഗ് ഉൾപ്പെടുത്തുക.

ഉദാഹരണ കോഡ് സ്നിപ്പെറ്റ് (സെർവർ-സൈഡ്):

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('
Sorry, something went wrong
');
    }
  });

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

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

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

ഉദാഹരണ കോഡ് സ്നിപ്പെറ്റ് (ക്ലയിൻ്റ്-സൈഡ് - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

ഉദാഹരണ റിയാക്ട് ആപ്പ് കമ്പോണൻ്റ് (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 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 (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>