Nuxt फुलस्टैक सर्वर (भाग 2) के साथ अतिरिक्त SSR प्रदर्शन

• भाग 1: फुलस्टैक सर्वर के रूप में न्यूक्स्ट: फ्रंटएंड + बैकएंड एपीआई सर्वर
• भाग 2: Nuxt फुलस्टैक सर्वर के साथ अतिरिक्त SSR प्रदर्शन

भाग 2: सर्वर रेंडरिंग में तेजी!

1. क्लाइंट मुख्य पेज 3gzhl.sse.codesandbox.io का अनुरोध करता है
2. Nuxt सर्वर पर पेज / पेजेस /index.vue का प्रतिपादन करना शुरू करता है
3. के लिए आता है
   
   

     async fetch() {
       this.users = await this.$api("users", "index");
     },
   

4. वाया Axios, वह एक बनाता है http अनुरोध , पर 3gzhl.sse.codesandbox.io/api/users/index अर्थात अपने आप पर
5. एक कनेक्शन स्थापित किया गया है, सर्वर पर एक नया सत्र बनाया गया है, और http अनुरोध को संसाधित करने के लिए मेमोरी आवंटित की गई है
6. एक आवक अनुरोध http प्रोटोकॉल के माध्यम से स्वीकार किया जाता है , url को पार्स किया जाता है, मापदंडों को संसाधित किया जाता है
7. सर्वर मिडलवेयर को निष्पादित करता है
8. Nuxt ने हमारा API सर्वर लॉन्च किया
9. JSON
10. users.index(), JSON
11. JSON http
12. axios JSON
13. API

1. नाम बदलें फ़ाइल /plugins/api-context.js को /plugins/api-context.client.js
2. सेटिंग्स /nuxt.config.js में फ़ाइल का नाम बदलें
   
   

     plugins: ["~/plugins/api-context.client.js"]
   

   
   अब यह $ Api संदर्भ केवल क्लाइंट कोड के लिए उपलब्ध है
   
3. इसे बनाने के लिए । $ api प्रसंग को सीधे नियंत्रक को
   
   /plugins/api-context.server.js सर्वर पर कॉल करें
   

   export default (context, inject) => {
     inject("api", async (controller, method, params) => {
       try {
         let api = require("../api/" + controller.replace(/^\/+|\/+$|\.+/g, ""));
         return await api[method](params);
       } catch (e) {
         console.error(e);
         throw e;
       }
     });
   };
   

4. सर्वर प्लगइन
   
   /nuxt.config.js कनेक्ट करें
   

     plugins: [
       "~/plugins/api-context.client.js",
       "~/plugins/api-context.server.js"
     ]
   

  async fetch() {
    this.users = await this.$api("users", "index");
  },

प्रदर्शन का परीक्षण

1. बाहरी कनेक्शन की गति के प्रभाव को खत्म करने के लिए, मैंने स्थैतिक डेटा के साथ डेटा प्राप्त किया:
   
   /api/users.js
   

   // we can get data from any DB
   async function getDataFromDB() {
     return {
       page: 1,
       per_page: 6,
       total: 12,
       total_pages: 2,
       data: [
         {
           id: 1,
           email: "george.bluth@reqres.in",
           first_name: "George",
           last_name: "Bluth",
           avatar:
             "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
         },
         {
           id: 2,
           email: "janet.weaver@reqres.in",
           first_name: "Janet",
           last_name: "Weaver",
           avatar:
             "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
         },
         {
           id: 3,
           email: "emma.wong@reqres.in",
           first_name: "Emma",
           last_name: "Wong",
           avatar:
             "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
         },
         {
           id: 4,
           email: "eve.holt@reqres.in",
           first_name: "Eve",
           last_name: "Holt",
           avatar:
             "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
         },
         {
           id: 5,
           email: "charles.morris@reqres.in",
           first_name: "Charles",
           last_name: "Morris",
           avatar:
             "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
         },
         {
           id: 6,
           email: "tracey.ramos@reqres.in",
           first_name: "Tracey",
           last_name: "Ramos",
           avatar:
             "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
         }
       ],
       ad: {
         company: "StatusCode Weekly",
         url: "http://statuscode.org/",
         text:
           "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
       }
     };
     /*
     return (await require("axios").get(`https://reqres.in/api/users?page=1`))
       .data;
     */
   }
   ....
   

2. api , http
   
   /plugins/api-context.server.js
   

   export default (context, inject) => {
     inject("server", () => true);
     inject("api", async (controller, method, params) => {
       try {
         if (params && params.httpcall) {
           return await context.$axios["$" + (params ? "post" : "get")](
             "/api/" + controller + "/" + method,
             params
           );
         }
         let api = require("../api/" + controller.replace(/^\/+|\/+$|\.+/g, ""));
         return await api[method](params);
       } catch (e) {
         console.error(e);
         throw e;
       }
     });
   };
   

3. index.vue fetch api 50
   
   /pages/index.vue
   

     async fetch() {
       let start = new Date();
       let promises = [];
       let callNum = 50;
       for (let i = 0; i < callNum; i++) {
         promises.push(this.$api("users", "index"));
       }
   
       let arr = await Promise.all(
         promises.map(async p => {
           return await p;
         })
       );
   
       let res = [];
       for (let r of arr) {
         res = res.concat(r);
       }
   
       this.users = res;
       this.fetchType =
         (this.$server && this.$server() ? "Server internal" : "Client http") +
         " API call";
       this.fetchTime = new Date() - start;
     },
   

4. httpcall.vue fetch api 50 http
   
   /pages/httpcall.vue
   

   ...
         promises.push(this.$api("users", "index", { httpcall: true }));
   ...
       this.fetchType =
         (this.$server && this.$server() ? "Server http" : "Client http") +
         " API call";
   ...
   

5. अब rzdyw.sse.codesandbox.io
   
   सर्वर आंतरिक API कॉल रेंडरिंग के निष्पादन समय की तुलना करें: 1ms का
   समय 0ms से अधिकतम 2ms
   
   rzdyw.sse.codesandbox.io/httpsall
   सर्वर http API कॉल करने का समय लाने का समय: 46ms
   से अधिकतम 1059ms के लिए 71ms समय
   और कई बार सर्वर आम तौर पर एक त्रुटि के साथ क्रैश हो जाता है
   
   RangeError
Maximum call stack size exceeded


कुल भाग २

• न्यूनतम परिवर्तनों के साथ, आप 50 से अधिक बार सर्वर रेंडरिंग को गति दे सकते हैं, एक जीवंत उदाहरण पर, मेरे पेज को प्रतिपादन ~ 1.7 गुना से त्वरित किया गया था
• नोड HTTP सर्वर संसाधनों में काफी कमी आई है
• एक अनुकूलित तरीके से, Nuxt का एकमात्र उदाहरण छोटे और मध्यम आकार की परियोजनाओं के भार का सामना करना चाहिए