रिएक्शन-स्नैप के साथ प्री-रेंडरिंग रूट

क्या आपको सर्वर साइड रेंडरिंग नहीं, लेकिन फिर भी अपनी React साइट की परफ़ॉर्मेंस को बेहतर बनाना है? प्री-रेंडरिंग करके देखें!

Houssein Djirdeh

react-snap तीसरे पक्ष का है लाइब्रेरी जो आपकी साइट के पेजों को स्टैटिक एचटीएमएल फ़ाइलों में प्री-रेंडर करती है. यह काम कर सकता है बेहतर बनाएं फ़र्स्ट पेंट आपके आवेदन में बार.

यहां प्री-रेंडरिंग और उसके बिना, एक ही ऐप्लिकेशन की तुलना की गई है यह कॉन्टेंट, सिम्युलेटेड 3G कनेक्शन और मोबाइल डिवाइस पर लोड होता है:

साथ-साथ लोड होने की तुलना. प्री-रेंडरिंग सुविधा का इस्तेमाल करने वाला वर्शन, 4.2 सेकंड तेज़ी से लोड होता है.

यह जानकारी काम की क्यों है?

एक पेज के बड़े ऐप्लिकेशन के साथ परफ़ॉर्मेंस की मुख्य समस्या यह होती है कि उपयोगकर्ता को साइट बनाने वाले JavaScript बंडल के पूरा होने तक इंतज़ार करना होगा इससे पहले कि वे कोई भी वास्तविक कॉन्टेंट देख सकें. बंडल जितने बड़े होंगे, उसे ज़्यादा समय तक इंतज़ार करना होगा.

इस समस्या को हल करने के लिए, कई डेवलपर अपने ऐप्लिकेशन को ब्राउज़र पर बूट करने के बजाय सर्वर को चालू कर सकता है. हर एक के साथ पेज/रूट ट्रांज़िशन करते हैं, तो पूरा एचटीएमएल सर्वर पर जनरेट किया जाता है और ब्राउज़र, जो फ़र्स्ट पेंट टाइम को कम करता है, लेकिन उसके काम करने की प्रक्रिया धीमी होती है टाइम टू फ़र्स्ट बाइट.

प्री-रेंडरिंग एक अलग तकनीक है, जो सर्वर के मुकाबले कम जटिल है रेंडरिंग के साथ-साथ यह भी आपकी साइट पर First Paint के समय को बेहतर का इस्तेमाल करें. बिना यूज़र इंटरफ़ेस वाले ब्राउज़र या बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले ब्राउज़र का इस्तेमाल किया जाता है का इस्तेमाल करके, बिल्ड समय के दौरान हर रूट की स्टैटिक एचटीएमएल फ़ाइलें जनरेट की जा सकती हैं. ये फ़ाइलें तब उन JavaScript बंडल के साथ भेजा जा सकता है, जो का इस्तेमाल करें.

प्रतिक्रिया-स्नैप

react-snap इन चीज़ों के लिए Puppeteer का इस्तेमाल करता है अपने ऐप्लिकेशन में अलग-अलग रूट की पहले से रेंडर की गई एचटीएमएल फ़ाइलें बनाना. यहां की यात्रा पर हूं तो इसे डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करें:

npm install --save-dev react-snap

इसके बाद, अपने package.json में postbuild स्क्रिप्ट जोड़ें:

"scripts": {
  //...
  "postbuild": "react-snap"
}

इससे हर बार नए बिल्ड पर react-snap कमांड अपने-आप चलेगा आवेदन की संख्या (npm build).

आखिर में, आपको ऐप्लिकेशन चालू करने का तरीका बदलना होगा. src/index.js फ़ाइल को, इनमें से किसी एक फ़ाइल में बदलें:

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

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

