Question

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

我一直遵循vue ssr示例以及黑客新闻示例来帮助我理解ssr。

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

我想知道在vue商店中采取一些措施来调用服务器端渲染的api是否是一种好习惯。

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

我们确实有一个带有其自身端点的“正常”快递应用程序；因此，例如，快速路由器看起来像这样：

// 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可以直接执行数据库查询，而不是通过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可以看到完整的示例。

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

1 个答案: