React ஸ்ட்ரீமிங்: உகந்த பயனர் அனுபவத்திற்கான முற்போக்கான சேவையக பக்க ரெண்டரிங்

வலை அபிவிருத்தி உலகில், வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குவது மிக முக்கியம். பயனர்கள் இணையதளங்கள் விரைவாக ஏற்றப்பட வேண்டும் மற்றும் தாமதமின்றி ஊடாடும் வகையில் இருக்க வேண்டும் என்று எதிர்பார்க்கிறார்கள். பயனர் இடைமுகங்களை உருவாக்குவதற்கான பிரபலமான ஜாவாஸ்கிரிப்ட் நூலகமான React, இந்த சவாலை எதிர்கொள்ள ஸ்ட்ரீமிங் சேவையக பக்க ரெண்டரிங் (SSR) எனப்படும் ஒரு சக்திவாய்ந்த நுட்பத்தை வழங்குகிறது. இந்த கட்டுரை React ஸ்ட்ரீமிங் SSR இன் கருத்தை ஆராய்கிறது, அதன் நன்மைகள், செயல்படுத்தல் மற்றும் இணையதள செயல்திறன் மற்றும் பயனர் அனுபவத்தில் ஏற்படும் தாக்கம் ஆகியவற்றை ஆராய்கிறது.

சேவையக பக்க ரெண்டரிங் (SSR) என்றால் என்ன?

பாரம்பரிய கிளையன்ட் பக்க ரெண்டரிங் (CSR) HTML, ஜாவாஸ்கிரிப்ட் மற்றும் CSS கோப்புகளை பதிவிறக்கம் செய்து, கிளையன்ட் பக்கத்தில் உள்ளடக்கத்தை ரெண்டர் செய்வதை உள்ளடக்குகிறது. நெகிழ்வானதாக இருந்தாலும், இந்த அணுகுமுறை தாமதமான ஆரம்ப ரெண்டருக்கு வழிவகுக்கும், ஏனெனில் அனைத்து ஆதாரங்களையும் பதிவிறக்கம் செய்து ஜாவாஸ்கிரிப்ட் எந்த உள்ளடக்கத்தையும் பார்ப்பதற்கு முன் இயக்க பயனர்கள் காத்திருக்க வேண்டும். SSR, மறுபுறம், சேவையகத்தில் React கூறுகளை ரெண்டர் செய்து, முழுமையாக ரெண்டர் செய்யப்பட்ட HTML ஐ கிளையன்ட்க்கு அனுப்புகிறது. இது வேகமான ஆரம்ப ஏற்றுதல் நேரத்திற்கு வழிவகுக்கிறது, ஏனெனில் உலாவி உடனடியாகக் காட்டக்கூடிய முழுமையாக உருவாக்கப்பட்ட HTML ஐப் பெறுகிறது.

பாரம்பரிய SSR இன் வரம்புகள்

பாரம்பரிய SSR CSR ஐ விட ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தை வழங்கினாலும், அதற்கு அதன் சொந்த வரம்புகள் உள்ளன. பாரம்பரிய SSR இல், எந்த HTML ஐ கிளையன்ட்க்கு அனுப்புவதற்கு முன்பு முழு பயன்பாடும் சேவையகத்தில் ரெண்டர் செய்யப்பட வேண்டும். இது ஒரு தடையாக இருக்கலாம், குறிப்பாக பல கூறுகள் மற்றும் தரவு சார்புகளுடன் கூடிய சிக்கலான பயன்பாடுகளுக்கு. முதல் பைட் வரை நேரம் (TTFB) அதிகமாக இருக்கலாம், இது பயனருக்கு மெதுவான உணர்வுக்கு வழிவகுக்கும்.

React ஸ்ட்ரீமிங் SSR ஐ உள்ளிடவும்: ஒரு முற்போக்கான அணுகுமுறை

React ஸ்ட்ரீமிங் SSR ஒரு முற்போக்கான அணுகுமுறையை பின்பற்றுவதன் மூலம் பாரம்பரிய SSR இன் வரம்புகளை கடக்கிறது. சேவையகத்தில் முழு பயன்பாடும் ரெண்டர் செய்ய காத்திருக்காமல், ஸ்ட்ரீமிங் SSR ரெண்டரிங் செயல்முறையை சிறிய பகுதிகளாக உடைத்து, அவை கிடைக்கும்போது இந்த பகுதிகளை கிளையன்ட்க்கு ஸ்ட்ரீம் செய்கிறது. இது உலாவி உள்ளடக்கத்தை மிக முன்னதாகவே காட்டத் தொடங்க அனுமதிக்கிறது, உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது மற்றும் TTFB ஐக் குறைக்கிறது. உங்கள் உணவை ஒரு உணவகம் நிலைகளில் தயாரிப்பதைப் பற்றி சிந்தியுங்கள்: முழு உணவும் ஒரே நேரத்தில் தயாராகக் காத்திருக்காமல், முதலில் பசி தூண்டும் உணவு பரிமாறப்படுகிறது, பின்னர் முக்கிய உணவு மற்றும் இறுதியாக இனிப்பு.

React ஸ்ட்ரீமிங் SSR இன் நன்மைகள்

React ஸ்ட்ரீமிங் SSR இணையதள செயல்திறன் மற்றும் பயனர் அனுபவத்திற்கு ஏராளமான நன்மைகளை வழங்குகிறது:

• வேகமான ஆரம்ப ஏற்றுதல் நேரம்: HTML பகுதிகளை கிளையன்ட்க்கு ஸ்ட்ரீம் செய்வதன் மூலம், உலாவி உள்ளடக்கத்தை மிக முன்னதாகவே காட்டத் தொடங்கலாம், இதன் விளைவாக வேகமான உணரப்பட்ட ஏற்றுதல் நேரம் மற்றும் மேம்பட்ட பயனர் ஈடுபாடு ஏற்படுகிறது.
• முதல் பைட் வரை மேம்படுத்தப்பட்ட நேரம் (TTFB): முழு பயன்பாடும் ரெண்டர் செய்ய காத்திருக்காமல், தயாரானவுடன் ஆரம்ப HTML பகுதியை அனுப்புவதன் மூலம் ஸ்ட்ரீமிங் SSR 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('
மன்னிக்கவும், ஏதோ தவறு நடந்துவிட்டது
');
    }
  });

  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("தரவு வெற்றிகரமாக ஏற்றப்பட்டது!");
    }, 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 (
    

      
ஸ்ட்ரீமிங் SSR க்கு வரவேற்கிறோம்!
      
இது React ஸ்ட்ரீமிங் SSR இன் செயல்விளக்கம்.
      ஏற்றுகிறது...
}>