在 SSR 和动态 URL 中使用 Apollo 进行查询 (Next.js)答案

【问题标题】：Query with Apollo in SSR and Dynamic URLs (Next.js)在 SSR 和动态 URL 中使用 Apollo 进行查询 (Next.js)
【发布时间】：2020-05-08 03:35:14
【问题描述】：

我正在开发一个使用像 [slug].js 这样的动态 URL 的项目，我想做的是：当有人访问一些像 domain.com/my-post 这样的 URL 时，我的页面应该查询可用的 slug（即在 graphql 端点中包含诸如 SEO 元标记之类的数据，如果 url 存在于我的数据库中，则加载页面。

我正在使用 SSR、apollo hooks 等。

我的问题是：在生产中，当有人在 facebook 上共享该 url 或类似的东西时，该 url (domain.com/my-post) 上的元标记将是空的 (在查询查找可用的 slug 之前) 或之后元标签和内容已满？考虑到当我使用来自 apollo 的 useQuery 时，我需要返回一些东西来处理来自该查询的加载和错误。当用户访问该网址时，我会显示一条“正在加载”消息。

【问题讨论】：

标签： reactjs next.js apollo

【解决方案1】：

我的问题是：当有人在 Facebook 上分享该网址时，在生产中或类似该网址（domain.com/my-post）上的元标记将是空的（在查询寻找可用的蛞蝓之前）或之后元标记和内容已满？

这取决于您在哪里提出请求。如果您让请求服务器端（例如在getInitialProps 内部）页面将在预渲染之前等待获取数据，这意味着当页面渲染时，它将使用元标记进行渲染。

如果您遵循 with-apollo 示例，它应该 render server side 显然只有当您在 pages 中使用您的 HOC 时，否则如果您在组件树中更深地导入您的 HOC，getInitialProps 将被忽略（因为它只在页面中起作用）

【讨论】：