在 nextjs 中查看页面源不显示页面答案

【问题标题】：view page source does not show page in nextjs在 nextjs 中查看页面源不显示页面
【发布时间】：2020-09-15 18:35:08
【问题描述】：

由于 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>
  );
};

【问题讨论】：

因为ssr: false 或者没有用户角色时没有渲染组件？
是否在这些提供者中进行了获取/条件渲染？如果是这样，您需要能够在服务器上进行获取。
条件用于 UserProvider 因为我需要了解每个页面中的当前用户。
@tenor528 抱歉，我不明白“如果是这样，您需要能够在服务器上进行获取”。请您帮我理解一下好吗？
我只是说如果有与该 UserProvider 相关的逻辑在找到用户之前不会呈现页面，您可能需要逻辑来确保在代码出现时可以找到用户在服务器和客户端上执行。这可能意味着在服务器上调用您的端点，或者它可能与打开 ssr 模式的其他建议一样简单（这将允许服务器端获取）。

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

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

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

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

它可能会有所帮助。

【讨论】：

我将 ssr 设置为 true 但仍然看不到源代码。