Express.js पर रिएक्ट ऐप के लिए सर्वर साइड रेंडरिंग

इस लेख को लिखने के लिए, मुझे एक प्रतिक्रिया आवेदन के लिए सर्वर साइड रेंडरिंग बनाने के तरीके पर किसी भी अधिक या कम पूर्ण मैनुअल की कमी से संकेत दिया गया था।

जब मैं इस समस्या में भाग गया, तो मेरे पास ऐसा करने के लिए 2 विकल्प थे, या तो Next.js ढांचे के साथ, या Express.js का उपयोग करके।

हमारे तैयार बड़े OTT प्लेटफ़ॉर्म के लिए इसे प्राप्त करने के लिए Next.js की जाँच में लगभग 100 घंटे का समय व्यतीत किया गया था, लेकिन कई समस्याएं थीं, जिससे हमने इसे मना कर दिया (मैं इस बारे में फिर से एक लेख लिखूँगा), एक छोटे से एक के लिए एक विकल्प था, Express .js , जिसके बारे में मैं बताना चाहता हूँ।

इस लेख में डेमो के लिए पूर्ण कोड यहाँ है ।

आइए आरंभिक कार्य और जो हमारे पास था, उससे शुरू करें।

हमारे पास उस समय था:

• एक पूरी तरह से तैयार अनुप्रयोग, जो पहले से ही उत्पादन में था, इसकी वास्तुकला और सुविधाओं के साथ नीचे सूचीबद्ध है।
• स्टोर के लिए Immutable.js द्वारा उपयोग किया जाता है
• Redux sagas का उपयोग किया
• गतिशील आयात के लिए React.lazy और React.suspense
• राउटिंग के लिए रिएक्ट-राउटर 4
• आइकन के लिए कस्टम फ़ॉन्ट का उपयोग किया गया था।

उद्देश्यों:

• समाधान पूरी तरह से प्रदान किए गए HTML को डेटा के साथ प्रस्तुत करना चाहिए
• यह समाधान मौजूदा कोड को न्यूनतम रूप से प्रभावित करना चाहिए, अर्थात आर्किटेक्चर को न्यूनतम परिवर्तनों के साथ रहना चाहिए।
• उन पुस्तकालयों का उपयोग करना जारी रखें जो पहले से ही परियोजना में हैं
• पेज से एसईओ मेटा डेटा सर्वर से आना चाहिए
• छवियों, शैलियों और फोंट को सर्वर पर अपलोड किया जाना चाहिए और बाद में डाउनलोड किए बिना क्लाइंट को भेजा जाना चाहिए
• ग्राहक पक्ष गतिशील आयात समर्थन
• सर्वर पर प्रीलोडिंग के लिए कोड के दोहराव से बचें और क्लाइंट साइड पर नेविगेट करते समय

हमने कार्यों पर फैसला किया है, आइए जानें कि यह कैसे करना है।

प्रतिक्रिया के प्रलेखन से, हम यह पता लगा सकते हैं कि SSR के लिए आप रेंडरटाउरिंग () और हाइड्रेट () विधियों का उपयोग कर सकते हैं, लेकिन आगे क्या करना है?

renderToString - हमारे एप्लिकेशन के सर्वर पर HTML उत्पन्न करने के लिए उपयोग किया जाता है।
हाइड्रेट - क्लाइंट और सर्वर पर सार्वभौमिक प्रतिपादन के लिए उपयोग किया जाता है।

डेटा लोड हो रहा है

सर्वर साइड पर डेटा डाउनलोड करने के लिए, हम रेडक्स-कनेक्ट लाइब्रेरी का उपयोग करते हैं, जो आपको पहले रेंडर को कॉल करने से पहले आवश्यक डेटा डाउनलोड करने की अनुमति देता है, जो कि हमें चाहिए। ऐसा करने के लिए, hoc asyncConnect का उपयोग करें। सर्वर साइड पर, यह डेटा लोड करता है, और राउटिंग करते समय यह कंपोनेंटमाउंट के रूप में काम करता है।

@asyncConnect([ { key: 'usersFromServer', promise: async ({ store: { dispatch } }) => { await dispatch(getUsersData()); return Promise.resolve(); }, }, ]) 

हमें सर्वर साइड पर एक Redux स्टोर बनाने की आवश्यकता है। सब कुछ हमेशा की तरह है, बस server.js फ़ाइल में बनाएँ।

सर्वर साइड पर, रेडऑक्स -कनेक्ट से लोडऑनस्वर विधि का उपयोग करके , हम डेटा प्रीलोड की प्रतीक्षा करते हैं।

रेंडरटॉइरिंग का उपयोग करके हम अपने डेटा एप्लिकेशन का एचटीएमएल प्राप्त करते हैं।

