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

Question

对比next-with-apollonpm 库中选择的“next.js 中的 apollo-client”方法和next.js 文档中显示的方法。

\n

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

\n

在 next.js 文档方法中：

\n

\n
• 没有使用第三方库\xc2\xa0next-with-apollo\xc2\xa0
\n
• 不使用从树获取数据
\n
• 此外，我发现这种方法在 next.js 中的客户端重新渲染和 apollo-client 的 SSR 内部工作更有意义、更优雅。我非常喜欢这个
\n

\n

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

\n

\n
• 在 next-with-apollo 文档中，指出在 withApollo API 中， intialState 的参数 getDataFromTree 默认为未定义的实现，并声明“建议永远不要设置此属性，否则页面将是一个没有\ xc2\xa0自动静态优化 "
\n
• 使用 get-initial-props ，出于优化原因，next.js 不推荐使用 get-initial-props\n一般情况。如果有非第三方方式并且官方建议，除非它有缺点，为什么要考虑第三方库？
\n

\n

看到许多人正在使用但很少看到next.js 文档中显示的方法next-with-apollo的用法，这让我非常好奇？我很好奇 next.js 文档中的方法是否有任何缺点（我强烈认为没有任何缺点）？

\n

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

\n

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

\n

Answer 1

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

事情是这样的：

next.js 文档的 apollo 示例避免使用 getDataFromTree 因为它会遍历 React 树两次以触发所有查询并随后收集其结果。

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

建议使用next.js 文档的 apollo 示例方式，而不是这样，getInitialProps所以我总是会使用它们，除非有一些非常具体的理由不这样做