seo Question posted in
Some basic information to get you started with this can be found here.

view page source does not show page in nextjs – SEO

I shifted my project from CRA to nextjs because of SEO. On Sever side rendering, the client gets a complete HTML page as a response but in my case when i view page source of my landing page then i just see <div id="__next"><div></div></div>. On every pages, the page source shows the same.

Here is my code

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,
});

Is there something i did to violate the concept of server side rendering? Can anyone help me to understand why the HTML response is not viewable when looking at the view page source? I am totally confused and I afraid if google bot cannot index the page for SEO.

UPDATE

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>
  );
};
Tags:

2

Answers


  1. 0

    When rendering the component “MyApp` you’re passing: 

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

    I would give a read to this page – https://www.apollographql.com/docs/react/performance/server-side-rendering/

    It can probably help.

    Login or Signup to reply.
  2. 0

    u can use this from documentation … https://nextjs.org/docs/advanced-features/custom-document (Customizing renderPage)

    and try to include strategy=’beforeInteractive’ inside Scripts.
    In my case i receive some props from each article (or each page) That is why i used extra tags. Be careful about your layout .Try to make layout which will dynamically receive meta tags or link tags which u will include inside metagas

    Here is code example

    import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
import React from 'react';

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    let pageProps = null;
    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => {
          pageProps = props.pageProps;
          return <App {...props} />
        },
        enhanceComponent: (Component) => Component,
      })
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, pageProps }
  }

  render() {
    const { pageProps } = this.props;

    let {
      title = "Your page title",
      description = " Your description",
      keywords = "Your keywordss",
      extraTags=[],
    } = (typeof pageProps === 'object' && typeof pageProps.head === 'object') ? pageProps.head : {};

    return (
      <Html>
        <Head >
          <title>{title}</title>
          <meta name="description" content={description} />
          <meta name="keywords" content={keywords} />
         
       
          {extraTags.map((tag, i) => {
            let { attr, name, textContent } = tag;
            if (name === 'link') {
              return <link key={i} {...attr} />
            } else if (name === 'script') {
              let { type, data } = typeof textContent === 'object' ? textContent : {};
              if (type === 'object') {
                return <Script key={i} {...attr} strategy='beforeInteractive' >{JSON.stringify(data)}</Script>
              } else if (type === 'string') {
                return <Script key={i} {...attr} strategy='beforeInteractive' >{data}</Script>
              } {
                return <React.Fragment key={i}></React.Fragment>
              }
            } else {
              return <React.Fragment key={i}></React.Fragment>
            }
          })}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search