रूट React एलिमेंट को रेंडर करने के लिए सिर्फ़ ReactDOM.render का इस्तेमाल करने के बजाय सीधे DOM में जाते हैं, तो यह जांच करता है कि कोई चाइल्ड नोड पहले से मौजूद है या नहीं यह पता लगाने के लिए कि क्या एचटीएमएल कॉन्टेंट को पहले से रेंडर किया गया था या सर्वर). अगर ऐसा है, तो इवेंट को अटैच करने के लिए, ReactDOM.hydrate का इस्तेमाल किया जाता है सुनने वालों के लिए बनाया गया है.

ऐप्लिकेशन बनाने से, अब स्टैटिक एचटीएमएल फ़ाइलें पेलोड के तौर पर जनरेट होंगी क्रॉल किया जाता है. एचटीएमएल पेलोड कैसा दिखता है इसके लिए, एचटीएमएल अनुरोध के यूआरएल पर क्लिक करें और फिर झलक देखें पर क्लिक करें टैब पर क्लिक करें.

पहले और बाद की तुलना. आफ़्टर शॉट से पता चलता है कि कॉन्टेंट रेंडर हो गया है.

बिना स्टाइल वाला कॉन्टेंट

हालांकि, स्टैटिक एचटीएमएल को अब करीब-करीब तुरंत रेंडर कर दिया जाता है, लेकिन यह अब भी बना हुआ है डिफ़ॉल्ट रूप से लेबल नहीं किया जाता है, जिससे "बिना स्टाइल वाले फ़्लैश का फ़्लैश कॉन्टेंट" (एफ़ओयूसी). खास तौर पर, यह ध्यान तब दे सकता है, जब CSS-in-JS का इस्तेमाल किया जा रहा हो लाइब्रेरी से सिलेक्टर जनरेट करता है, क्योंकि JavaScript बंडल को किसी भी स्टाइल को लागू करने से पहले लागू किया जा सकता है.

इसे रोकने के लिए, अहम सीएसएस या सीएसएस की कम से कम तय की गई सीमा रेंडर करने के लिए शुरुआती पेज की ज़रूरत होती है. इसे सीधे <head> पर अंडरलाइन किया जा सकता है में क्या होगा. react-snap इसके तहत किसी अन्य तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करता है: हुड, minimalcss, की मदद से किसी भी वैल्यू को एक्सट्रैक्ट किया जा सकता है ज़रूरी सीएसएस शामिल करें. इसे चालू करने के लिए, आपकी package.json फ़ाइल में फ़ॉलो किया जा रहा है:

"reactSnap": {
  "inlineCss": true
}

Chrome DevTools में जवाब की झलक देखने पर, अब आपको स्टाइल वाले पेज में ज़रूरी सीएसएस को लाइन में दिखाया जाएगा.

पहले और बाद की तुलना. आफ़्टर शॉट से पता चलता है कि कॉन्टेंट रेंडर हो गया है और इनलाइन क्रिटिकल सीएसएस की वजह से इसे स्टाइल किया गया है.

नतीजा

अगर आप अपने ऐप्लिकेशन में सर्वर-साइड रेंडरिंग रूट नहीं हैं, तो अपने उपयोगकर्ताओं को स्टैटिक एचटीएमएल को प्री-रेंडर करने के लिए react-snap.

  1. इसे डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करें और सिर्फ़ डिफ़ॉल्ट से शुरू करें सेटिंग.
  2. अगर ज़रूरी सीएसएस काम करती है, तो उसे इनलाइन करने के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध inlineCss विकल्प का इस्तेमाल करें आपकी साइट के लिए.
  3. अगर किसी रूट में कॉम्पोनेंट लेवल पर कोड को बांटने की सुविधा का इस्तेमाल किया जा रहा है, तो अपने उपयोगकर्ताओं के लिए, लोड होने की स्थिति को प्री-रेंडर न करने के बारे में ध्यान रखें. कॉन्टेंट बनाने react-snap पढ़ें में विस्तार से बताया है.