Preloading getServerSideProps data with Next.js?

Question

I've got a simple React component:

const Page = ({ data }) => {
    return (
        <header>
        {data.length !== 0 ?
          <>
            {data((d) =>
              // render data
            )}
          </>
          :
          <>Loading...</>
        }
        </header>
      )
    }

I'm getting the data using Next.js recommended getServerSideProps:

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`someurl`)
  const data = await res.json()
  // Pass data to the page via props
  return { props: { data } }
}

Now, for the love of God, I can't figure out why <>Loading...</> is never rendering. The page is blank and then everything pops up. Why does it happen and how do I fix that? of course data.length IS 0 before it's fetched...

Note I'm using dynamic routing and do not want to go with getStaticProps.

Solution 1

getServerSideProps always runs on server side also for client side navigation.

When you return data from getServerSideProps (if the fetch method is executed without errors) it will have always return a value.

In your example <Loading /> will be visible only if data returned from fetch has 0 length and will never be visible during fetch.

Here the docs https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

Solution 2

It's obvious that user should not wait a few seconds in which nothing happens (because getServerSideProps is not finished loading) when he clicks a link. He should see some action is happening, for example:

• Loading spinner
• Data template (boxes for images, text and so on), youtube example.

But for now it's not possible with getServerSideProps, because page is rendered only after getServerSideProps request is complete.

There is exist future request on next.js about this, so i hope it will be implemented.

Comments

[Wordpressor]

I'm new to Next.js and this is really confusing. Where does documentation say the component using getServerSideProps will be non-existent before getting the data? What should I use for dynamic content, eg. board with posts? getInitialProps only? They say it's no good and it disables Automatic Static Optimization :/ I want to pre-render something then feed it with API data, before it loads I want to see "loading..."

[dna]

getServerSideProps when executed generate a JSON that will be injected to the Page component. So It doesn't generate static code, but it generate static data at run time, i think Is the best choise to preload dynamic data server side. getInitialProps Is not recomended to use.

[Wordpressor]

I get that, but what do I do now? I tried getInitialProps even though it's not recommended and it just work in the same way - I click on a link, nothing happens for 30 seconds then baam, everything is loaded and from now on it works. I want to click on the Link, and have "loading..." while fetching data. The data will be dynamic. How do I achieve that with Next.js?

[dna]

Just fetch data client side and set a loading state. Remove both getServerSideProps and getInitialProps. You can also use swr library swr.vercel.app that provides a lot of features to fetch data.

[Wordpressor]

Thank you @dna, it works, but what if my API is really slow, is it possible to mix SSR + client side data fetching? I'd love to show anything to my user before the data is fetched, because fetching on client side is just like having no Next.js at all :(

[dna]

Sure, if you use swr you can pass some initialData coming from server. swr.vercel.app/docs/with-nextjs. (the link example is with getStaticProps, but you are free to use getServerSideProps).

[GoonGamja]

@dna This answer gives a lead to solve my problem thank you

[Mark]

It seems that getServerSideProps now supports props value as Promise github.com/vercel/next.js/pull/28607 but do not know how you'd implement a loading state.