I don't understand what Preload does
Answered
harshcut posted this in #help-forum
harshcutOP
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data
I don't quite understand what the preload function does in this case? Why is it to be used? I there some other resource that I can look into?
I don't quite understand what the preload function does in this case? Why is it to be used? I there some other resource that I can look into?
Answered by joulev
if you don't preload:
1.
2. if
3.
=>
if you do preload:
1.
2. while
3. if
4. the output of
=>
5. if
1.
checkIsAvailable is run first2. if
isAvailable is truthy, <Item /> is run3.
getItem is then run to render <Item />=>
checkIsAvailable and getItem are run sequentiallyif you do preload:
1.
getItem is initiated2. while
getItem is still running, checkIsAvailable is run3. if
isAvailable is truthy, <Item /> is run4. the output of
getItem that we already computed in step 1 is used to render <Item />=>
getItem do not have to wait for checkIsAvailable to finish before starting => faster5. if
isAvailable is falsy, the computed value of getItem is simply dropped and unused3 Replies
@harshcut https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data
I don't quite understand what the preload function does in this case? Why is it to be used? I there some other resource that I can look into?
if you don't preload:
1.
2. if
3.
=>
if you do preload:
1.
2. while
3. if
4. the output of
=>
5. if
1.
checkIsAvailable is run first2. if
isAvailable is truthy, <Item /> is run3.
getItem is then run to render <Item />=>
checkIsAvailable and getItem are run sequentiallyif you do preload:
1.
getItem is initiated2. while
getItem is still running, checkIsAvailable is run3. if
isAvailable is truthy, <Item /> is run4. the output of
getItem that we already computed in step 1 is used to render <Item />=>
getItem do not have to wait for checkIsAvailable to finish before starting => faster5. if
isAvailable is falsy, the computed value of getItem is simply dropped and unusedAnswer
basically, the preload patterns speed up calculation by initiating expensive function calls before it's determined if they will be necessary to render the page
harshcutOP
great explanation! thank for this