vue 服务器端渲染和数据填充

Question

我目前正在重构一个应用程序并将我的所有基本代码转换为 vue。我的要求之一是进行服务器端渲染。

我一直在关注 vue ssr 示例以及黑客新闻示例，以帮助我了解 ssr。

但我确实有一个问题我找不到任何好的答案，在进一步开发之前，我想确保我们做的是正确的事情。

我想知道在 vue 商店中有一些操作调用 api 进行服务器端渲染是否是一种好习惯。

我发现的所有示例都处理它们连接并执行请求的真实外部端点。但这不是我们的设置。

我们确实有一个带有自己端点的“普通”快递应用；例如，express 路由器看起来有点像这样：

// This is our post model, it lives on the same app, so its not a external API
app.get('/posts', (req, res) => Posts.getPosts());

// Resolve request for SSR rendering, pretty much the same as in [vue ssr example](https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router)
app.get(
  const context = { url: req.url }

  createApp(context).then(app => {
    renderer.renderToString(app, (err, html) => {
      if (err) {
        if (err.code === 404) {
          res.status(404).end('Page not found')
        } else {
          res.status(500).end('Internal Server Error')
        }
      } else {
        res.end(html)
      }
    })
  })
);

这部分在客户端和服务器上都可以正常工作。如果您向 /posts 请求某些内容，您会得到回复。

为了有更模块化的代码，我们使用 vuex 存储；是称为 fetchPosts 的操作之一，此操作负责获取视图中的当前帖子。

...
actions: {
  fetchPosts({ commit }) {
    return $axios.get('/posts').then((response) => {
      commit('setPosts', {
        posts: response.data
      });
    });
  }
},
...

我相信对于客户端来说这很好，但是在服务器上渲染时，这可能不是最佳的。

原因是 axios 执行一个实际的 http 请求，它也必须实现 auth 机制，而且通常性能很差。

我的问题是：这是推荐的标准方法吗？

在服务器和客户端中工作的其他可能性是什么？

人们真的会为 api 和渲染应用创建分离的应用吗？

谢谢！

Answer 1

我知道这是一个老问题，但对于未来的访客：

推荐的方法是利用 webpack 模块别名为服务器加载服务器端 api 和为浏览器加载客户端 api。您必须共享相同的调用签名，以允许“交换”api。 这当然大大提高了性能，因为服务器端 api 可以直接进行 db 查询，而不是通过 http 获取数据。

本质上你的 webpack.server.config.js 应该有：

resolve: {
    alias: {
      'create-api': './create-api-server.js'
    }
   }

在你的 webpack.client.config.js 中：

resolve: {
    alias: {
      'create-api': './create-api-client.js'
    }
  }

导入 create-api 现在将加载所需的 api。

查看https://github.com/vuejs/vue-hackernews-2.0 以查看完整示例。