{"id":303498,"date":"2020-05-13T09:01:01","date_gmt":"2020-05-13T09:01:01","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=303498"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=303498","title":{"rendered":"Additional SSR performance with Nuxt fullstack server (\u0427\u0430\u0441\u0442\u044c 2)"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/501688\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/id\/da\/9y\/idda9yg7oiwb8bqqn5y8w2-u4ja.jpeg\" alt=\"Additional SSR performance with Nuxt fullstack server\"><\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/501652\/\">\u0427\u0430\u0441\u0442\u044c 1: Nuxt as fullstack server: frontend + backend API Server<\/a><\/li>\n<li><b>\u0427\u0430\u0441\u0442\u044c 2: Additional SSR performance with Nuxt fullstack server<\/b><\/li>\n<\/ul>\n<p>  \u0412 \u0427\u0430\u0441\u0442\u0438 1 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043a\u0430\u043a \u043b\u0435\u0433\u043a\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c <b>API Server<\/b> \u0432 <b>Nuxt<\/b>. \u0412 \u0427\u0430\u0441\u0442\u0438 2 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0438\u0437 <b>Nuxt fullstack server<\/b>.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 2: \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0433!<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<br \/>  <a href=\"https:\/\/codesandbox.io\/s\/codesandbox-nuxt-3gzhl\" rel=\"nofollow\">codesandbox.io\/s\/codesandbox-nuxt-3gzhl<\/a>.  <\/p>\n<ol>\n<li>\u043a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<br \/>  <a href=\"https:\/\/3gzhl.sse.codesandbox.io\/\" rel=\"nofollow\">3gzhl.sse.codesandbox.io<\/a><\/li>\n<li><b>Nuxt<\/b> \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <b>\/pages\/index.vue<\/b><\/li>\n<li>\u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e<br \/> \n<pre><code class=\"javascript\">  async fetch() {     this.users = await this.$api(&quot;users&quot;, &quot;index&quot;);   }, <\/code><\/pre>\n<\/li>\n<li>\u0447\u0435\u0440\u0435\u0437 <b>axios<\/b> \u0434\u0435\u043b\u0430\u0435\u0442 <b>http \u0437\u0430\u043f\u0440\u043e\u0441<\/b>, \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<br \/>  <a href=\"https:\/\/3gzhl.sse.codesandbox.io\/api\/users\/index\" rel=\"nofollow\">3gzhl.sse.codesandbox.io\/api\/users\/index<\/a><br \/>  \u0442.\u0435. \u0441\u0430\u043c \u043d\u0430 \u0441\u0435\u0431\u044f<\/li>\n<li>\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435, \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0441\u0435\u0441\u0441\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u043c\u044f\u0442\u044c \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <b>http \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/b><\/li>\n<li>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 <b>http<\/b>, \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f url, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/li>\n<li>\u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 <b>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 middleware<\/b><\/li>\n<li><b>Nuxt<\/b> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043d\u0430\u0448 <b>API Server<\/b><\/li>\n<li>\u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 <b>JSON<\/b><\/li>\n<li>\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u043e\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 <b>users.index()<\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 <b>JSON<\/b><\/li>\n<li><b>JSON<\/b> \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 <b>http<\/b><\/li>\n<li>\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 <b>axios<\/b> \u0438 \u043f\u0430\u0440\u0441\u044f\u0442\u0441\u044f \u0432 <b>JSON<\/b><\/li>\n<li>\u0441\u0435\u0441\u0441\u0438\u044f API \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f<\/li>\n<\/ol>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f 20 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 <b>API<\/b>, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430 \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b c <b>Nuxt<\/b> \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e 20 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 <b>http<\/b> \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439 \u0438 \u043f\u0443\u043d\u043a\u0442\u044b 4-13 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b 20 \u0440\u0430\u0437. <b>Nuxt HTTP \u0441\u0435\u0440\u0432\u0435\u0440<\/b> \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 55 \u0442\u044b\u0441\u044f\u0447 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043c\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0440\u0430\u0437.<br \/>  \u041d\u043e \u0432\u0435\u0434\u044c \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u0432\u0441\u0435\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u0432 \u043f\u0430\u043f\u043a\u0435 <b>\/api\/<\/b><\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u0433\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043a\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0430 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u0448\u0451\u043b \u043f\u043e <b>http<\/b>  <\/p>\n<ol>\n<li>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0435\u043c \u0444\u0430\u0439\u043b<br \/>  <b>\/plugins\/api-context.js<\/b><br \/>  \u0432<br \/>  <b>\/plugins\/api-context.client.js<\/b>  <\/li>\n<li>\u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445<br \/>  \/nuxt.config.js<br \/> \n<pre><code class=\"javascript\">  plugins: [&quot;~\/plugins\/api-context.client.js&quot;] <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 <b>this.$api<\/b> \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430  <\/li>\n<li>\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 <b>this.$api<\/b> \u0434\u043b\u044f \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<br \/>  \/plugins\/api-context.server.js<br \/> \n<pre><code class=\"javascript\">export default (context, inject) =&gt; {   inject(&quot;api&quot;, async (controller, method, params) =&gt; {     try {       let api = require(&quot;..\/api\/&quot; + controller.replace(\/^\\\/+|\\\/+$|\\.+\/g, &quot;&quot;));       return await api[method](params);     } catch (e) {       console.error(e);       throw e;     }   }); }; <\/code><\/pre>\n<\/li>\n<li>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d<br \/>  \/nuxt.config.js<br \/> \n<pre><code class=\"javascript\">  plugins: [     &quot;~\/plugins\/api-context.client.js&quot;,     &quot;~\/plugins\/api-context.server.js&quot;   ] <\/code><\/pre>\n<\/li>\n<\/ol>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <b>this.$api<\/b> \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 <b>this.$api<\/b> \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c <b>http \u0437\u0430\u043f\u0440\u043e\u0441<\/b> \u0447\u0435\u0440\u0435\u0437 <b>axios<\/b>.<br \/>  \u043a\u043e\u0434  <\/p>\n<pre><code class=\"javascript\">  async fetch() {     this.users = await this.$api(&quot;users&quot;, &quot;index&quot;);   }, <\/code><\/pre>\n<p>  \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c <b>http \u0437\u0430\u043f\u0440\u043e\u0441<\/b> \u043d\u0430 \u0441\u0435\u0431\u044f \u0436\u0435, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 <b>require<\/b> \u0444\u0430\u0439\u043b <b>\/api\/users.js<\/b> \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <b>index()<\/b>, \u0442.\u0435. \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0443\u043d\u043a\u0442\u044b \u0441 4-13, \u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 10.<br \/>  \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430\u0436\u043c\u0451\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 <b>Refresh<\/b>, \u0442\u043e \u0442\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044f\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <b>http<\/b><\/p>\n<p>  \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434:<br \/>  <a href=\"https:\/\/codesandbox.io\/s\/codesandbox-nuxt-pbriw\" rel=\"nofollow\">codesandbox.io\/s\/codesandbox-nuxt-pbriw<\/a><\/p>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <a href=\"https:\/\/codesandbox.io\/s\/codesandbox-nuxt-rzdyw\" rel=\"nofollow\">codesandbox.io\/s\/codesandbox-nuxt-rzdyw<\/a><\/p>\n<ol>\n<li>\u0414\u043b\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439, \u044f \u0437\u0430\u043c\u0435\u043d\u0438\u043b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:<br \/>  \/api\/users.js<br \/> \n<pre><code class=\"javascript\">\/\/ 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: &quot;george.bluth@reqres.in&quot;,         first_name: &quot;George&quot;,         last_name: &quot;Bluth&quot;,         avatar:           &quot;https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/calebogden\/128.jpg&quot;       },       {         id: 2,         email: &quot;janet.weaver@reqres.in&quot;,         first_name: &quot;Janet&quot;,         last_name: &quot;Weaver&quot;,         avatar:           &quot;https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/josephstein\/128.jpg&quot;       },       {         id: 3,         email: &quot;emma.wong@reqres.in&quot;,         first_name: &quot;Emma&quot;,         last_name: &quot;Wong&quot;,         avatar:           &quot;https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/olegpogodaev\/128.jpg&quot;       },       {         id: 4,         email: &quot;eve.holt@reqres.in&quot;,         first_name: &quot;Eve&quot;,         last_name: &quot;Holt&quot;,         avatar:           &quot;https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/marcoramires\/128.jpg&quot;       },       {         id: 5,         email: &quot;charles.morris@reqres.in&quot;,         first_name: &quot;Charles&quot;,         last_name: &quot;Morris&quot;,         avatar:           &quot;https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/stephenmoon\/128.jpg&quot;       },       {         id: 6,         email: &quot;tracey.ramos@reqres.in&quot;,         first_name: &quot;Tracey&quot;,         last_name: &quot;Ramos&quot;,         avatar:           &quot;https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/bigmancho\/128.jpg&quot;       }     ],     ad: {       company: &quot;StatusCode Weekly&quot;,       url: &quot;http:\/\/statuscode.org\/&quot;,       text:         &quot;A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things.&quot;     }   };   \/*   return (await require(&quot;axios&quot;).get(`https:\/\/reqres.in\/api\/users?page=1`))     .data;   *\/ } .... <\/code><\/pre>\n<\/li>\n<li>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432 api \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0435\u0440\u0435\u0437 <b>http<\/b> \u0438 \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<br \/>  \/plugins\/api-context.server.js<br \/> \n<pre><code class=\"javascript\">export default (context, inject) =&gt; {   inject(&quot;server&quot;, () =&gt; true);   inject(&quot;api&quot;, async (controller, method, params) =&gt; {     try {       if (params &amp;&amp; params.httpcall) {         return await context.$axios[&quot;$&quot; + (params ? &quot;post&quot; : &quot;get&quot;)](           &quot;\/api\/&quot; + controller + &quot;\/&quot; + method,           params         );       }       let api = require(&quot;..\/api\/&quot; + controller.replace(\/^\\\/+|\\\/+$|\\.+\/g, &quot;&quot;));       return await api[method](params);     } catch (e) {       console.error(e);       throw e;     }   }); }; <\/code><\/pre>\n<\/li>\n<li>\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <b>index.vue<\/b> \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <b>fetch<\/b> \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u043c api 50 \u0440\u0430\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c<br \/>  \/pages\/index.vue<br \/> \n<pre><code class=\"javascript\">  async fetch() {     let start = new Date();     let promises = [];     let callNum = 50;     for (let i = 0; i &lt; callNum; i++) {       promises.push(this.$api(&quot;users&quot;, &quot;index&quot;));     }      let arr = await Promise.all(       promises.map(async p =&gt; {         return await p;       })     );      let res = [];     for (let r of arr) {       res = res.concat(r);     }      this.users = res;     this.fetchType =       (this.$server &amp;&amp; this.$server() ? &quot;Server internal&quot; : &quot;Client http&quot;) +       &quot; API call&quot;;     this.fetchTime = new Date() - start;   }, <\/code><\/pre>\n<\/li>\n<li>\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <b>httpcall.vue<\/b> \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <b>fetch<\/b> \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u043c api 50 \u0440\u0430\u0437 \u0447\u0435\u0440\u0435\u0437 http<br \/>  \/pages\/httpcall.vue<br \/> \n<pre><code class=\"javascript\">...       promises.push(this.$api(&quot;users&quot;, &quot;index&quot;, { httpcall: true })); ...     this.fetchType =       (this.$server &amp;&amp; this.$server() ? &quot;Server http&quot; : &quot;Client http&quot;) +       &quot; API call&quot;; ... <\/code><\/pre>\n<\/li>\n<li>\u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<br \/>  <a href=\"https:\/\/rzdyw.sse.codesandbox.io\/\" rel=\"nofollow\">rzdyw.sse.codesandbox.io<\/a><br \/>  Server internal API call rendering fetch time: 1ms<br \/>  \u0432\u0440\u0435\u043c\u044f \u043e\u0442 0ms \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 2ms\n<p>  <a href=\"https:\/\/rzdyw.sse.codesandbox.io\/httpcall\" rel=\"nofollow\">rzdyw.sse.codesandbox.io\/httpcall<\/a><br \/>  Server http API call rendering fetch time: 71ms<br \/>  \u0432\u0440\u0435\u043c\u044f \u043e\u0442 46ms \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 1059ms<br \/>  \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0430\u0434\u0430\u043b \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439<br \/>  <code>RangeError<br \/>  Maximum call stack size exceeded<br \/>  <\/code><\/li>\n<\/ol>\n<p>  \u0432\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<br \/>  <a href=\"https:\/\/codesandbox.io\/s\/codesandbox-nuxt-rzdyw\" rel=\"nofollow\">codesandbox.io\/s\/codesandbox-nuxt-rzdyw<\/a><\/p>\n<h3>\u0418\u0442\u043e\u0433\u043e \u0427\u0430\u0441\u0442\u044c 2<\/h3>\n<p>  <\/p>\n<ul>\n<li>\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0432 50 \u0440\u0430\u0437, \u043d\u0430 \u0436\u0438\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0443 \u043c\u0435\u043d\u044f \u0443\u0441\u043a\u043e\u0440\u044f\u043b\u0441\u044f \u0432 ~1.7 \u0440\u0430\u0437\u0430<\/li>\n<li>\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0440\u0430\u0441\u0445\u043e\u0434 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 Node HTTP \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/li>\n<li>\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 Nuxt&#8217;\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/li>\n<\/ul>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/501688\/\"> https:\/\/habr.com\/ru\/post\/501688\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/501688\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/id\/da\/9y\/idda9yg7oiwb8bqqn5y8w2-u4ja.jpeg\" alt=\"Additional SSR performance with Nuxt fullstack server\"><\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/501652\/\">\u0427\u0430\u0441\u0442\u044c 1: Nuxt as fullstack server: frontend + backend API Server<\/a><\/li>\n<li><b>\u0427\u0430\u0441\u0442\u044c 2: Additional SSR performance with Nuxt fullstack server<\/b><\/li>\n<\/ul>\n<p>  \u0412 \u0427\u0430\u0441\u0442\u0438 1 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043a\u0430\u043a \u043b\u0435\u0433\u043a\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c <b>API Server<\/b> \u0432 <b>Nuxt<\/b>. \u0412 \u0427\u0430\u0441\u0442\u0438 2 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0438\u0437 <b>Nuxt fullstack server<\/b>.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-303498","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=303498"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303498\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}