просмотр источника страницы не показывает страницу в nextjs - PullRequest
Новая
       29

просмотр источника страницы не показывает страницу в nextjs

0 голосов
/ 28 мая 2020

Я переместил свой проект с CRA на следующий js из-за SEO. При рендеринге на стороне Sever клиент получает полную страницу HTML в качестве ответа, но в моем случае, когда я просматриваю исходный код своей целевой страницы, я просто вижу <div id="__next"><div></div></div>. На всех страницах источник страницы отображается одинаково.

Вот мой код

страниц / 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 не сможет проиндексировать страницу для 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>
  );
};

1 Ответ

0 голосов
/ 28 мая 2020

При рендеринге компонента MyApp вы передаете: 

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

Я бы прочитал эту страницу - https://www.apollographql.com/docs/react/performance/server-side-rendering/

It возможно может помочь.

...