next.js 中的 apollo-client with `next-with-apollo` VS next.js docs FAQ 中显示的方法（不使用 `getDataFromTree`）

Question

在 next-with-apollo npm 库和 the approach shown in next.js docs.

中选择的“next.js 中的 apollo-client”方法的对比

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

In next.js doc approach:

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

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

• 在next-with-apollo docs中，声明在withApollo API中，intialState的参数getDataFromTree默认为undefined by implementaion，并且声明“建议永远不要设置这个prop，否则页面将是没有自动静态优化的 lambda“
• get-initial-props 被使用，出于优化原因 next.js 不推荐 一般的事情。既然有非第三方方式，官方推荐，除非有缺点，为什么还要考虑第三方库？

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

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

那么客户端抓取和服务端抓取哪个更好同时支持CSR和SRR？

Answer 1

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

开始了：

next.js doc's apollo examples avoid using getDataFromTree because it traverses the react tree twice in order to trigger all the queries and collect their result afterwards.

The drawback of using the approach on the next.js doc's apollo examples is since you don't use getDataFromTree, you have no way to know which queries your inner components are using. So you need to remember to prefetch everything you need on getStaticProps/getServerSideProps and match the exact same queries/variables

next.js doc's apollo examples way is recommended instead of getInitialProps so I would always use them unless one has some very specific reason not to