Question

由于SEO，我将项目从CRA转移到nextjs。在服务器端渲染时，客户端会获得一个完整的HTML页面作为响应，但是在我的情况下，当我查看着陆页面的页面源时，我只会看到<div id="__next"><div></div></div>。在每个页面上，页面源都显示相同的内容。

这是我的代码

pages / index.js

const IndexPage = () => {
  return (
    <Layout title="Home">
      <Home />
    </Layout>
  );
};

export default IndexPage;

_app.js

class MyApp extends App {
  render() {
    const { Component, pageProps, apolloClient } = this.props;
    return (
        <ApolloProvider client={apolloClient}>
            <UserProvider>
              <RoleBasedComponent comp={Component} {...pageProps} />
            </UserProvider>
        </ApolloProvider>
    );
  }
}

export default withApollo(MyApp, {
  ssr: false,
});

我是否有违反服务器端渲染概念的事情？谁能帮助我了解为什么在查看视图页面源代码时HTML响应无法显示？我完全感到困惑，我担心Google bot无法为SEO编制页面索引。

更新

UserContext.js

const UserContext = createContext();

// Use this wherever current user data is required eg const {currentUser, loading} = useContext(UserContext)
const UserProvider = ({ children }) => {
  const token = cookies.getSession();
  return (
    <Query
      query={GET_CURRENT_USER}
      variables={{
        input: {
          token,
        },
      }}
    >
      {({ data, refetch, loading }) => {
        const currentUser = get(data, 'currentUser.data');

        if (loading) return <div />;

        return (
          <UserContext.Provider
            value={{ currentUser, loading, refetchUser: refetch }}
          >
            {children}
          </UserContext.Provider>
        );
      }}
    </Query>
  );
};

Answer 1

渲染组件``MyApp`时，您正在传递：

{export default withApollo(MyApp, {
  ssr: false, // Should be true
});}

我会阅读此页面-https://www.apollographql.com/docs/react/performance/server-side-rendering/

它可能会有所帮助。

查看页面源未在nextjs中显示页面

1 个答案: