Vue 服务器端渲染答案

【问题标题】：Vue Server Side RenderingVue 服务器端渲染
【发布时间】：2020-09-22 14:24:14
【问题描述】：

如果我们在服务器上呈现页面时将 SPA 应用程序转换为 SSR+SPA，则通过调度通过 axios 对 localhost 上的 api 进行 http 调用的操作从 vuex 存储加载数据。

或者需要从数据库中加载数据，以及如何将一些数据传递给 vue 并防止存储操作的调度？

在传统应用程序中，我将直接从数据库中检索该数据，而不是发出 get 请求。

正常吗？是这样吗？

Nuxt 也使用 get 请求而不是数据库查询：

export default {
  asyncData({ params, error }) {
    return axios
      .get(`https://my-api/posts/${params.id}`)
      .then(res => {
        return { title: res.data.title }
      })
      .catch(e => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  }
}

我可以在 serverPrefetch() 中不使用 nuxt 来做到这一点。

另一方面，如果我做类似的事情

export default {
  asyncData({ req, res }) {
    and here if I access database like in node server
   (req, res) => {
      **select something from database **
      return User.findOne({ });
   }
  }
}

后端敏感代码会在前端脚本中可见？！

【问题讨论】：

我认为你应该使用 NuxtJS 来做你想做的事
我知道 nuxt 是因为我认为它也是如此？
ru.nuxtjs.org/guide/async-data 和 ru.nuxtjs.org/api/pages-fetch 在示例中总是使用 axios 而不是数据库查询
如果我理解得很好，我需要在服务器端发出 1-10 个 http 请求来呈现页面？！这会吃cpu和内存吗？但是，如果该网站每分钟/秒有 1000 名用户访问该网站会怎样？
或者我需要在服务器上呈现页面时将所有组件的请求合并为一个

标签： vue.js vuex server-side-rendering

【解决方案1】：

使用 nuxt 是指：

/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;
    }
  });
};

/nuxt.config.js

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

现在this函数.$api会直接调用服务端的controller方法，客户端的this.$api通过axios发送http请求。

没有nuxt怎么办？

【讨论】：