1
00:00:03,000 --> 00:00:06,062
To recap, we want to fetch the product data

2
00:00:06,062 --> 00:00:09,267
from our CMS, and display it in our HomePage.

3
00:00:09,267 --> 00:00:12,116
And we want to compare two main options:

4
00:00:12,759 --> 00:00:15,217
fetching the data on the client side,

5
00:00:15,717 --> 00:00:18,091
or doing it on the server side.

6
00:00:18,591 --> 00:00:21,604
Let's start with the server side approach,

7
00:00:21,604 --> 00:00:23,326
that we called option 1,

8
00:00:23,326 --> 00:00:25,766
so we created this "index-1" page.

9
00:00:26,410 --> 00:00:28,677
We mentioned that this is similar to

10
00:00:28,677 --> 00:00:30,693
what we did in our Blog example,

11
00:00:31,256 --> 00:00:33,737
that is we want to pass the "products"

12
00:00:33,737 --> 00:00:36,087
as a prop to our HomePage component.

13
00:00:36,652 --> 00:00:40,126
And then create that special Next.js function,

14
00:00:40,126 --> 00:00:41,938
called "getStaticProps",

15
00:00:41,938 --> 00:00:44,656
that is executed on the server side.

16
00:00:45,307 --> 00:00:48,017
Here we want to return an object with the "props",

17
00:00:49,441 --> 00:00:51,213
containing our "products" data.

18
00:00:51,941 --> 00:00:54,181
And I'm also going to log a message

19
00:00:54,181 --> 00:00:56,422
every time this function is called,

20
00:00:56,422 --> 00:00:58,342
just because this will help us

21
00:00:58,342 --> 00:01:00,070
understand how things work.

22
00:01:01,874 --> 00:01:03,207
Ok, if we save now,

23
00:01:03,207 --> 00:01:04,611
and reload the page,

24
00:01:05,974 --> 00:01:07,757
it looks the same as before

25
00:01:07,757 --> 00:01:10,530
because we're still using this dummy data,

26
00:01:10,530 --> 00:01:12,709
but it is using "getStaticProps".

27
00:01:13,341 --> 00:01:16,480
Now, rather than using this hard-coded data

28
00:01:16,480 --> 00:01:18,816
we want to call the backend API.

29
00:01:19,390 --> 00:01:22,499
We know that this is the URL to get the products,

30
00:01:22,499 --> 00:01:23,705
so let's copy that.

31
00:01:24,269 --> 00:01:27,534
And in getStaticProps we can use "fetch"

32
00:01:27,534 --> 00:01:30,554
to make an HTTP request for that URL.

33
00:01:31,136 --> 00:01:33,645
"fetch" returns a "response" object,

34
00:01:33,645 --> 00:01:36,782
but asynchronously, so we need to "await" it.

35
00:01:37,352 --> 00:01:38,732
And since we know that

36
00:01:38,732 --> 00:01:40,990
the response body is in JSON format,

37
00:01:40,990 --> 00:01:44,127
we can call the "json()" method on the "response",

38
00:01:44,753 --> 00:01:48,308
which is also asynchronous so remember to use "await",

39
00:01:48,308 --> 00:01:50,744
and this return the parsed JSON data,

40
00:01:50,744 --> 00:01:53,575
that in our case is an array of "products".

41
00:01:53,575 --> 00:01:56,077
We're already returning the "products"

42
00:01:56,077 --> 00:01:57,723
inside the "props" below,

43
00:01:58,486 --> 00:02:00,333
so let's save these changes,

44
00:02:00,333 --> 00:02:01,982
and if we reload the page

45
00:02:01,982 --> 00:02:04,554
so it will call "getStaticProps" again,

46
00:02:05,185 --> 00:02:07,802
we can now see six products in the list,

47
00:02:07,802 --> 00:02:10,287
and you can tell that they're the ones

48
00:02:10,287 --> 00:02:11,595
returned by the CMS.

49
00:02:11,595 --> 00:02:12,576
So far so good.

50
00:02:13,272 --> 00:02:15,963
Now, it's always a good idea to extract

51
00:02:15,963 --> 00:02:17,550
the data fetching logic

52
00:02:17,550 --> 00:02:19,136
into a separate module,

53
00:02:19,136 --> 00:02:21,689
just like we did in our Blog example.

54
00:02:22,395 --> 00:02:24,962
So what I'm going to do is go and create

