React સ્ટ્રીમિંગ: ઑપ્ટિમાઇઝ્ડ વપરાશકર્તા અનુભવ માટે પ્રોગ્રેસિવ સર્વર-સાઇડ રેન્ડરિંગ

વેબ ડેવલપમેન્ટની દુનિયામાં, ઝડપી અને પ્રતિભાવશીલ વપરાશકર્તા અનુભવ પહોંચાડવો સર્વોપરી છે. વપરાશકર્તાઓ અપેક્ષા રાખે છે કે વેબસાઇટ્સ ઝડપથી લોડ થાય અને વિલંબ કર્યા વિના ક્રિયાપ્રતિક્રિયાત્મક હોય. વપરાશકર્તા ઇન્ટરફેસ બનાવવા માટેની એક લોકપ્રિય JavaScript લાઇબ્રેરી React, આ પડકારને પહોંચી વળવા માટે સ્ટ્રીમિંગ સર્વર-સાઇડ રેન્ડરિંગ (SSR) નામની એક શક્તિશાળી તકનીક પ્રદાન કરે છે. આ લેખ React સ્ટ્રીમિંગ SSR ની વિભાવનાની તપાસ કરે છે, તેના ફાયદાઓ, અમલીકરણ અને વેબસાઇટની કામગીરી અને વપરાશકર્તા અનુભવ પરની અસરનું અન્વેષણ કરે છે.

સર્વર-સાઇડ રેન્ડરિંગ (SSR) શું છે?

પરંપરાગત ક્લાયંટ-સાઇડ રેન્ડરિંગ (CSR) માં બ્રાઉઝર HTML, JavaScript અને CSS ફાઇલો ડાઉનલોડ કરે છે અને પછી ક્લાયંટ-સાઇડ પર સામગ્રી રેન્ડર કરે છે. લવચીક હોવા છતાં, આ અભિગમથી પ્રારંભિક રેન્ડર વિલંબિત થઈ શકે છે, કારણ કે વપરાશકર્તાએ બધી સંસાધનો ડાઉનલોડ થાય અને કોઈપણ સામગ્રી જોતા પહેલા JavaScript એક્ઝિક્યુટ થાય તેની રાહ જોવી પડે છે. SSR, બીજી બાજુ, સર્વર પર React ઘટકોને રેન્ડર કરે છે અને સંપૂર્ણ રીતે રેન્ડર કરેલ HTML ક્લાયંટને મોકલે છે. આના પરિણામે ઝડપી પ્રારંભિક લોડ સમય મળે છે, કારણ કે બ્રાઉઝરને સંપૂર્ણ રીતે રચાયેલ HTML મળે છે જે તરત જ પ્રદર્શિત થઈ શકે છે.

પરંપરાગત SSR ની મર્યાદાઓ

જ્યારે પરંપરાગત SSR CSR પર નોંધપાત્ર સુધારો આપે છે, ત્યારે તેની પોતાની મર્યાદાઓ છે. પરંપરાગત SSR માં, કોઈપણ HTML ક્લાયંટને મોકલવામાં આવે તે પહેલાં સમગ્ર એપ્લિકેશનને સર્વર પર રેન્ડર કરવાની જરૂર છે. આ એક અવરોધ બની શકે છે, ખાસ કરીને બહુવિધ ઘટકો અને ડેટા નિર્ભરતાવાળી જટિલ એપ્લિકેશનો માટે. પ્રથમ બાઇટ માટેનો સમય (TTFB) વધારે હોઈ શકે છે, જેનાથી વપરાશકર્તા માટે ધીમી ગતિની અનુભૂતિ થાય છે.

React સ્ટ્રીમિંગ SSR દાખલ કરો: એક પ્રગતિશીલ અભિગમ

React સ્ટ્રીમિંગ SSR પ્રગતિશીલ અભિગમ અપનાવીને પરંપરાગત SSR ની મર્યાદાઓને દૂર કરે છે. સર્વર પર આખી એપ્લિકેશનને રેન્ડર થવાની રાહ જોવાને બદલે, સ્ટ્રીમિંગ SSR રેન્ડરિંગ પ્રક્રિયાને નાના ભાગોમાં તોડી નાખે છે અને આ ભાગો ઉપલબ્ધ થતાંની સાથે જ ક્લાયંટને સ્ટ્રીમ કરે છે. આ બ્રાઉઝરને ઘણી વહેલી સામગ્રી પ્રદર્શિત કરવાનું શરૂ કરવાની મંજૂરી આપે છે, જેનાથી અનુભવાયેલી કામગીરીમાં સુધારો થાય છે અને TTFB માં ઘટાડો થાય છે. તેને એક રેસ્ટોરન્ટ તરીકે વિચારો જે તમારું ભોજન તબક્કામાં તૈયાર કરે છે: એપેટાઇઝર પહેલાં પીરસવામાં આવે છે, પછી મુખ્ય કોર્સ અને અંતે ડેઝર્ટ, એક જ સમયે આખું ભોજન તૈયાર થાય તેની રાહ જોવાને બદલે.

React સ્ટ્રીમિંગ SSR ના ફાયદા

React સ્ટ્રીમિંગ SSR વેબસાઇટની કામગીરી અને વપરાશકર્તા અનુભવ માટે અસંખ્ય ફાયદાઓ પ્રદાન કરે છે:

• ઝડપી પ્રારંભિક લોડ સમય: ક્લાયંટને HTML ભાગોને સ્ટ્રીમ કરીને, બ્રાઉઝર ઘણી વહેલી સામગ્રી પ્રદર્શિત કરવાનું શરૂ કરી શકે છે, જેના પરિણામે ઝડપી અનુભવાયેલ લોડ સમય અને વપરાશકર્તાની સંલગ્નતામાં સુધારો થાય છે.
• પ્રથમ બાઇટ માટે સુધારેલ સમય (TTFB): સ્ટ્રીમિંગ SSR આખી એપ્લિકેશનને રેન્ડર થવાની રાહ જોવાને બદલે, તૈયાર થતાંની સાથે જ પ્રારંભિક HTML ભાગ મોકલીને TTFB ઘટાડે છે.
• ઉન્નત વપરાશકર્તા અનુભવ: ઝડપી પ્રારંભિક લોડ સમયથી સારો વપરાશકર્તા અનુભવ મળે છે, કારણ કે વપરાશકર્તાઓને સામગ્રી દેખાય તેની રાહ જોવી પડતી નથી.
• વધુ સારું SEO: સર્ચ એન્જિન સામગ્રીને વધુ અસરકારક રીતે ક્રોલ અને ઇન્ડેક્સ કરી શકે છે, કારણ કે HTML સર્વર પર સરળતાથી ઉપલબ્ધ છે.
• પ્રોગ્રેસિવ હાઇડ્રેશન: સ્ટ્રીમિંગ SSR પ્રોગ્રેસિવ હાઇડ્રેશનને સક્ષમ કરે છે, જ્યાં ક્લાયંટ-સાઇડ React કોડ ધીમે ધીમે ઇવેન્ટ સાંભળનારાઓને જોડે છે અને HTML ભાગો સ્ટ્રીમ થતાંની સાથે જ એપ્લિકેશનને ક્રિયાપ્રતિક્રિયાત્મક બનાવે છે.
• સુધારેલ સંસાધન વપરાશ: રેન્ડરિંગ પ્રક્રિયાને નાના ભાગોમાં તોડીને, સ્ટ્રીમિંગ SSR સર્વર પર સંસાધન વપરાશમાં સુધારો કરી શકે છે.

React સ્ટ્રીમિંગ SSR કેવી રીતે કાર્ય કરે છે

React સ્ટ્રીમિંગ SSR ક્લાયંટને HTML ભાગોને સ્ટ્રીમ કરવા માટે ReactDOMServer.renderToPipeableStream() API નો ઉપયોગ કરે છે. આ API એક વાંચી શકાય તેવી સ્ટ્રીમ પરત કરે છે જેને સર્વરના પ્રતિભાવ ઑબ્જેક્ટમાં પાઇપ કરી શકાય છે. તે કેવી રીતે કાર્ય કરે છે તેનું એક સરળ ઉદાહરણ અહીં આપ્યું છે:

1. સર્વરને પૃષ્ઠ માટે વિનંતી મળે છે.
2. સર્વર React એપ્લિકેશનને સ્ટ્રીમમાં રેન્ડર કરવા માટે ReactDOMServer.renderToPipeableStream() ને કૉલ કરે છે.
3. જ્યારે React ઘટકો રેન્ડર થાય છે ત્યારે સ્ટ્રીમ HTML ભાગોનું ઉત્સર્જન કરવાનું શરૂ કરે છે.
4. સર્વર પ્રતિભાવ ઑબ્જેક્ટમાં સ્ટ્રીમને પાઇપ કરે છે, HTML ભાગોને ક્લાયંટને મોકલે છે.
5. બ્રાઉઝર HTML ભાગો મેળવે છે અને તેમને ધીમે ધીમે પ્રદર્શિત કરવાનું શરૂ કરે છે.
6. એકવાર બધા HTML ભાગો પ્રાપ્ત થઈ જાય, પછી બ્રાઉઝર React એપ્લિકેશનને હાઇડ્રેટ કરે છે, તેને ક્રિયાપ્રતિક્રિયાત્મક બનાવે છે.

React સ્ટ્રીમિંગ SSR નો અમલ કરવો

React સ્ટ્રીમિંગ SSR નો અમલ કરવા માટે, તમારે Node.js સર્વર અને React એપ્લિકેશનની જરૂર પડશે. અહીં એક પગલું-દર-પગલાંની માર્ગદર્શિકા છે:

1. Node.js સર્વર સેટ કરો: Express અથવા Koa જેવા ફ્રેમવર્કનો ઉપયોગ કરીને Node.js સર્વર બનાવો.
2. React અને ReactDOMServer ઇન્સ્ટોલ કરો: react અને react-dom પેકેજો ઇન્સ્ટોલ કરો.
3. React એપ્લિકેશન બનાવો: તમે સર્વર પર રેન્ડર કરવા માંગતા હો તે ઘટકો સાથે React એપ્લિકેશન બનાવો.
4. ReactDOMServer.renderToPipeableStream() નો ઉપયોગ કરો: તમારા સર્વર કોડમાં, તમારી React એપ્લિકેશનને સ્ટ્રીમમાં રેન્ડર કરવા માટે ReactDOMServer.renderToPipeableStream() API નો ઉપયોગ કરો.
5. પ્રતિભાવ ઑબ્જેક્ટમાં સ્ટ્રીમ પાઇપ કરો: ક્લાયંટને HTML ભાગો મોકલવા માટે સર્વરના પ્રતિભાવ ઑબ્જેક્ટમાં સ્ટ્રીમ પાઇપ કરો.
6. ભૂલોને હેન્ડલ કરો: રેન્ડરિંગ પ્રક્રિયા દરમિયાન થઈ શકે તેવી કોઈપણ ભૂલોને પકડવા માટે ભૂલ હેન્ડલિંગનો અમલ કરો.
7. હાઇડ્રેશન માટે સ્ક્રિપ્ટ ટૅગ ઉમેરો: ક્લાયંટ-સાઇડ પર React એપ્લિકેશનને હાઇડ્રેટ કરવા માટે 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,
    
);

ઉદાહરણ React એપ્લિકેશન ઘટક (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...
}>