1
00:00:03,000 --> 00:00:04,442
In the previous step

2
00:00:04,442 --> 00:00:07,975
we added the "fallback: blocking" option, so that

3
00:00:08,548 --> 00:00:10,705
if we add a new product in our CMS

4
00:00:11,205 --> 00:00:12,940
the page for that new product

5
00:00:12,940 --> 00:00:14,856
will be generated automatically.

6
00:00:15,416 --> 00:00:18,016
More accurately, when we request

7
00:00:18,016 --> 00:00:21,024
the page for the product with id "8",

8
00:00:21,024 --> 00:00:23,543
and that page doesn't exist yet

9
00:00:23,543 --> 00:00:26,551
then Next.js will try to generate it.

10
00:00:27,295 --> 00:00:30,144
But what happens if we request an id

11
00:00:30,144 --> 00:00:33,231
that doesn't actually exist, like "99"?

12
00:00:33,811 --> 00:00:36,814
At the moment things don't work very well,

13
00:00:36,814 --> 00:00:39,889
because we get a 500 Internal Server Error.

14
00:00:40,460 --> 00:00:41,948
So, what's going on now?

15
00:00:41,948 --> 00:00:43,808
Let's look at the server logs.

16
00:00:44,369 --> 00:00:46,943
The first line is "FetchError"

17
00:00:46,943 --> 00:00:49,602
"invalid json response body at"

18
00:00:49,602 --> 00:00:51,918
the URL with "products/99".

19
00:00:52,589 --> 00:00:55,598
So, because we set fallback to "blocking"

20
00:00:55,598 --> 00:00:57,506
whenever we request a page

21
00:00:57,506 --> 00:01:00,075
that hasn't already been generated,

22
00:01:00,075 --> 00:01:01,616
Next.js will call the

23
00:01:01,616 --> 00:01:04,477
getStaticProps function with that "id".

24
00:01:05,271 --> 00:01:08,639
and in "getStaticProps" we call "getProduct"

25
00:01:08,639 --> 00:01:11,930
which makes an HTTP request to the CMS API.

26
00:01:12,506 --> 00:01:15,233
Now, this CMS endpoint usually returns

27
00:01:15,233 --> 00:01:17,816
a JSON object with the product data.

28
00:01:18,387 --> 00:01:22,181
But if request an "id" that doesn't exist, like 99

29
00:01:22,681 --> 00:01:25,910
Then what it returns is a 404 response,

30
00:01:25,910 --> 00:01:28,228
with a body that's not JSON.

31
00:01:28,228 --> 00:01:31,540
It's just plain text saying "Not Found".

32
00:01:32,205 --> 00:01:35,755
So when our code tries to parse the response as JSON

33
00:01:35,755 --> 00:01:38,621
it fails, because it's not in JSON format.

34
00:01:39,189 --> 00:01:41,211
In fact, in this code we are missing

35
00:01:41,211 --> 00:01:43,512
any sort of error handling at the moment.

36
00:01:44,068 --> 00:01:47,229
What we should do before trying to parse the JSON

37
00:01:47,229 --> 00:01:49,486
is check that the response is "ok".

38
00:01:50,050 --> 00:01:51,231
And if it's not "ok"

39
00:01:51,231 --> 00:01:53,886
the best thing is probably to throw an Error.

40
00:01:54,445 --> 00:01:56,173
Let's say "request failed",

41
00:01:56,173 --> 00:01:58,861
and then we can include the "status" code.

42
00:02:01,078 --> 00:02:03,900
Now, to test this I need to restart the server

43
00:02:03,900 --> 00:02:06,966
because it's currently running in production mode.

44
00:02:07,527 --> 00:02:10,068
We should be able to test this in dev mode.

45
00:02:12,393 --> 00:02:14,800
Let's try reloading product 99 now.

46
00:02:16,226 --> 00:02:18,110
This time we see our own error,

47
00:02:18,110 --> 00:02:20,177
that at least is more informative.

48
00:02:20,737 --> 00:02:22,810
But ideally what we'd like to do

49
00:02:22,810 --> 00:02:24,818
is not to show an error at all.

50
00:02:25,382 --> 00:02:27,488
If a product doesn't exist

51
00:02:27,488 --> 00:02:30,566
we should return a 404 not found page.

52
00:02:31,147 --> 00:02:34,323
And we can do that by modifying "getStaticProps".

53
00:02:34,823 --> 00:02:36,597
First of all we want to "catch"

54
00:02:36,597 --> 00:02:38,084
any errors that may happen

55
00:02:38,084 --> 00:02:40,257
when trying to fetch the product data.

56
00:02:42,089 --> 00:02:43,347
And if an error occurs

57
00:02:43,347 --> 00:02:45,291
instead of returning some "props",

58
00:02:45,848 --> 00:02:48,808
we can set a special flag called "notFound"

59
00:02:48,808 --> 00:02:51,562
in the object returned by this function.

60
00:02:52,130 --> 00:02:53,784
And this will tell Next.js

61
00:02:53,784 --> 00:02:55,819
to return its standard 404 page,

62
00:02:55,819 --> 00:02:57,599
as we can see straight away.

63
00:02:57,599 --> 00:02:59,443
This is the appropriate page,

64
00:02:59,443 --> 00:03:02,114
because this product simply doesn't exist,

65
00:03:02,114 --> 00:03:04,594
while "Interval Server Error" suggested

66
00:03:04,594 --> 00:03:07,456
that there's something wrong with our server.

67
00:03:08,337 --> 00:03:10,560
Just to check, if we request a product

68
00:03:10,560 --> 00:03:12,081
that does exist, like "1",

69
00:03:12,081 --> 00:03:13,368
this still works fine.

70
00:03:13,984 --> 00:03:16,289
It's only if we request a product "id"

71
00:03:16,289 --> 00:03:18,837
that doesn't exist that we get a 404 page.

72
00:03:19,397 --> 00:03:22,717
Ok. So this is how to return a "notFound" page

73
00:03:22,717 --> 00:03:24,305
from "getStaticProps",

74
00:03:24,877 --> 00:03:27,704
which is something you should think about

75
00:03:27,704 --> 00:03:30,393
whenever you enable the "fallback" mode

76
00:03:30,393 --> 00:03:31,771
in "getStaticPaths".

77
00:03:31,771 --> 00:03:34,529
Now, unfortunately this code still isn't

78
00:03:34,529 --> 00:03:37,218
handling all error conditions properly.

79
00:03:37,993 --> 00:03:40,147
What happens if, rather than

80
00:03:40,147 --> 00:03:42,530
the product id being incorrect,

81
00:03:42,530 --> 00:03:44,453
the request fails because

82
00:03:44,453 --> 00:03:47,990
the Next.js app cannot connect to the CMS API?

83
00:03:48,720 --> 00:03:50,447
I'll simulate this condition

84
00:03:50,447 --> 00:03:53,038
by stopping the Strapi server temporarily.

85
00:03:53,599 --> 00:03:55,672
And if we try reloading the page now,

86
00:03:56,832 --> 00:03:58,186
actually, this is not quite

87
00:03:58,186 --> 00:03:59,490
what I wanted to show you.

88
00:04:00,040 --> 00:04:01,675
What's happening now is that

89
00:04:01,675 --> 00:04:04,478
it failed when calling the "/products" endpoint,

90
00:04:05,036 --> 00:04:06,436
so not when fetching

91
00:04:06,436 --> 00:04:08,885
a single product in getStaticProps,

92
00:04:08,885 --> 00:04:11,264
but when getting all the products,

93
00:04:11,264 --> 00:04:12,664
in "getStaticPaths".

94
00:04:13,373 --> 00:04:15,086
And this happens because

95
00:04:15,086 --> 00:04:17,512
I'm running the server in dev mode

96
00:04:17,512 --> 00:04:20,651
so it will call "getStaticPaths" every time.

97
00:04:21,293 --> 00:04:22,606
What I need to do is

98
00:04:22,606 --> 00:04:24,705
restart the Strapi server first,

99
00:04:26,426 --> 00:04:28,581
then stop the Next.js server,

100
00:04:28,581 --> 00:04:30,363
rebuild the application,

101
00:04:32,692 --> 00:04:34,865
and finally run it in production mode.

102
00:04:35,758 --> 00:04:37,512
Only in this way we can test

103
00:04:37,512 --> 00:04:39,641
what happens in this failure mode.

104
00:04:40,203 --> 00:04:42,626
Now, if we request the first product,

105
00:04:42,626 --> 00:04:44,917
of course we see the expected page.

106
00:04:45,482 --> 00:04:48,525
But now I'm going back to the Strapi server

107
00:04:48,525 --> 00:04:50,718
and stop it, so the Next.js app

108
00:04:50,718 --> 00:04:52,699
can no longer connect to it.

109
00:04:52,699 --> 00:04:54,326
Remember that this page

110
00:04:54,326 --> 00:04:57,298
also uses Incremental Static Regeneration,

111
00:04:58,080 --> 00:05:00,066
so if I keep refreshing it

112
00:05:00,066 --> 00:05:02,891
after 30 seconds it will try to fetch

113
00:05:02,891 --> 00:05:04,571
new data from the CMS.

114
00:05:04,571 --> 00:05:07,702
And when that happens, surprise surprise!

115
00:05:07,702 --> 00:05:09,840
We get a 404 not found page.

116
00:05:10,645 --> 00:05:12,736
And we'll keep getting a 404

117
00:05:12,736 --> 00:05:15,050
for as long as the CMS is down.

118
00:05:15,624 --> 00:05:18,787
Now, this is quite a subtle bug in our app.

119
00:05:18,787 --> 00:05:21,434
404 means the product doesn't exist,

120
00:05:22,007 --> 00:05:24,054
but we know that it does exist,

121
00:05:24,054 --> 00:05:27,222
it's just that the CMS is currently unavailable.

122
00:05:27,788 --> 00:05:31,388
And, if we return 404 to a search bot for example,

123
00:05:31,388 --> 00:05:33,763
it will interpret it to mean that

124
00:05:33,763 --> 00:05:35,707
this page no longer exists.

125
00:05:35,707 --> 00:05:37,867
So our product will be removed

126
00:05:37,867 --> 00:05:40,098
from the search engine results,

127
00:05:40,098 --> 00:05:42,618
which is not good for our business.

128
00:05:43,477 --> 00:05:45,133
What we'll need to do is

129
00:05:45,133 --> 00:05:47,617
modify our "getStaticProps" function

130
00:05:47,617 --> 00:05:49,342
to only return "notFound"

131
00:05:49,342 --> 00:05:51,481
when the product doesn't exist,

132
00:05:51,481 --> 00:05:53,482
not for every possible error.

133
00:05:53,482 --> 00:05:55,966
And we'll do that in the next video.