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

Question

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

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
• 没有使用从树中获取数据
• 此外，我发现这种方法在客户端重新渲染和 next.js 中 apollo-client 的 SSR 方面更有意义和优雅。我非常喜欢这个

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

• 在 next-with-apollo 文档中指出，在 withApollo API 中，intialState 的参数 getDataFromTree 默认为 undefined by implementaion 并且其声明“建议永远不要设置此属性，否则页面将是一个没有自动的 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