55
00:02:24,962 --> 00:02:26,501
a separate "lib" folder,

56
00:02:26,501 --> 00:02:28,554
again just like in our Blog app.

57
00:02:29,182 --> 00:02:30,987
Here we can create a module

58
00:02:30,987 --> 00:02:32,458
called say "products",

59
00:02:32,458 --> 00:02:35,198
where we'll keep any functions to do with

60
00:02:35,198 --> 00:02:36,669
fetching product data.

61
00:02:37,370 --> 00:02:40,430
Let's create a function called "getProducts",

62
00:02:40,430 --> 00:02:43,150
that we want to be exported and "async".

63
00:02:43,718 --> 00:02:45,651
And here we can basically move

64
00:02:45,651 --> 00:02:48,420
the code we just wrote in "getStaticProps",

65
00:02:48,420 --> 00:02:50,675
to fetch the products from the API.

66
00:02:51,304 --> 00:02:53,584
But from this function we also want to

67
00:02:53,584 --> 00:02:54,903
return the "products".

68
00:02:55,569 --> 00:02:57,814
This way in the HomePage we can

69
00:02:57,814 --> 00:03:00,928
simply call the new "getProducts" function,

70
00:03:00,928 --> 00:03:03,680
that of course we also need to import.

71
00:03:04,370 --> 00:03:05,749
And that should be that.

72
00:03:05,749 --> 00:03:07,358
Let's try reloading the page

73
00:03:07,358 --> 00:03:08,968
to make sure it still works.

74
00:03:09,582 --> 00:03:11,671
Ok. Now, in our console message

75
00:03:11,671 --> 00:03:13,827
we can see all the product data.

76
00:03:14,395 --> 00:03:16,268
Note that each product object

77
00:03:16,268 --> 00:03:17,753
has lots of properties,

78
00:03:17,753 --> 00:03:20,014
because that's what Strapi returns.

79
00:03:20,644 --> 00:03:23,036
But we don't really need all those properties.

80
00:03:23,036 --> 00:03:25,740
In fact right now we're only displaying the "title".

81
00:03:26,293 --> 00:03:29,273
Let's go and simplify that data a little bit,

82
00:03:29,273 --> 00:03:32,055
just to avoid passing around large objects

83
00:03:32,055 --> 00:03:33,313
for no good reason.

84
00:03:33,945 --> 00:03:35,584
Let's write a helper function,

85
00:03:35,584 --> 00:03:37,168
let's call it "stripProduct".

86
00:03:37,722 --> 00:03:39,879
This will take a "product" object

87
00:03:39,879 --> 00:03:42,755
with all the properties returned by the CMS,

88
00:03:43,320 --> 00:03:45,215
and will return a new object

89
00:03:45,215 --> 00:03:47,448
with only the properties we need.

90
00:03:48,015 --> 00:03:49,822
So for now we want the "id"

91
00:03:49,822 --> 00:03:51,228
that's always useful,

92
00:03:51,794 --> 00:03:53,433
and then the "product.title".

93
00:03:55,060 --> 00:03:56,950
Ok. Now that we have this function,

94
00:03:56,950 --> 00:03:59,218
we can use it to transform the "products".

95
00:04:00,360 --> 00:04:02,317
by calling "map" on the array

96
00:04:02,317 --> 00:04:05,824
and passing "stripProduct" as the function to apply.

97
00:04:06,391 --> 00:04:08,331
Ok, let's see what difference this makes.

98
00:04:09,625 --> 00:04:12,133
If we look at the product data again,

99
00:04:12,133 --> 00:04:14,641
you can see that each object only has

100
00:04:14,641 --> 00:04:16,675
"id" and "title" as we wanted.

101
00:04:17,310 --> 00:04:19,418
So that's the data that is passed

102
00:04:19,418 --> 00:04:22,295
from "getStaticProps" to the React component,

103
00:04:22,858 --> 00:04:24,931
as we can see in the server logs as well.

104
00:04:25,431 --> 00:04:27,998
Good. So this is our implementation

105
00:04:27,998 --> 00:04:31,004
for fetching the data on the server side,

106
00:04:31,004 --> 00:04:32,471
in "getStaticProps".

107
00:04:33,117 --> 00:04:36,043
In the next video we'll look at "Option 2",

108
00:04:36,043 --> 00:04:38,831
that is fetching data on the client side.