1
00:00:03,000 --> 00:00:05,797
We set up the local Strapi server,

2
00:00:05,797 --> 00:00:09,252
with some product data already pre-loaded.

3
00:00:09,835 --> 00:00:13,028
And we've seen how we can call its REST API

4
00:00:13,028 --> 00:00:15,108
to get the list of products.

5
00:00:15,682 --> 00:00:18,768
Now, let's think about how we can fetch

6
00:00:18,768 --> 00:00:21,853
this product data from our Next.js app.

7
00:00:22,432 --> 00:00:25,524
Here I already have the Next.js development server

8
00:00:25,524 --> 00:00:26,884
running in a terminal,

9
00:00:27,445 --> 00:00:30,949
so we can switch to our Shop website in the browser,

10
00:00:30,949 --> 00:00:32,567
and resume developing it

11
00:00:32,567 --> 00:00:35,734
from where we left it before looking at Strapi.

12
00:00:36,368 --> 00:00:38,256
Let's start by preparing the UI

13
00:00:38,256 --> 00:00:39,717
to display the products.

14
00:00:40,277 --> 00:00:42,494
For that I'm going to quickly add

15
00:00:42,494 --> 00:00:44,442
some dummy product data here,

16
00:00:44,442 --> 00:00:47,061
just so we can focus on the UI for now.

17
00:00:47,695 --> 00:00:49,770
Each product will be an object

18
00:00:49,770 --> 00:00:51,637
with an "id" and a "title".

19
00:00:53,396 --> 00:00:55,268
Let me duplicate this line

20
00:00:55,268 --> 00:00:57,067
and add a second product.

21
00:00:58,561 --> 00:01:00,160
Ok. Now, let's log a message

22
00:01:00,160 --> 00:01:02,215
whenever this component is rendered,

23
00:01:04,593 --> 00:01:06,818
including the "products", so later on

24
00:01:06,818 --> 00:01:09,581
we can check if we're fetching the right data.

25
00:01:10,141 --> 00:01:12,616
And now we can add the user interface.

26
00:01:13,116 --> 00:01:14,815
I'm going to keep it simple

27
00:01:14,815 --> 00:01:16,765
and just use an unordered list.

28
00:01:17,327 --> 00:01:20,135
Then we want a list item for each product,

29
00:01:20,135 --> 00:01:22,943
so we can "map" over the "products" array,

30
00:01:23,527 --> 00:01:27,114
and transform each "product" into a list item element

31
00:01:27,114 --> 00:01:29,212
that shows the "product.title".

32
00:01:29,779 --> 00:01:32,944
We also need a unique key for each list item,

33
00:01:32,944 --> 00:01:35,828
and we can use the "product.id" for that.

34
00:01:36,398 --> 00:01:37,531
Ok, so if we save

35
00:01:37,531 --> 00:01:40,594
we'll see our two products listed in the page.

36
00:01:41,160 --> 00:01:42,603
Now, the question is:

37
00:01:42,603 --> 00:01:45,076
how do we get the real product data?

38
00:01:45,644 --> 00:01:48,255
We know that we can call this API endpoint

39
00:01:48,255 --> 00:01:49,995
to get the list of products,

40
00:01:50,557 --> 00:01:53,598
but what's the best way to make this call

41
00:01:53,598 --> 00:01:55,008
in our Next.js app?

42
00:01:55,008 --> 00:01:57,752
There are basically two main options:

43
00:01:57,752 --> 00:02:00,793
we can fetch the data on the server side,

44
00:02:00,793 --> 00:02:02,425
or on the client side.

45
00:02:03,221 --> 00:02:06,527
What I'd like to do is try out all the options

46
00:02:06,527 --> 00:02:08,899
so that we can then compare them.

47
00:02:09,470 --> 00:02:11,402
What I'm going to do is actually

48
00:02:11,402 --> 00:02:13,756
make a few copies of this "index" page,

49
00:02:14,316 --> 00:02:16,857
"index-1" will be our "Option 1",

50
00:02:18,382 --> 00:02:21,817
that is to fetch the products on the server side.

51
00:02:21,817 --> 00:02:24,970
This is pretty much the same approach we took

52
00:02:24,970 --> 00:02:26,372
in our Blog example,

53
00:02:26,372 --> 00:02:28,264
when loading the post data.

54
00:02:28,974 --> 00:02:31,432
In other words, we can fetch the data

55
00:02:31,432 --> 00:02:33,624
in the "getStaticProps" function.

56
00:02:34,191 --> 00:02:35,495
So that's option 1.

57
00:02:36,657 --> 00:02:39,415
Now, let's create another copy of this page,

58
00:02:39,415 --> 00:02:40,355
for "Option 2".

59
00:02:43,189 --> 00:02:44,376
And this is about

60
00:02:44,376 --> 00:02:47,238
fetching the products on the client side.

61
00:02:47,238 --> 00:02:49,890
By this I mean doing what you would do

62
00:02:49,890 --> 00:02:51,495
in a regular React app:

63
00:02:51,495 --> 00:02:54,078
make an HTTP request from the browser

64
00:02:54,078 --> 00:02:56,242
when this component is mounted,

65
00:02:57,091 --> 00:02:59,698
typically in an "useEffect" React hook.

66
00:03:01,891 --> 00:03:04,227
So this is the choice we face:

67
00:03:04,227 --> 00:03:06,329
client side vs server side.

68
00:03:06,329 --> 00:03:10,300
Now, we've already seen how "getStaticProps" works.

69
00:03:10,300 --> 00:03:13,026
So if you want to try and implement

70
00:03:13,026 --> 00:03:15,206
this "Option 1" by yourself,

71
00:03:15,206 --> 00:03:16,841
feel free to do that.

72
00:03:17,731 --> 00:03:20,367
To actually make the HTTP request

73
00:03:20,367 --> 00:03:22,364
we can use the Fetch API.

74
00:03:22,944 --> 00:03:25,284
Now, there's little caveat here,

75
00:03:25,284 --> 00:03:27,550
in that Fetch is a browser API.

76
00:03:28,124 --> 00:03:29,981
When our code runs in the browser

77
00:03:29,981 --> 00:03:32,514
there is a global "fetch" function available.

78
00:03:33,071 --> 00:03:34,585
But the same is not true

79
00:03:34,585 --> 00:03:36,667
when our code runs on the server.

80
00:03:37,231 --> 00:03:40,307
In Node.js there is no global "fetch".

81
00:03:40,807 --> 00:03:42,941
So normally what you would do

82
00:03:42,941 --> 00:03:45,812
if you wanted to use "fetch" in Node.js

83
00:03:45,812 --> 00:03:48,903
is install a package such as "node-fetch".

84
00:03:48,903 --> 00:03:50,449
The good news is that

85
00:03:50,449 --> 00:03:53,246
Next.js already includes this package,

86
00:03:54,041 --> 00:03:57,355
and makes "fetch" available as a global function

87
00:03:57,355 --> 00:03:59,081
even in server side code.

88
00:03:59,081 --> 00:04:01,981
So in your "getStaticProps" you can simply

89
00:04:01,981 --> 00:04:04,812
call "fetch", without importing it first.

90
00:04:05,520 --> 00:04:07,353
See if you can write the code

91
00:04:07,353 --> 00:04:10,515
for fetching the product data in "getStaticProps".

92
00:04:10,515 --> 00:04:13,551
And in the next video I'll show you my solution.