हमारे द्वारा विज़िट किए गए डेटा को getState () का उपयोग करके पुनर्प्राप्त किया जा सकता है और <script /> टैग के माध्यम से वैश्विक विंडो ऑब्जेक्ट में जोड़ा जा सकता है। जिससे फिर क्लाइंट पर हम डेटा प्राप्त करेंगे और इसे गेट में सेट करेंगे।

यह सब कुछ ऐसा दिखता है

 app.get('*', (req, res) => { const url = req.originalUrl || req.url; const history = createMemoryHistory({ initialEntries: [url], }); const store = configureStore(initialState, history); const location = parseUrl(url); const helpers = {}; const indexFile = path.resolve('./build/main.html'); store.runSaga(sagas).toPromise().then(() => { return loadOnServer({ store, location, routes, helpers }) .then(() => { const context = {}; if (context.url) { req.header('Location', context.url); return res.send(302) } const css = new Set(); // CSS for all rendered React components const insertCss = (...styles) => styles.forEach(style => css.add(style._getCss())); const dynamicRoutes = [...routes]; dynamicRoutes[0].routes = [...dynamicRoutes[0].routes, ...StaticRoutesConfig]; const appContent = ReactDOMServer.renderToString( <StyleContext.Provider value={{ insertCss }}> <Provider store={store} key="provider"> <StaticRouter location={location} context={context}> <ReduxAsyncConnect routes={dynamicRoutes} helpers={helpers}/> </StaticRouter> </Provider> </StyleContext.Provider> ); const helmet = Helmet.renderStatic(); fs.readFile(indexFile, 'utf8', (err, data) => { if (err) { console.log('Something went wrong:', err); return res.status(500).send('Oops, better luck next time!'); } data = data.replace('__STYLES__', [...css].join('')); data = data.replace('__LOADER__', ''); data = data.replace('<div id=app></div>', `<div id=app>${appContent}</div>`); data = data.replace('<div id="app"></div>', `<div id="app">${appContent}</div>`); data = data.replace('<title></title>', helmet.title.toString()); data = data.replace('<meta name="description" content=""/>', helmet.meta.toString()); data = data.replace('<script>__INITIAL_DATA__</script>', `<script>window.__INITIAL_DATA__ = ${JSON.stringify(store.getState())};</script>`); return res.send(data); }); }); store.close(); }); }); 

ReduxAsyncConnect घटक में 2 प्रॉप्स पास किए जाते हैं:

पहला हमारा मार्ग है, दूसरा हेल्पर (सहायक कार्य), जिसे हम पूरे एप्लिकेशन तक पहुंचना चाहते हैं, एक तरह का संदर्भ।

सर्वर रूटिंग के लिए, StaticRouter का उपयोग करें।

हेलमेट लाइब्रेरी का उपयोग seo मेटा टैग जोड़ने के लिए किया जाता है। प्रत्येक पृष्ठ घटक में टैग के साथ एक विवरण है।

टैग को सर्वर से तुरंत आने के लिए, इसका उपयोग किया जाता है

 const helmet = Helmet.renderStatic(); helmet.title.toString() helmet.meta.toString() 

रूटिंग को ऑब्जेक्ट की एक सरणी में फिर से लिखना पड़ा, यह इस तरह दिखता है।

 export const StaticRoutesConfig = [ { key: 'usersGender', component: UsersGender, exact: true, path: '/users-gender/:gender', }, { key: 'USERS', component: Users, exact: true, path: '/users', }, { key: 'main', component: Users, exact: true, path: '/', }, { key: 'not-found', component: NotFound, }, ]; 

सर्वर पर आने वाले url के आधार पर, प्रतिक्रिया राउटर ने वांछित डेटा पृष्ठ वापस कर दिया।

ग्राहक कैसा दिखता है?

यहाँ मुख्य ग्राहक फ़ाइल है। आप खोज इंजन और कोड के लिए विश्लेषिकी जोड़ सकते हैं जिसे क्लाइंट पेज पर प्रत्येक पृष्ठ के लिए निष्पादित किया जाना चाहिए।

ब्राउज़र / index.js

 import 'babel-polyfill'; import { browserRender } from '../app/app'; browserRender(); 

App.js फ़ाइल

 const initialState = !process.env.IS_SERVER ? window.__INITIAL_DATA__ : {}; const history = process.env.IS_SERVER ? createMemoryHistory({ initialEntries: ['/'], }) : createBrowserHistory(); const store = configureStore(initialState, history); if (!process.env.IS_SERVER) { window.store = store; } const insertCss = (...styles) => { // eslint-disable-next-line no-underscore-dangle const removeCss = styles.map(style => style._insertCss()); return () => removeCss.forEach(dispose => dispose()); }; export const browserRender = () => { const dynamicRoutes = [...routes]; dynamicRoutes[0].routes = [...dynamicRoutes[0].routes, ...StaticRoutesConfig]; hydrate( <StyleContext.Provider value={{ insertCss }}> <Provider key="provider" store={store} > <ConnectedRouter history={history}> <ReduxAsyncConnect helpers={{}} routes={dynamicRoutes} /> </ConnectedRouter> </Provider> </StyleContext.Provider>, document.getElementById('app'), ); }; 

रूटिंग के लिए, कनेक्टेड -प्रतिक्रिया-राउटर / अपरिवर्तनीय से कनेक्टेड राउटर का उपयोग किया जाता है ।

सर्वर-साइड रेंडरिंग के लिए, हम r eact-रूटर-डोम का उपयोग नहीं कर सकते हैं और स्विच के माध्यम से हमारी रूटिंग का ठीक से वर्णन कर सकते हैं:

 <Switch> <Route path="/about"> <About /> </Route> <Route path="/users"> <Users /> </Route> <Route path="/"> <Home /> </Route> </Switch> 

इसके बजाय, जैसा कि पहले ही उल्लेख किया गया है, हमारे पास वर्णित मार्गों के साथ एक सरणी है, और हमें उन्हें एप्लिकेशन में जोड़ने के लिए, हमें प्रतिक्रिया-राउटर-कॉन्फ़िगरेशन का उपयोग करने की आवश्यकता है:

App / index.js

 import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Helmet } from 'react-helmet'; import { renderRoutes } from 'react-router-config'; import { getRouterLocation } from './selectors/router'; @connect(state => ({ location: getRouterLocation(state), }), null) export default class App extends Component { static propTypes = { location: PropTypes.shape().isRequired, route: PropTypes.shape().isRequired, }; render() { const { route } = this.props; return ( <div> {renderRoutes(route.routes)} </div> ); } } 

सर्वर पर कार्नेट्स, स्टाइल और फोंट डाउनलोड करें

शैलियों के लिए, आइसोमॉर्फिक-शैली-लोडर का उपयोग किया गया था , क्योंकि सामान्य स्लीपर-लोडर वेबपैक में लक्ष्य के साथ काम नहीं करता है: "नोड";

वह सभी शैलियों को DOM में जोड़ता है, इस प्रकार सर्वर से तैयार, सुंदर पृष्ठ आता है। आप शैलियों को एक अलग फ़ाइल में सहेज सकते हैं, इसलिए उन्हें ब्राउज़र द्वारा कैश किया जा सकता है।

सर्वर पर छवियों और डाउनलोड फोंट को प्रदर्शित करने के लिए, वेबपैक लोडर बेस 64-इनलाइन-लोडर का उपयोग किया गया था ।

 { test: /\.(jpe?g|png|ttf|eot|otf|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, use: 'base64-inline-loader?limit=1000&name=[name].[ext]', }, 

यह छवियों और हमारे द्वारा उपयोग किए जाने वाले सभी प्रकार के फोंट के लिए शामिल किया गया था। नतीजतन, हमें बेस 64 सर्वर से एक कोड प्राप्त हुआ, जो बाद में लोड किए बिना फोंट और छवियों के साथ एक पृष्ठ प्रदर्शित करता है।

क्लाइंट बिल्ड के लिए, सामान्य url-loader और फ़ाइल-लोडर का उपयोग किया गया था ।

 { test: /\.(eot|svg|otf|ttf|woff|woff2)$/, use: 'file-loader', }, { test: /\.(mp4|webm|png|gif)$/, use: { loader: 'url-loader', options: { limit: 10000, }, }, }, 

हां, इससे लोड किए गए पृष्ठ का आकार बढ़ गया, लेकिन डाउनलोड गति के मामले में यह उपयोगकर्ता के लिए बहुत ध्यान देने योग्य नहीं था।

सर्वर पर गतिशील आयात

React.js गतिशील रूप से आयात करने और लोडर प्रदर्शित करने के लिए React.lazy और React.suspense का उपयोग करता है, लेकिन वे SSR के लिए काम नहीं करते हैं।

हमने प्रतिक्रिया-लोड करने योग्य उपयोग किया, जो एक ही काम करता है।

 import Loadable from 'react-loadable'; import Loader from './Loader'; const LoadableComponent = Loadable({ loader: () => import('./my-component'), loading: Loader, }); export default class App extends React.Component { render() { return <LoadableComponent/>; } } 

क्लाइंट पर, यह कोड लोडर को प्रदर्शित करता है, सर्वर पर, लोड करने के लिए मॉड्यूल के लिए, आपको निम्न कोड जोड़ने की आवश्यकता है:

 Loadable.preloadAll().then(() => { app.listen(PORT, () => { console.log(` Server is listening on port ${PORT}`); }); }); 

Loadable.preloadAll () - एक वादा देता है जो कहता है कि मॉड्यूल लोड किए गए हैं।

सभी हाइलाइट हल हो गए हैं।

मैंने लेख में वर्णित हर चीज का उपयोग करके एक मिनी डेमो बनाया।