next.js 中的 apollo-client 与 `next-with-apollo` VS next.js 文档常见问题解答中显示的方法（不使用 `getDataFromTree`）

Posted 2023-03-10

【中文标题】next.js 中的 apollo-client 与 `next-with-apollo` VS next.js 文档常见问题解答中显示的方法（不使用 `getDataFromTree`）

【英文标题】：apollo-client in next.js with `next-with-apollo` VS the approach shown in next.js docs FAQ (no use of `getDataFromTree`)

【发布时间】：2021-10-21 04:36:12

【问题描述】：

在next-with-apollo npm 库和the approach shown in next.js docs 中选择的“apollo-client in next.js”方法的对比。

next.js 为 apollo 客户端选择的方法链接：https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js

In next.js doc approach:

next-with-apollo 未使用第三方库 没有使用 get-data-from-tree 此外，我发现这种方法在 next.js 中对客户端重新渲染和 apollo-client 的 s-s-r 的内部工作更有意义和优雅。我非常喜欢这个

next-with-apollo 方法的一些缺点

在 next-with-apollo 文档中，说明在 withApollo API 中，intialState 的参数 getDataFromTree 默认为 undefined byimplementaion 并声明“建议永远不要设置此属性，否则页面将是一个没有自动的 lambda静态优化" 使用get-initial-props，next.js出于优化原因不推荐 一般的东西。如果有非第三方的方式，官方建议的，除非有缺点，为什么还要考虑第三方库？

看到很多人都在使用next-with-apollo，而很少看到approach shown in next.js docs 的用法让我感到非常好奇？我很好奇 next.js 文档中的方法是否有任何缺点（我强烈认为没有缺点）？

next.js 中显示的方法是否有一些缺点？ next-with-apollo 效率更高吗？如果是这样，那么明智的做法是不要选择 next.js 文档方法来提高效率。我想确定如果我拒绝 next.js 文档方法（目前我选择它）我没有做错任何事情

那么客户端数据获取和服务器数据获取哪个更好以同时支持 CSR 和 SRR？

【参考方案1】：

我通过在 next.js 社区发帖找到了答案：

这里是：

next.js doc's apollo examples 避免使用 getDataFromTree，因为它会遍历反应树两次以触发所有查询并随后收集它们的结果。

在next.js doc's apollo examples 上使用该方法的缺点是由于您不使用getDataFromTree，因此您无法知道您的内部组件正在使用哪些查询。因此，您需要记住在 getStaticProps/getServerSideProps 上预取所需的所有内容并匹配完全相同的查询/变量

建议使用next.js doc's apollo examples 方式而不是getInitialProps，所以我会一直使用它们，除非有一些非常具体的理由不这样做