下一次-阿波罗-先渲染不是SSR。

Question

我正在使用NextJs(9.3.0)用于SSR和graphQL (阿波罗)。

我的应用程序运行良好，但是当我检查google正在看到什么时，阿波罗的数据是不可用的。

​

​

如果我随机地做一个curl https://myWebsite.com，我有时会有一些内容(比如谷歌)没有来自阿波罗的数据，有时还有来自阿波罗的数据。

为了SEO的目的，我需要总是有第一次呈现(刷新后)与数据给买我的后端(阿波罗)。

这是我的文件：apolloClient.tsx

import { ApolloClient } from "apollo-client";
import { AUTH_TOKEN } from "./config";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import Cookies from "js-cookie";
import fetch from "isomorphic-unfetch";
import nextCookies from "next-cookies";
import { uriBackend } from "./config";

let token = null;

export default function createApolloClient(initialState, ctx) {
  // The `ctx` (NextPageContext) will only be present on the server.
  // use it to extract auth headers (ctx.req) or similar.
  // on server
  if (ctx && ctx.req && ctx.req.headers["cookie"]) {
    token = nextCookies(ctx)[AUTH_TOKEN];

    // on client
  } else {
    // console.log("with data get client cookie");
    token = Cookies.get(AUTH_TOKEN);
  }
  const headers = token ? { Authorization: `Bearer ${token}` } : {};

  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: new HttpLink({
      uri: uriBackend, // Server URL (must be absolute)
      fetch,
      headers
    }),
    cache: new InMemoryCache().restore(initialState)
  });
}

Answer 1

在我看来，你的SSR不需要等待数据的获取。如果您的数据很少发生变化，您的一个解决方案可以是静态地用数据生成页面：https://nextjs.org/docs/basic-features/pages#scenario-1-your-page-content-depends-on-external-data

如果使用s，请确保使用异步getServerSideProps，await是您的数据请求：https://nextjs.org/docs/basic-features/pages#server-side-rendering。