1
00:00:03,000 --> 00:00:04,761
We created an API route

2
00:00:04,761 --> 00:00:07,365
to fetch the products from the CMS

3
00:00:07,365 --> 00:00:09,203
and return the same data

4
00:00:09,203 --> 00:00:12,496
but stripping out the fields we don't need.

5
00:00:13,226 --> 00:00:15,683
Now we want to call that API route

6
00:00:15,683 --> 00:00:17,200
from the client side.

7
00:00:17,772 --> 00:00:19,907
And this approach will be a variant

8
00:00:19,907 --> 00:00:21,676
of what we called "Option 2".

9
00:00:22,237 --> 00:00:25,146
Let's rename this existing page "2a".

10
00:00:25,646 --> 00:00:27,499
So this is where we fetch products

11
00:00:27,499 --> 00:00:28,534
on the client side,

12
00:00:29,089 --> 00:00:31,839
but directly from an external API,

13
00:00:31,839 --> 00:00:34,105
that in our case is the CMS.

14
00:00:34,686 --> 00:00:35,793
Now I'm going to create

15
00:00:35,793 --> 00:00:37,044
another copy of this page,

16
00:00:39,051 --> 00:00:40,890
and this will be "Option 2b",

17
00:00:43,152 --> 00:00:45,259
that is about fetching the data

18
00:00:45,259 --> 00:00:47,095
from an internal API route.

19
00:00:47,984 --> 00:00:51,533
Ok. In this case instead of calling "getProducts",

20
00:00:51,533 --> 00:00:53,663
that as we know calls the CMS,

21
00:00:54,585 --> 00:00:58,258
we want to "fetch" the data from our API route,

22
00:00:58,258 --> 00:01:00,134
that is "/api/products".

23
00:01:00,134 --> 00:01:02,636
And note that here we don't need

24
00:01:02,636 --> 00:01:04,824
to specify the host and port

25
00:01:04,824 --> 00:01:07,716
because the API route will always run

26
00:01:07,716 --> 00:01:10,218
on the same server as this page.

27
00:01:11,109 --> 00:01:13,479
Fetch returns an asynchronous response,

28
00:01:13,479 --> 00:01:15,059
so we need to use "await",

29
00:01:15,620 --> 00:01:17,985
but here we have a small problem in that

30
00:01:17,985 --> 00:01:20,173
we cannot make this function "async",

31
00:01:20,733 --> 00:01:23,479
because "useEffect" doesn't accept a function

32
00:01:23,479 --> 00:01:24,883
that returns a Promise.

33
00:01:25,445 --> 00:01:27,391
As a workaround we can create

34
00:01:27,391 --> 00:01:29,605
an anonymous async function here,

35
00:01:30,173 --> 00:01:31,760
and immediately invoke it.

36
00:01:32,260 --> 00:01:34,299
Then move this code inside it,

37
00:01:34,299 --> 00:01:36,338
so this block will be "async".

38
00:01:36,905 --> 00:01:39,280
Next, we want to get the "products"

39
00:01:39,280 --> 00:01:41,451
by parsing the response as JSON.

40
00:01:42,438 --> 00:01:44,123
And at this point we can update

41
00:01:44,123 --> 00:01:45,861
the value of the state variable.

42
00:01:47,138 --> 00:01:48,509
Ok. Let's see if this works.

43
00:01:50,371 --> 00:01:52,495
We need to load our new page "2b".

44
00:01:54,305 --> 00:01:55,458
And it looks all right,

45
00:01:55,458 --> 00:01:57,163
we can see the usual six products.

46
00:01:57,714 --> 00:02:00,508
But let's see what happens in the server logs

47
00:02:00,508 --> 00:02:01,936
when we load this page.

48
00:02:01,936 --> 00:02:04,668
You can see that our "/api/products" handler

49
00:02:04,668 --> 00:02:07,586
is called right after the HomePage is rendered.

50
00:02:08,273 --> 00:02:10,880
And this happens every time we load the page.

51
00:02:12,539 --> 00:02:15,214
Now, let's go and inspect the Network requests.

52
00:02:17,939 --> 00:02:20,945
Here we can see that it requested

53
00:02:20,945 --> 00:02:24,681
"/api/products" on "localhost" port 3000.

54
00:02:25,273 --> 00:02:26,938
And if we look at the data

55
00:02:26,938 --> 00:02:29,436
each product only has "id" and "title".

56
00:02:30,001 --> 00:02:31,881
If we look at the response headers

57
00:02:31,881 --> 00:02:33,209
we should be able to see

58
00:02:33,209 --> 00:02:34,702
the exact size of the data.

59
00:02:35,313 --> 00:02:37,628
It's just 192 bytes, as shown by

60
00:02:37,628 --> 00:02:39,653
the "Content-Length" header.

61
00:02:40,226 --> 00:02:41,947
Out of curiosity I want to see

62
00:02:41,947 --> 00:02:44,815
what's the difference compared to our "Option 2a",

63
00:02:45,373 --> 00:02:47,797
that is when we call the CMS API directly.

64
00:02:48,297 --> 00:02:51,906
In this case the "Content-Length" is

65
00:02:51,906 --> 00:02:53,109
9,363 bytes.

66
00:02:53,710 --> 00:02:56,983
So by fetching the data via an API route

67
00:02:56,983 --> 00:03:01,157
we reduced the size of the data sent to the browser

68
00:03:01,157 --> 00:03:03,940
from over 9,000 bytes to just 192.

69
00:03:04,604 --> 00:03:06,839
This should give you an idea of why

70
00:03:06,839 --> 00:03:09,265
creating an API route may be worth it,

71
00:03:09,265 --> 00:03:11,628
even though it's a bit of extra work.

72
00:03:12,256 --> 00:03:15,734
With this, we have now seen all possible ways

73
00:03:15,734 --> 00:03:18,749
to fetch data in a Next.js application.

74
00:03:18,749 --> 00:03:21,764
And in the next video we'll review them

75
00:03:21,764 --> 00:03:25,630
and choose the best one for our specific use case.