1
00:00:02,000 --> 00:00:03,000
Now that we learned a lot

2
00:00:03,000 --> 00:00:08,000
about page pre rendering and data pre-fetching

3
00:00:08,000 --> 00:00:13,000
in various ways, I wanna conclude this course section

4
00:00:13,000 --> 00:00:16,000
by having another look at client site data fetching.

5
00:00:16,000 --> 00:00:20,000
So basically the opposite of what we did thus far

6
00:00:20,000 --> 00:00:23,000
where we talked about fetching and preparing data

7
00:00:23,000 --> 00:00:26,000
on the server or during the build process.

8
00:00:26,000 --> 00:00:30,000
When building next JS applications, you will sometimes

9
00:00:30,000 --> 00:00:35,000
have data which just doesn't need to be pre-rendered,

10
00:00:35,000 --> 00:00:38,000
or which can't be pre-rendered.

11
00:00:38,000 --> 00:00:42,000
Examples would be data that changes with high frequency.

12
00:00:42,000 --> 00:00:44,000
So for example, if you have stock data

13
00:00:44,000 --> 00:00:47,000
which you show on some page

14
00:00:47,000 --> 00:00:51,000
and that data changes multiple times every second,

15
00:00:51,000 --> 00:00:55,000
pre fetching and pre rendering might not make too much sense

16
00:00:55,000 --> 00:00:59,000
because you will always see outdated data

17
00:00:59,000 --> 00:01:01,000
when you visit this page.

18
00:01:01,000 --> 00:01:04,000
So in such a case, just showing a loading spinner

19
00:01:04,000 --> 00:01:05,000
when you visit the page,

20
00:01:05,000 --> 00:01:09,000
and then fetching the very latest data for you,

21
00:01:09,000 --> 00:01:11,000
and maybe updating that data

22
00:01:11,000 --> 00:01:15,000
in the background then might be the best user experience.

23
00:01:15,000 --> 00:01:19,000
Another example would be highly user-specific data.

24
00:01:19,000 --> 00:01:23,000
For example, the last orders in an online shop.

25
00:01:23,000 --> 00:01:26,000
If you are in your account and your user profile

26
00:01:26,000 --> 00:01:29,000
and you view that data,

27
00:01:29,000 --> 00:01:31,000
that could be an example where we don't really need

28
00:01:31,000 --> 00:01:34,000
to pre-render a page.

29
00:01:34,000 --> 00:01:36,000
Definitely not for search engines

30
00:01:36,000 --> 00:01:40,000
because they won't see your private profile,

31
00:01:40,000 --> 00:01:44,000
and also not necessarily for the user experience

32
00:01:44,000 --> 00:01:47,000
because if we go to this page, we might be more than fine

33
00:01:47,000 --> 00:01:51,000
with just waiting a second for the data to be loaded

34
00:01:51,000 --> 00:01:54,000
on the client and having a quicker navigation

35
00:01:54,000 --> 00:01:57,000
to the page might be more important

36
00:01:57,000 --> 00:02:00,000
than having the data available right from the start.

37
00:02:00,000 --> 00:02:04,000
Or considered a case that you have partial data.

38
00:02:04,000 --> 00:02:06,000
So let's say you have like a dashboard page

39
00:02:06,000 --> 00:02:09,000
with a lots of different pieces of data,

40
00:02:09,000 --> 00:02:13,000
lots of different kinds of data, in such a case,

41
00:02:13,000 --> 00:02:15,000
loading all these different pieces, which make up

42
00:02:15,000 --> 00:02:19,000
the overall dashboard might just slow down the request

43
00:02:19,000 --> 00:02:21,000
if you do that on the server,

44
00:02:21,000 --> 00:02:24,000
and pre rendering it statically during build time

45
00:02:24,000 --> 00:02:26,000
might also not make sense

46
00:02:26,000 --> 00:02:30,000
because it's personal data or because it's changing a lot.

47
00:02:30,000 --> 00:02:34,000
So in such a scenario, it would again, probably make sense

48
00:02:34,000 --> 00:02:37,000
to fetch that data on the client,

49
00:02:37,000 --> 00:02:40,000
so from inside the regular react app,

50
00:02:40,000 --> 00:02:44,000
once a user navigated to that page.

51
00:02:44,000 --> 00:02:46,000
And these are just some examples.

52
00:02:46,000 --> 00:02:50,000
But there can be used cases like those here,

53
00:02:50,000 --> 00:02:54,000
where pre fetching the data and pre-generating the page

54
00:02:54,000 --> 00:02:57,000
with that data, might just not really work

55
00:02:57,000 --> 00:03:00,000
or might not make too much sense.

56
00:03:00,000 --> 00:03:04,000
And in such cases, it might make the most sense to use

57
00:03:04,000 --> 00:03:08,000
the traditional approach of writing some code

58
00:03:08,000 --> 00:03:13,000
in your react components may be with user fact and fetch,

59
00:03:13,000 --> 00:03:17,000
Q fetch data from some API from inside

60
00:03:17,000 --> 00:03:20,000
the client side react application.

61
00:03:20,000 --> 00:03:23,000
So not from inside get static props

62
00:03:23,000 --> 00:03:27,000
or get service side props, but really from inside

63
00:03:27,000 --> 00:03:30,000
the component, so that this code only runs

64
00:03:30,000 --> 00:03:35,000
once the code executes in the client, not on the server.

65
00:03:35,000 --> 00:03:36,000
And therefore that's what we're now going

66
00:03:36,000 --> 00:03:38,000
to take a closer look at.