How to display the dynamic content from api in View Source?

[Maniraj-Murugan]

I have already looked into https://nextjs.org/docs/basic-features/data-fetching and made the following,

I am made a simple example to determine my problem,

Index.js (Simply calling another file Layout in index)

import Layout from "./layout";
import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        <Layout />
      </div>
    );
  }
}

export default Home;

Layout.js

import React from "react";
import Product from "./product";

class Layout extends React.Component {
  static async getInitialProps() {
    const res = await fetch("https://api.github.com/repos/developit/preact");
    const json = await res.json(); // better use it inside try .. catch
    return { stars: json.stargazers_count };
  }

  componentDidMount() {
    if (localStorage.getItem("userLoggedIn")) {
      //Get products details for logged in user api

      //For now let us consider the same api
      const res = fetch("https://api.github.com/repos/developit/preact");
      const json = res.json(); // better use it inside try .. catch
      return { stars: json.stargazers_count };
    } else {
      // Get product details for guest user api

      //For now let us consider the same api
      const res = fetch("https://api.github.com/repos/developit/preact");
      const json = res.json(); // better use it inside try .. catch
      return { stars: json.stargazers_count };
    }
  }

  render() {
    return (
      <div>
        This is layout page
        <Product stars={this.props.stars} />
      </div>
    );
  }
}

export default Layout;

This is the main file I would like to explain what issue I am facing.

Let us not get confused by seeing the above file because I am making same api call in different scenarios.

Say I am fetching api based on two different conditions, one is based on user logged in and another is if not logged in.

For which I have stored the data in localstorage.

But as I am using next js, all the data that has been fetched from api should be displayed in view source but now it is not displaying and I can understand this is due to async behaviour.

Complete simple application example is here: https://codesandbox.io/s/nextjs-getinitialprops-748d5

If you get into this link https://748d5.sse.codesandbox.io/ and click ctrl + u then you would see the source where I am also need the dynaic content fetched from api.

If I am switching the localstorage into getInitialProps method then it doesn't work because I can understand that localstorage not available for SSR..

So it can only be used in componentDidMount but if I use in componentDidMount then I am not getting the dynamic content in view source.

I have made in layout.js file that If I call the localstorage condition in getInitialProps method then it wont work but if I make the same in componentDidMount it works but the dynamic content is not visible in view page source

In the above given example it should get into else part inside componentDidMount() and on ctrl + u it should view the content fetched from api.

As per my understanding it is needed to display all the content including the content fetched from api inside the view source for SEO purpose.

So kindly help me how can I achieve the dynamic content displaying in view source (Which is my end goal)?

[jamesmosier]

So it sounds like you have a few different issues going on.

1. You cannot call getInitialProps() in any file other than a page component (the entry point for your page). Therefore your Layout.js can never call getInitialProps()
2. You are correct that localStorage will never be available when server rendering. So using it to determine what data to fetch in getInitialProps() when server rendering will not work.
3. componentDidMount is not called on the server. So placing your data fetching in there will always render it client side.
4. Also note that getInitialProps runs both on the server and client. From the Next docs:

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the next/link component or by using next/router.

So in order to fetch your data on the server, you will need to determine if a user is logged in another way other than localStorage, such as cookies.

Otherwise, here is a quick example of how you can fetch data on the server:

import React from "react";

class Home extends React.Component {
  // `getServerSideProps` is available as of Next v9.3. It only runs on the server.
  // https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
  // otherwise if you are on Next v9.2 or lower use `getInitialProps` 
  static async getServerSideProps(context) {
    const res = await fetch("https://api.github.com/repos/developit/preact");
    const json = await res.json(); 
    return { stars: json.stargazers_count };
  }

  render() {
    return (
      <div>
        the home component
      </div>
    );
  }
}

export default Home;