All language subtitles for 024 Introducing Client-Side Data Fetching (And When To Use It)_Downloadly.ir_en

Now that we learned a lot

about page pre rendering and data pre-fetching

in various ways, I wanna conclude this course section

by having another look at client site data fetching.

So basically the opposite of what we did thus far

where we talked about fetching and preparing data

on the server or during the build process.

When building next JS applications, you will sometimes

have data which just doesn't need to be pre-rendered,

or which can't be pre-rendered.

Examples would be data that changes with high frequency.

So for example, if you have stock data

which you show on some page

and that data changes multiple times every second,

pre fetching and pre rendering might not make too much sense

because you will always see outdated data

when you visit this page.

So in such a case, just showing a loading spinner

when you visit the page,

and then fetching the very latest data for you,

and maybe updating that data

in the background then might be the best user experience.

Another example would be highly user-specific data.

For example, the last orders in an online shop.

If you are in your account and your user profile

and you view that data,

that could be an example where we don't really need

to pre-render a page.

Definitely not for search engines

because they won't see your private profile,

and also not necessarily for the user experience

because if we go to this page, we might be more than fine

with just waiting a second for the data to be loaded

on the client and having a quicker navigation

to the page might be more important

than having the data available right from the start.

Or considered a case that you have partial data.

So let's say you have like a dashboard page

with a lots of different pieces of data,

lots of different kinds of data, in such a case,

loading all these different pieces, which make up

the overall dashboard might just slow down the request

if you do that on the server,

and pre rendering it statically during build time

might also not make sense

because it's personal data or because it's changing a lot.

So in such a scenario, it would again, probably make sense

to fetch that data on the client,

so from inside the regular react app,

once a user navigated to that page.

And these are just some examples.

But there can be used cases like those here,

where pre fetching the data and pre-generating the page

with that data, might just not really work

or might not make too much sense.

And in such cases, it might make the most sense to use

the traditional approach of writing some code

in your react components may be with user fact and fetch,

Q fetch data from some API from inside

the client side react application.

So not from inside get static props

or get service side props, but really from inside

the component, so that this code only runs

once the code executes in the client, not on the server.

And therefore that's what we're now going

to take a closer look at.