View source not displaying dynamic content

Question

I am making very simple next js application, where everything is working fine but except the view source.

I am making a promise and there is a delay in retrieving content and after when those content loaded and if I view source (ctrl + u) in chrome, I couldn't get those dynamic content loaded in the source.

So it is reproduceable in the link,

Step 1) Just click on the codesandbox link: https://3re10.sse.codesandbox.io

Step 2) After that choose view source (ctrl + u), and it gives page like,

Here you could clearly see that there is no element with text My name is Jared and all other text which is intended to be there but it is not.

Only Loading... text is available in page source which comes on page load.

The entire application working code is available here: https://codesandbox.io/s/nextjs-typescript-template-u8evx

Please help me how could I reflect all the dynamic content in view source in Next Js application.

I could understand that this is due to behaviour of async .. But really I couldn't understand the way to overcome this and display the dynamic content once loaded.. Please help me, I am stuck with this for very long..

A big thanks in advance..

Answer 1

You're explicitly telling React to fetch a user on a client-side.

function Profile() {
  const { data, revalidate } = useSWR("/api/user", fetch);
}

If you need to prerender a user info on the server you can do it with one of the following functions:

• getStaticProps (Static Generation): Fetch data at build time
• getServerSideProps (Server-side Rendering): Fetch data on each request .

As you fetching a user info, I assume that it should be requested on each request, so use getServerSideProps .

const URL = 'api/user/'

export default function Profile({ initialData }) {
  const { data } = useSWR(URL, fetcher, { initialData })

  return (
    // render 
  )
}

export async function getServerSideProps() {
  const data = await fetcher(URL)
  return { props: { initialData: data } }
}

This way you would fetch a user info on the server and give it to React with first render. Also, you would have useSWR on a client side that will periodically revalidate data.

Suggested reading: Data fetching

Answer 2

If you use nextjs you must run yarn build and yarn export then you have directory 'out' with your exported static content.

Because now your example is CSR (client side rendering)

Answer 3

Other answers already quite clear telling you the reason why your dynamic content doesn't appear on source code.

First, there are two kinds of rendering: server side and client side .

• Server side / SSR is when your server render your app and then send it to the client (browser).

• Client side / CSR is when your app reach the browser, it will be rendered again (but this time only render what is necessary if you have activated SSR, which NextJS has as default).

If you want your dynamic content to be appear at the source code, you should call your api on the server side like @Nikolai Kiselev has mentioned. NextJS provides function getServerSideProps() (for the component level) to be used if developers want to fetch info on the server side .

If you put your profile() function as a page , you could also use getInitialProps() function to fetch your api from server side.

Please take a look on NextJS doc, they have given the examples you need.