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 conten

Answer 1

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 2

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.

Answer 3

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