时间戳

首页 > 解决方案 > 在 SSR 和动态 URL 中使用 Apollo 进行查询 (Next.js)

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

问题描述

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

我正在使用 SSR、apollo hooks 等。

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

标签： reactjsnext.jsapollo

解决方案

我的问题是：在生产中，当有人在 facebook 上共享该 url 或类似的东西时，该 url (domain.com/my-post) 上的元标记将是空的 (在查询查找可用的 slug 之前) 或在元标记和内容之后满了吗？

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

如果您遵循 with-apollo 示例，它应该只在您使用 HOC 时才明显呈现服务器端pages，否则如果您在组件树中更深入地导入 HOC，getInitialProps则将被忽略（因为它仅在页面中有效）

推荐阅读