🧜🏻 🌦️ 📘 कैसे मैंने सर्वर-साइड रेंडरिंग के साथ Vue.js पर विकास किया 👩‍👦 🌑 🛤️

सभी को नमस्कार!

मैं थोड़ा पृष्ठभूमि के साथ शुरू करूँगा।

मैंने Vue.js. पर अपनी नई परियोजना की कोशिश करने का फैसला किया मुझे सर्वर-साइड रेंडरिंग (एसएसआर), सीएसएस मॉड्यूल, कोड-विभाजन और अन्य उपहारों की आवश्यकता थी। बेशक, उत्पादकता बढ़ाने के लिए एक गर्म रिबूट (HMR) की आवश्यकता थी।

मैं तैयार समाधान का उपयोग नहीं करना चाहता था, जैसे कि Nuxt.js, क्योंकि जब परियोजना बढ़ती है, तो अनुकूलित करने में सक्षम होना महत्वपूर्ण है। और किसी भी उच्च-स्तरीय समाधान, एक नियम के रूप में, ऐसा करने की अनुमति न दें, या न दें, लेकिन महान प्रयासों के साथ (रिएक्ट के लिए Next.js का उपयोग करके एक समान अनुभव था)।

सर्वर रेंडरिंग और एक गर्म रिबूट का उपयोग करते समय स्थानीय विकास की मुख्य समस्या यह थी कि एक वेबपैक-देव-सर्वर को चलाने के लिए पर्याप्त नहीं था। हमें उन स्रोतों के साथ भी कुछ करना चाहिए जिन्हें Node.js लॉन्च करता है, अन्यथा अगली बार जब हम पृष्ठ को फिर से लोड करते हैं, तो हमें कोड मिलेगा जो सर्वर पर अपडेट नहीं किया गया था लेकिन क्लाइंट पर अपडेट किया गया था।

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

मैंने निर्धारित किया कि मेरे टेम्पलेट में क्या होना चाहिए ताकि आप एक आरामदायक विकास कर सकें:

VueJS
एसएसआर
Vuex
सीएसएस मॉड्यूल
कोड विभाजन
ESLint, Prettier

स्थानीय विकास के साथ, यह सब मक्खी पर ब्राउज़र में अद्यतन किया जाना चाहिए, और सर्वर कोड भी अपडेट किया जाना चाहिए।

उत्पादन मोड में, बंडलों को छोटा किया जाना चाहिए, कैशिंग स्टैटिक्स के लिए एक हैश जोड़ा जाना चाहिए, बंडलों के पथ को स्वचालित रूप से html टेम्पलेट में सेट किया जाना चाहिए।

यह सब GitHub पर भंडार में लागू किया गया है , मैं कोड प्रदान करूंगा और समाधानों का वर्णन करूंगा।

यह ध्यान देने योग्य है कि Vue.js के पास सर्वर रेंडरिंग की स्थापना के लिए काफी व्यापक दस्तावेज हैं, इसलिए यह वहां देखने के लिए समझ में आता है।

सर्वर साइड

इसलिए, हम एक्सप्रेस को Node.js के सर्वर के रूप में उपयोग करेंगे, हमें vue-server-renderer की भी आवश्यकता है। यह पैकेज हमें सर्वर बंडल, एचटीएमएल-टेम्प्लेट और क्लाइंट मेनिफ़ेस्ट के आधार पर कोड को एक HTML-स्ट्रिंग में प्रस्तुत करने की अनुमति देता है, जिसमें संसाधनों के नाम और पथ का संकेत दिया जाता है।

Server.js फ़ाइल अंततः इस तरह दिखाई देगी:

