Preloading getServerSideProps data with Next.js?
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.
Related videos on Youtube
Wordpressor
Updated on September 15, 2022Comments
-
Wordpressor over 1 year
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
. -
Wordpressor over 3 yearsI'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 disablesAutomatic Static Optimization
:/ I want to pre-render something then feed it with API data, before it loads I want to see "loading..." -
dna over 3 years
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 over 3 yearsI 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 over 3 yearsJust
fetch
data client side and set a loading state. Remove bothgetServerSideProps
andgetInitialProps
. You can also useswr
library swr.vercel.app that provides a lot of features to fetch data. -
Wordpressor over 3 yearsThank 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 over 3 yearsSure, if you use
swr
you can pass someinitialData
coming from server. swr.vercel.app/docs/with-nextjs. (the link example is withgetStaticProps
, but you are free to usegetServerSideProps
). -
GoonGamja over 3 years@dna This answer gives a lead to solve my problem thank you
-
Mark over 2 yearsIt seems that
getServerSideProps
now supports props value asPromise
github.com/vercel/next.js/pull/28607 but do not know how you'd implement a loading state.