1
00:00:03,000 --> 00:00:07,003
In the previous step we introduced "getServerSideProps",

2
00:00:07,003 --> 00:00:10,649
which is a way to fetch new data for every request.

3
00:00:11,221 --> 00:00:13,303
Although I also mentioned that

4
00:00:13,303 --> 00:00:16,704
in most cases it's better to use "getStaticProps"

5
00:00:16,704 --> 00:00:19,064
along with a "revalidate" timeout,

6
00:00:19,064 --> 00:00:21,840
if your data changes but not very often.

7
00:00:22,548 --> 00:00:24,683
While if you really want to get

8
00:00:24,683 --> 00:00:26,542
fresh data on every request

9
00:00:26,542 --> 00:00:29,296
you can also do that on the client side,

10
00:00:29,296 --> 00:00:31,499
using what we called "Option 2".

11
00:00:32,206 --> 00:00:35,141
In fact in this video I want to have another look

12
00:00:35,141 --> 00:00:36,459
at our "index-2" page.

13
00:00:37,671 --> 00:00:40,549
One of the possible downsides I mentioned

14
00:00:40,549 --> 00:00:43,216
about fetching data on the client side

15
00:00:43,786 --> 00:00:45,009
is that this way

16
00:00:45,009 --> 00:00:47,989
the browser calls the CMS API directly,

17
00:00:48,566 --> 00:00:50,795
which means we need to make this API

18
00:00:50,795 --> 00:00:52,095
visible to everybody,

19
00:00:52,095 --> 00:00:54,325
rather than just to our own servers.

20
00:00:54,949 --> 00:00:56,644
And that also means that

21
00:00:56,644 --> 00:00:58,621
the data sent to the browser

22
00:00:58,621 --> 00:01:01,658
includes many fields we don't actually use.

23
00:01:02,300 --> 00:01:04,718
The CMS API is designed to serve

24
00:01:04,718 --> 00:01:06,381
many possible clients,

25
00:01:06,381 --> 00:01:10,236
so it's not optimised for our specific application.

26
00:01:10,888 --> 00:01:13,355
Now, Next.js does provide a way to

27
00:01:13,355 --> 00:01:15,242
avoid both these problems,

28
00:01:15,242 --> 00:01:18,362
even when fetching data on the client side.

29
00:01:19,008 --> 00:01:22,117
And the way to do this is to use "API Routes".

30
00:01:22,617 --> 00:01:25,077
If you remember we saw an API route

31
00:01:25,077 --> 00:01:28,733
in the initial project generated by Create Next App.

32
00:01:29,304 --> 00:01:30,874
To create an API route

33
00:01:30,874 --> 00:01:33,730
we need a special folder inside "pages",

34
00:01:33,730 --> 00:01:34,659
called "api".

35
00:01:35,302 --> 00:01:37,507
And inside here we can create a route,

36
00:01:37,507 --> 00:01:39,538
simply by adding a JavaScript file,

37
00:01:40,097 --> 00:01:43,339
for example let's create a "products.js".

38
00:01:43,839 --> 00:01:47,032
So this is similar to how we create pages,

39
00:01:47,032 --> 00:01:50,378
in that we use the filesystem-based routing.

40
00:01:50,378 --> 00:01:52,735
But an API route is not a page,

41
00:01:52,735 --> 00:01:55,168
where we write a React component

42
00:01:55,168 --> 00:01:57,069
that is rendered to HTML.

43
00:01:57,874 --> 00:02:01,033
Instead in this case we write a "handler" function

44
00:02:01,533 --> 00:02:03,441
that operates directly on

45
00:02:03,441 --> 00:02:05,730
the HTTP request and response.

46
00:02:05,730 --> 00:02:08,096
Here "req" stands for "request"

47
00:02:08,096 --> 00:02:10,005
and "res" for "response".

48
00:02:10,005 --> 00:02:12,523
Instead of returning JSX elements

49
00:02:12,523 --> 00:02:14,431
like in a page component,

50
00:02:14,431 --> 00:02:18,019
a handler function typically returns some JSON.

51
00:02:18,977 --> 00:02:21,735
For example, on the response object

52
00:02:21,735 --> 00:02:24,178
we can call the "status" method

53
00:02:24,178 --> 00:02:26,384
to return the HTTP code 200,

54
00:02:26,384 --> 00:02:27,566
which means OK.

55
00:02:28,302 --> 00:02:30,205
And then we can return some data

56
00:02:30,205 --> 00:02:31,988
by calling the "json()" method

57
00:02:32,548 --> 00:02:35,257
with a value, for example an empty array.

58
00:02:35,257 --> 00:02:38,494
If you ever developed server side code in Node.js

59
00:02:38,494 --> 00:02:40,542
using a framework like Express,

60
00:02:40,542 --> 00:02:42,723
this should look familiar to you.

61
00:02:42,723 --> 00:02:44,044
If not, don't worry,

62
00:02:44,044 --> 00:02:46,621
I'll explain everything as we go along.

63
00:02:47,451 --> 00:02:49,622
Once we have the "handler" function

64
00:02:49,622 --> 00:02:50,863
we need to export it

65
00:02:50,863 --> 00:02:53,343
as the "default" export for this module.

66
00:02:53,967 --> 00:02:56,908
And at this point we can call that API route

67
00:02:56,908 --> 00:02:58,914
just like we call the CMS API,

68
00:02:58,914 --> 00:03:01,320
so I'm going to use the REST Client.

69
00:03:01,953 --> 00:03:05,297
But the API route runs in the Next.js server,

70
00:03:05,797 --> 00:03:07,235
so that's on port "3000",

71
00:03:07,735 --> 00:03:09,552
which is of course the same address

72
00:03:09,552 --> 00:03:11,629
we use to load the pages in the browser.

73
00:03:12,180 --> 00:03:14,387
And the path for the new route

74
00:03:14,387 --> 00:03:15,784
is "/api/products".

75
00:03:16,746 --> 00:03:20,440
Because "products.js" is under the "api" folder,

76
00:03:20,940 --> 00:03:25,003
and Next.js still uses its filesystem-based router

77
00:03:25,003 --> 00:03:26,628
even for API routes.

78
00:03:27,209 --> 00:03:29,651
Now, let's try sending this request,

79
00:03:29,651 --> 00:03:32,228
And you can see that we get a response

80
00:03:32,228 --> 00:03:33,992
with a status of "200 OK",

81
00:03:34,627 --> 00:03:35,989
and in the body we can see

82
00:03:35,989 --> 00:03:36,983
an empty JSON array

83
00:03:37,535 --> 00:03:39,692
just like we wrote in our handler function.

84
00:03:40,335 --> 00:03:42,488
So we can use API routes to

85
00:03:42,488 --> 00:03:44,481
effectively create an API

86
00:03:44,481 --> 00:03:46,314
inside our Next.js app.

87
00:03:46,314 --> 00:03:48,785
Now, you may be asking yourself

88
00:03:48,785 --> 00:03:50,699
what this has to do with

89
00:03:50,699 --> 00:03:53,329
fetching data on the client side,

90
00:03:53,329 --> 00:03:56,518
which is what I started this video with.

91
00:03:56,518 --> 00:03:59,706
That's because one way to use API routes

92
00:03:59,706 --> 00:04:03,294
is to effectively proxy calls to another API,

93
00:04:03,294 --> 00:04:04,968
like our backend CMS.

94
00:04:04,968 --> 00:04:07,917
So we could have our client side code

95
00:04:07,917 --> 00:04:09,432
call this API route

96
00:04:09,432 --> 00:04:12,461
to get the products data from the CMS,

97
00:04:12,461 --> 00:04:15,490
but including only the fields we need.

98
00:04:17,026 --> 00:04:20,517
Now, we already have a "getProducts" function here,

99
00:04:20,517 --> 00:04:22,640
to fetch the data from the CMS.

100
00:04:23,208 --> 00:04:25,599
So let's call it from our API route.

101
00:04:26,099 --> 00:04:28,029
And for that it's better if we make

102
00:04:28,029 --> 00:04:29,187
this function "async"

103
00:04:29,742 --> 00:04:32,326
so then here we can get the "products"

104
00:04:32,326 --> 00:04:35,590
by awaiting the result of calling "getProducts".

105
00:04:36,158 --> 00:04:37,811
At this point we can simply

106
00:04:37,811 --> 00:04:40,810
serialize these products to JSON in the response.

107
00:04:41,371 --> 00:04:44,475
So this API route is effectively acting

108
00:04:44,475 --> 00:04:46,305
as a proxy for the CMS.

109
00:04:46,884 --> 00:04:48,327
Let's see what happens now

110
00:04:48,327 --> 00:04:49,604
when we make a request.

111
00:04:50,159 --> 00:04:53,006
You can see that our API route returns

112
00:04:53,006 --> 00:04:55,928
all the 6 products coming from the CMS,

113
00:04:55,928 --> 00:04:59,224
but at the same time it transformed the data

114
00:04:59,224 --> 00:05:03,270
so that each product only has "id" and "title" fields.

115
00:05:03,994 --> 00:05:07,643
So we are converting the response from the CMS

116
00:05:07,643 --> 00:05:10,578
into a structure that's more suitable

117
00:05:10,578 --> 00:05:12,879
for our specific application.

118
00:05:12,879 --> 00:05:16,290
This approach of having an intermediate API

119
00:05:16,290 --> 00:05:20,097
that adapts the data coming from an external API

120
00:05:20,097 --> 00:05:21,921
is sometimes called the

121
00:05:21,921 --> 00:05:24,380
"Backend for Frontend" pattern,

122
00:05:24,380 --> 00:05:28,109
in the sense that this API handler is a backend

123
00:05:28,109 --> 00:05:31,202
designed specifically for our frontend,

124
00:05:31,202 --> 00:05:34,296
as opposed to a general purpose backend

125
00:05:34,296 --> 00:05:36,120
such as the Strapi CMS.

126
00:05:37,413 --> 00:05:39,013
Anyway, as a final step

127
00:05:39,013 --> 00:05:41,168
let me add a log statement here

128
00:05:41,168 --> 00:05:44,158
so we can see when this handler is invoked.

129
00:05:46,513 --> 00:05:48,302
Let's go back to the REST Client,

130
00:05:48,302 --> 00:05:49,602
showing the server logs.

131
00:05:50,156 --> 00:05:51,545
If we make a request now,

132
00:05:51,545 --> 00:05:53,711
we can see that the handler was called.

133
00:05:54,266 --> 00:05:55,944
And if we make another request,

134
00:05:55,944 --> 00:05:57,621
it will call the handler again.

135
00:05:58,175 --> 00:06:00,461
So the handler function is called

136
00:06:00,461 --> 00:06:02,469
every time we make a request.

137
00:06:02,469 --> 00:06:04,200
This is probably obvious,

138
00:06:04,200 --> 00:06:06,416
but in this respect an API route

139
00:06:06,416 --> 00:06:09,532
works like the "getServerSideProps" function.

140
00:06:10,308 --> 00:06:13,071
Ok, so now that we have this API route,

141
00:06:13,071 --> 00:06:14,983
in the next video we'll see

142
00:06:14,983 --> 00:06:17,320
how to call it from our frontend.