const path = require('path'); const express = require('express'); const { createBundleRenderer } = require('vue-server-renderer'); const template = require('fs').readFileSync( path.join(__dirname, './templates/index.html'), 'utf-8', ); const serverBundle = require('../dist/vue-ssr-server-bundle.json'); const clientManifest = require('../dist/vue-ssr-client-manifest.json'); const server = express(); const renderer = createBundleRenderer(serverBundle, { //           ,     runInNewContext: false, template, clientManifest, inject: false, }); //         nginx server.use('/dist', express.static(path.join(__dirname, '../dist'))); server.get('*', (req, res) => { const context = { url: req.url }; renderer.renderToString(context, (err, html) => { if (err) { if (+err.message === 404) { res.status(404).end('Page not found'); } else { console.log(err); res.status(500).end('Internal Server Error'); } } res.end(html); }); }); server.listen(process.env.PORT || 3000);

जैसा कि आप देख सकते हैं, हम 2 फ़ाइलों का उपयोग करते हैं: vue-ssr-server-bundle.json और vue- ssr-client-default.json ।

जब एप्लिकेशन बनाया जाता है तो वे उत्पन्न होते हैं; पहले में कोड है जिसे सर्वर पर निष्पादित किया जाएगा, दूसरे में संसाधनों के नाम और पथ शामिल हैं।

इसके अलावा, createBundleRenderer विकल्पों में , हमने इंजेक्शन निर्दिष्ट किया : गलत पैरामीटर। इसका मतलब है कि संसाधनों और अन्य चीजों को लोड करने के लिए html कोड की कोई स्वचालित पीढ़ी नहीं होगी, क्योंकि हमें पूर्ण लचीलेपन की आवश्यकता है। टेम्पलेट में, हम उन स्थानों को स्वतंत्र रूप से चिह्नित करेंगे जहां हम इस कोड को प्रदर्शित करना चाहते हैं।

टेम्प्लेट स्वयं इस तरह दिखाई देगा:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {{{ meta.inject().title.text() }}} {{{ meta.inject().meta.text() }}} {{{ renderResourceHints() }}} {{{ renderStyles() }}} </head> <body> <div id="app"><!--vue-ssr-outlet--></div> {{{ renderState() }}} {{{ renderScripts() }}} </body> </html>

आइए अधिक विस्तार से विचार करें।

meta.inject ()। title.text () और meta.inject ()। meta.text () हेडर और मेटा विवरण प्रदर्शित करने के लिए आवश्यक हैं। इसके लिए वीयू-मेटा पैकेज जिम्मेदार है, जिसके बारे में मैं नीचे चर्चा करूंगा
रेंडर .ResourceHints () - क्लाइंट मेनिफ़ेस्ट में निर्दिष्ट संसाधनों के लिए rel = " preload / prefetch" लिंक लौटाएगा
प्रस्तुतिकरण () - क्लाइंट मेनिफ़ेस्ट में निर्दिष्ट शैलियों के लिंक लौटाएगा
रेंडरस्टैट () - विंडो में डिफॉल्ट स्टेट लौटाएगा। INITIAL_STATE__
renderScripts () - एप्लिकेशन को काम करने के लिए आवश्यक स्क्रिप्ट लौटाएगा

एक टिप्पणी के बजाय, हमारे आवेदन के मार्कअप को प्रतिस्थापित किया जाएगा। वह आवश्यक है।

हमारे Vue सर्वर-साइड अनुप्रयोग के लिए प्रवेश बिंदु प्रविष्टि-server.js फ़ाइल है ।

 import { createApp } from './app'; export default context => new Promise((resolve, reject) => { //      Vue const { app, router, store } = createApp(); // $meta - ,   vue-meta   Vue const meta = app.$meta(); //      router.push(context.url); //  -  ,      context.meta = meta; router.onReady(() => { context.rendered = () => { //    ,     ,  window.__INITIAL_STATE__ context.state = store.state; }; const matchedComponents = router.getMatchedComponents(); //     if (!matchedComponents.length) { return reject(new Error(404)); } return resolve(app); }, reject); });

ग्राहक भाग

क्लाइंट-साइड प्रविष्टि बिंदु प्रविष्टि-client.js फ़ाइल है ।

 import { createApp } from './app'; const { app, router, store } = createApp(); router.onReady(() => { if (window.__INITIAL_STATE__) { //    ,     store.replaceState(window.__INITIAL_STATE__); } app.$mount('#app'); }); //    HMR  ,  webpack-dev-server     hot if (module.hot) { const api = require('vue-hot-reload-api'); const Vue = require('vue'); api.install(Vue); if (!api.compatible) { throw new Error( 'vue-hot-reload-api is not compatible with the version of Vue you are using.', ); } module.hot.accept(); }

App.js में , हमारे Vue उदाहरण बनाया जाता है, जो तब सर्वर और क्लाइंट दोनों पर उपयोग किया जाता है।

 import Vue from 'vue'; import { sync } from 'vuex-router-sync'; import { createRouter } from './router'; import { createStore } from './client/store'; import App from './App.vue'; export function createApp() { const router = createRouter(); const store = createStore(); sync(store, router); const app = new Vue({ router, store, render: h => h(App), }); return { app, router, store }; }

हम हमेशा एक ऐसी स्थिति से बचने के लिए एक नया उदाहरण बनाते हैं जहां कई अनुरोध एक ही उदाहरण का उपयोग करते हैं।

App.vue रूट कंपोनेंट है, जिसमें <राऊटर-व्यू> </ राउटर-व्यू> डायरेक्टिव होता है, जो रूट के आधार पर जरूरी कंपोनेंट्स को ऑप्शन करेगा।

राउटर ही ऐसा दिखता है

 import Vue from 'vue'; import Router from 'vue-router'; import VueMeta from 'vue-meta'; import routes from './routes'; Vue.use(Router); Vue.use(VueMeta); export function createRouter() { return new Router({ mode: 'history', routes: [ { path: routes.pages.main, component: () => import('./client/components/Main.vue') }, { path: routes.pages.about, component: () => import('./client/components/About.vue') }, ], }); }

Vue.use के माध्यम से हम दो प्लगइन्स कनेक्ट करते हैं: राउटर और VueMeta ।
मार्गों में, घटकों को सीधे संकेत नहीं दिया जाता है, लेकिन इसके माध्यम से

 () => import('./client/components/About.vue')

यह कोड विभाजन के लिए है।

राज्य प्रबंधन (वीयूएक्स द्वारा लागू) के लिए, इसका विन्यास कुछ खास नहीं है। केवल एक चीज है, मैंने पक्ष को मॉड्यूल में विभाजित किया है और एक नाम के साथ स्थिरांक का उपयोग करके कोड द्वारा नेविगेट करना आसान बनाता है।

अब स्वयं Vue घटकों में कुछ बारीकियों पर विचार करें।

MetaInfo गुण vue-meta पैकेज का उपयोग करके मेटा डेटा को रेंडर करने के लिए जिम्मेदार है। आप विभिन्न मापदंडों ( अधिक ) की एक बड़ी संख्या निर्दिष्ट कर सकते हैं।

 metaInfo: { title: 'Main page', }

घटकों में एक विधि होती है जो केवल सर्वर साइड पर चलती है।

 serverPrefetch() { console.log('Run only on server'); }

इसके अलावा, मैं सीएसएस मॉड्यूल का उपयोग करना चाहता था। मुझे यह विचार अच्छा लगता है कि जब आपको कक्षाओं के नाम की परवाह नहीं करनी है, ताकि घटकों के बीच ओवरलैप न हो। CSS मॉड्यूल्स का उपयोग करने पर, परिणामी वर्ग <वर्ग नाम> _ <हैश> जैसा दिखेगा।

ऐसा करने के लिए, आपको घटक में एक शैली मॉड्यूल निर्दिष्ट करने की आवश्यकता है।

 <style module> .item { padding: 3px 0; } .controls { margin-top: 12px; } </style>

और टेम्पलेट में विशेषता निर्दिष्ट करें : वर्ग

 <div :class="$style.item"></div>

इसके अलावा, वेबपैक सेटिंग्स में यह निर्दिष्ट करना आवश्यक है कि हम मॉड्यूल का उपयोग करेंगे।

सभा

चलिए खुद ही वेबपैक सेटिंग्स पर चलते हैं।

हमारे पास एक बेसिक कॉन्फिगरेशन है जो सर्वर और क्लाइंट भागों के लिए कॉन्फिगरेशन द्वारा विरासत में मिला है।

 const webpack = require('webpack'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const merge = require('webpack-merge'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const isProduction = process.env.NODE_ENV === 'production'; let config = { mode: isProduction ? 'production' : 'development', module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file), }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: { loader: 'url-loader', options: { limit: 10000, name: 'images/[name].[hash:8].[ext]', }, }, }, ], }, plugins: [ new VueLoaderPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), }), ], }; if (isProduction) { config = merge(config, { optimization: { minimizer: [new OptimizeCSSAssetsPlugin(), new UglifyJsPlugin()], }, }); } module.exports = config;

सर्वर कोड के निर्माण के लिए विन्यास प्रलेखन में एक से अलग नहीं है। सिवाय सीएसएस हैंडलिंग के।

 const merge = require('webpack-merge'); const nodeExternals = require('webpack-node-externals'); const VueSSRServerPlugin = require('vue-server-renderer/server-plugin'); const baseConfig = require('./webpack.base.js'); module.exports = merge(baseConfig, { entry: './app/entry-server.js', target: 'node', devtool: 'source-map', output: { libraryTarget: 'commonjs2', }, externals: nodeExternals({ whitelist: /\.css$/, }), plugins: [new VueSSRServerPlugin()], module: { rules: [ { test: /\.css$/, loader: 'css-loader', options: { modules: { localIdentName: '[local]_[hash:base64:8]', }, }, }, ], }, });

सबसे पहले, सभी सीएसएस प्रसंस्करण को आधार विन्यास में ले जाया गया, क्योंकि यह क्लाइंट और सर्वर पर दोनों की जरूरत है। उत्पादन शासन के लिए एक संशोधन था।
हालाँकि, मैं एक समस्या में भाग गया कि सर्वर दस्तावेज़ बन गया, और, तदनुसार, एक त्रुटि हुई। यह एक मिनी-सीएसएस-एक्सट्रैक्ट-प्लगइन त्रुटि थी जो सर्वर और क्लाइंट के लिए सीएसएस प्रसंस्करण को विभाजित करके तय की गई थी।

VueSSRServerPlugin , vue-ssr-server-bundle.json फ़ाइल बनाता है , जो सर्वर पर चलने वाले कोड को इंगित करता है।

अब क्लाइंट कॉन्फिगर पर विचार करें।

 const webpack = require('webpack'); const merge = require('webpack-merge'); const VueSSRClientPlugin = require('vue-server-renderer/client-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); const baseConfig = require('./webpack.base.js'); const isProduction = process.env.NODE_ENV === 'production'; let config = merge(baseConfig, { entry: ['./app/entry-client.js'], plugins: [new VueSSRClientPlugin()], output: { path: path.resolve('./dist/'), filename: '[name].[hash:8].js', publicPath: '/dist/', }, module: { rules: [ { test: /\.css$/, use: [ isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[local]_[hash:base64:8]', }, }, }, ], }, ], }, }); if (!isProduction) { config = merge(config, { output: { filename: '[name].js', publicPath: 'http://localhost:9999/dist/', }, plugins: [new webpack.HotModuleReplacementPlugin()], devtool: 'source-map', devServer: { writeToDisk: true, contentBase: path.resolve(__dirname, 'dist'), publicPath: 'http://localhost:9999/dist/', hot: true, inline: true, historyApiFallback: true, port: 9999, headers: { 'Access-Control-Allow-Origin': '*', }, }, }); } else { config = merge(config, { plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash:8].css', }), ], }); } module.exports = config;

उल्लेखनीय रूप से, स्थानीय विकास में, हम publicPath को निर्दिष्ट करते हैं , वेबपैक -देव-सर्वर का संदर्भ देते हैं , और बिना हैश के फ़ाइल नाम उत्पन्न करते हैं। इसके अलावा, devServer के लिए हम writeToDisk निर्दिष्ट करते हैं : सच्चा पैरामीटर।

यहाँ एक स्पष्टीकरण की आवश्यकता है।

डिफ़ॉल्ट रूप से, वेबपैक-देव-सर्वर रैम से संसाधनों को डिस्क पर लिखे बिना वितरित करता है। इस मामले में, हमें इस समस्या का सामना करना पड़ रहा है कि क्लाइंट मेनिफ़ेस्ट ( vue-ssr-client-default.json ), जो डिस्क पर स्थित है, अप्रासंगिक संसाधनों को इंगित किया जाएगा, क्योंकि इसे अपडेट नहीं किया जाएगा। इसके आस-पास जाने के लिए, हम डिस्क्स सर्वर को डिस्क में परिवर्तन लिखने के लिए कहते हैं, जिस स्थिति में क्लाइंट मेनिफ़ेस्ट अपडेट किया जाएगा और आवश्यक संसाधनों को कड़ा किया जाएगा।

वास्तव में, भविष्य में मैं इससे छुटकारा पाना चाहता हूं। एक समाधान युवतियों में है। मेनिफ़ेस्ट को / डिस्टर्ब डायरेक्टरी से नहीं, बल्कि सर्वर url से कनेक्ट करने के लिए server.js में मोड। लेकिन इस मामले में, यह एक अतुल्यकालिक ऑपरेशन बन जाता है। मुझे टिप्पणियों में समस्या का अच्छा समाधान करने में खुशी होगी।

सर्वर साइड रिलोडिंग के लिए Nodemon जिम्मेदार है, जो दो फाइलों पर नजर रखता है: dist / vue-ssr-server-bundle.json और app / server.js और जब वे बदलते हैं तब एप्लिकेशन को पुनरारंभ करता है।

सर्वर को बदलते समय एप्लिकेशन को पुनः आरंभ करने में सक्षम होने के लिए, हम इस फाइल को नोडमॉन में एक प्रवेश बिंदु के रूप में निर्दिष्ट नहीं करते हैं, लेकिन एक nodemon.js फ़ाइल बनाते हैं जिसमें हम server.js कनेक्ट करते हैं । और nodemon.js फ़ाइल प्रविष्टि बिंदु बन जाती है।

उत्पादन मोड में, app / server.js प्रवेश बिंदु बन जाता है।

निष्कर्ष

कुल, हमारे पास सेटिंग्स और कई टीमों के साथ एक भंडार है।

स्थानीय विकास के लिए:

 yarn run dev

क्लाइंट की ओर: यह वेबपैक-डेव-सर्वर लॉन्च करता है , जो Vue घटकों और सरल कोड में परिवर्तन की निगरानी करता है, देव सर्वर के लिए पथ के साथ एक ग्राहक प्रकट उत्पन्न करता है, इसे डिस्क पर सहेजता है और कोड, शैलियों को ब्राउज़र में फ्लाई पर अपडेट करता है।

सर्वर की तरफ: यह मॉनिटरिंग मोड में वेबपैक शुरू करता है, सर्वर बंडल ( vue-ssr-server-bundle.json ) एकत्र करता है और इसे बदलने पर एप्लिकेशन को पुनरारंभ करता है।

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

विधानसभा उत्पादन के लिए:

 yarn run build

क्लाइंट की तरफ: js और css को एकत्रित करता है और नाम के लिए एक हैश जोड़कर, संबंधित संसाधन पथों के साथ एक ग्राहक प्रकट उत्पन्न करता है।

सर्वर की ओर से: एक सर्वर बंडल एकत्र करता है।

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

मुझे आशा है कि वर्णित अनुभव आरामदायक काम के लिए पारिस्थितिकी तंत्र को जल्दी से स्थापित करने और कार्यक्षमता के विकास पर ध्यान केंद्रित करने में मदद करेगा।

कैसे मैंने सर्वर-साइड रेंडरिंग के साथ Vue.js पर विकास किया

सर्वर साइड

ग्राहक भाग

सभा

निष्कर्ष

उपयोगी लिंक

More articles: