【问题标题】:Nuxt SSR blog still calling API endpoints to get blog posts even thought its setup to be SSRNuxt SSR 博客仍然调用 API 端点来获取博客文章,即使它的设置是 SSR
【发布时间】:2019-10-11 01:18:29
【问题描述】:

一直在玩一个用 JSONPlaceholder 和 Nuxt.js 构建的简单博客

一切似乎都很好,我有一个存档和单个博客文章工作正常,但是当部署在 Netlify 上时,我可以看到浏览器仍在对 JSONPlaceholder 进行 API 调用,即使所有页面都是静态构建的,我可以看到它们HTML 中已有内容。

我使用了 nuxt 配置中 generate 中的 routes 方法,根据 JSONPlaceholder /posts 结果创建了 100 个 html 文件。

这是 Netlify 链接:已删除。

还有一个公开回购:https://bitbucket.org/oneupstudio/api-test/src/master/

我错过了什么?

【问题讨论】:

    标签: server-side-rendering nuxt.js


    【解决方案1】:

    Nuxt.js 还不支持“完全静态生成”,请查看RFC

    现在,您可以使用this 模块来使您的 JSON 请求静态化。

    【讨论】:

    • 啊,有趣,在阅读所有内容时没有看到提到的内容。谢谢。
    • 这不是一个正确的说法。目前可以用 Nuxt 做适当的静态 wesbites。 RFC 的标题确实有点误导。请看我的回答
    【解决方案2】:

    Nuxt 当前支持正确的静态网站生成。尽管必须了解 asyncData 中的有效负载参数。因此,如果存在表明静态生成器正在工作的有效负载并且在这种情况下不应进行任何 api 调用:

    async asyncData ({ params, error, payload }) {
      if (payload) return { user: payload }
      else return { user: await backend.fetchUser(params.id) }
    }
    

    阅读更多关于此here 的信息。


    @DreadMinder 提到的RFC 将进一步改进这一点,但您已经可以使用 Nuxt 制作完整的静态网站了。

    【讨论】:

    • 您自己尝试过这种方法吗?你能举一个工作的例子吗?因为据我所知,您提到的这个有效负载功能无助于摆脱对 API 的客户端导航请求。它只是为了加快“生成”命令(通过在一个请求中获取数据而不是每页请求)。
    • 我已经在许多 nuxt 项目上使用上述代码和其他技术,无需任何客户端 api 调用即可工作。是的,它不是那么简单,并且将通过提到的 RFC 进行改进,但仍然可以使用当前的 Nuxt 来完成。
    最近更新 更多