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

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

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

然而,我确实有一个问题,我找不到任何好的答案,在进一步发展之前,我想确保我们正在做正确的事情。

我想知道在vue存储中调用api进行服务器端渲染是否是一种好的做法。

我发现的所有示例都涉及一个实际的外部端点,它们连接并执行请求。但这不是我们的设置。

我们有一个“普通”的express应用程序,它有自己的端点;例如,express router看起来有点像这样:

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

这一部分在客户端和服务器上都可以正常工作。如果你向/发布请求,你会得到回复。

为了获得更模块化的代码,我们使用vuex商店;作为名为fetchPosts的操作之一,此操作负责获取视图中的当前帖子。

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

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

原因是axios正在执行一个实际的http请求,这也必须实现身份验证机制,而且通常性能非常差。

我的问题是:这是推荐的标准方法吗?

在服务器和客户机中工作的其他可能性有哪些?

人们真的为api和渲染应用程序创建了分离的应用程序吗?

谢谢