1
00:00:02,000 --> 00:00:03,000
So now that we understand

2
00:00:03,000 --> 00:00:05,000
this concept of having a fallback

3
00:00:05,000 --> 00:00:10,000
and of generating certain pages for certain IDs,

4
00:00:10,000 --> 00:00:13,000
let's take another look at the not found case

5
00:00:13,000 --> 00:00:18,000
that we're trying to request a page which doesn't exist.

6
00:00:18,000 --> 00:00:21,000
And let's start by simply visiting a page

7
00:00:21,000 --> 00:00:23,000
with a product ID of P4.

8
00:00:24,000 --> 00:00:28,000
Now we get a 404 error page here.

9
00:00:28,000 --> 00:00:32,000
So a not found page because in our data

10
00:00:32,000 --> 00:00:36,000
we only have the IDs P1, P2 and P3.

11
00:00:36,000 --> 00:00:39,000
There is no product with an ID of P4.

12
00:00:39,000 --> 00:00:42,000
Now we get this not found error

13
00:00:42,000 --> 00:00:44,000
because in getStaticPaths,

14
00:00:44,000 --> 00:00:49,000
we load and build our array of IDs

15
00:00:49,000 --> 00:00:52,000
our array of routes or of parameters

16
00:00:52,000 --> 00:00:55,000
for which pages should be generated

17
00:00:55,000 --> 00:00:59,000
from that dummy-backend.json file.

18
00:00:59,000 --> 00:01:03,000
So paths with params here in the end is an array

19
00:01:03,000 --> 00:01:05,000
where we only configure param pairs

20
00:01:07,000 --> 00:01:12,000
So pid value pairs for the values P1, P2, P3

21
00:01:13,000 --> 00:01:16,000
since these are the only IDs that exist

22
00:01:16,000 --> 00:01:19,000
in that dummy-backend.json file.

23
00:01:19,000 --> 00:01:24,000
And automatically if we then try to load this page

24
00:01:24,000 --> 00:01:27,000
for an ID which was not pre-generated,

25
00:01:27,000 --> 00:01:31,000
we do get this 404 error.

26
00:01:31,000 --> 00:01:33,000
Now that makes sense.

27
00:01:33,000 --> 00:01:36,000
What if we use fallback true though?

28
00:01:36,000 --> 00:01:41,000
What if we for example assume that the products

29
00:01:41,000 --> 00:01:45,000
stored in dummy-backend.json might not be all the products

30
00:01:45,000 --> 00:01:49,000
for which we are able to fetch data.

31
00:01:49,000 --> 00:01:53,000
So we only generate pages for the three product IDs

32
00:01:53,000 --> 00:01:57,000
we find in that file, because we go through that file here

33
00:01:57,000 --> 00:01:59,000
in getStaticPaths

34
00:01:59,000 --> 00:02:02,000
but by setting fallback to true,

35
00:02:02,000 --> 00:02:05,000
we then also tell Next.js

36
00:02:05,000 --> 00:02:10,000
that even if an ID value is not found here

37
00:02:11,000 --> 00:02:14,000
we still might be able to render a page.

38
00:02:14,000 --> 00:02:16,000
That's what the idea behind fallback is

39
00:02:16,000 --> 00:02:20,000
that we don't have to predefine all possible pages,

40
00:02:20,000 --> 00:02:24,000
all possible values for the dynamic segment.

41
00:02:25,000 --> 00:02:29,000
So therefore, now if I set fallback to true here

42
00:02:29,000 --> 00:02:33,000
we will see that if I visit p4

43
00:02:33,000 --> 00:02:36,000
I get this error that

44
00:02:36,000 --> 00:02:39,000
we cannot read the property title of undefined.

45
00:02:39,000 --> 00:02:42,000
Now we saw that before in the course already

46
00:02:42,000 --> 00:02:44,000
we get this because we need

47
00:02:44,000 --> 00:02:47,000
to have this fallback scenario here

48
00:02:47,000 --> 00:02:50,000
that we're still waiting for a product

49
00:02:50,000 --> 00:02:54,000
because when we set fallback to true and not to blocking

50
00:02:54,000 --> 00:02:58,000
then Next.js will instantly return a page

51
00:02:58,000 --> 00:03:00,000
which does not yet have the data.

52
00:03:00,000 --> 00:03:03,000
And it will load the data in the background

53
00:03:03,000 --> 00:03:06,000
and give it to us on the page and re render the page

54
00:03:06,000 --> 00:03:08,000
once the data is there.

55
00:03:08,000 --> 00:03:12,000
So we need to render this fallback for the time

56
00:03:12,000 --> 00:03:15,000
we're waiting for the product to load.

57
00:03:16,000 --> 00:03:21,000
But if I now do that and I reload, you see

58
00:03:21,000 --> 00:03:23,000
we see loading here,

59
00:03:23,000 --> 00:03:26,000
but then after a while we get another error

60
00:03:26,000 --> 00:03:28,000
failed to load static props.

61
00:03:28,000 --> 00:03:32,000
And this hopefully also makes sense.

62
00:03:32,000 --> 00:03:36,000
I'm trying to load this product page for an ID of P4

63
00:03:37,000 --> 00:03:40,000
for which we just don't have any data

64
00:03:40,000 --> 00:03:43,000
because in getStaticProps

65
00:03:43,000 --> 00:03:46,000
we are also reaching out to dummy-backend.json

66
00:03:46,000 --> 00:03:51,000
and we're trying to find our product by ID in that file.

67
00:03:51,000 --> 00:03:56,000
And we won't find a product with ID P4 in that file.

68
00:03:56,000 --> 00:04:00,000
So we see loading initially as a fallback,

69
00:04:00,000 --> 00:04:03,000
but then Next.js tries to load the actual data

70
00:04:03,000 --> 00:04:06,000
for this page and it just fails there

71
00:04:06,000 --> 00:04:09,000
because we don't have such a product.

72
00:04:09,000 --> 00:04:12,000
So that's why we get this error eventually here then

73
00:04:12,000 --> 00:04:15,000
because it failed to load the actual data.

74
00:04:15,000 --> 00:04:17,000
Now that is a perfect example

75
00:04:17,000 --> 00:04:21,000
for setting the not found property on the object

76
00:04:21,000 --> 00:04:24,000
we return in getStaticProps.

77
00:04:24,000 --> 00:04:27,000
Here when we try to get our product,

78
00:04:27,000 --> 00:04:31,000
we also wanna check if we don't have a product

79
00:04:31,000 --> 00:04:33,000
and if we don't have a product.

80
00:04:33,000 --> 00:04:37,000
So if we failed to find a product for the given ID,

81
00:04:37,000 --> 00:04:40,000
then we want to return an object

82
00:04:40,000 --> 00:04:42,000
where not found is set to true.

83
00:04:42,000 --> 00:04:46,000
By setting this, we are able to use fallback true

84
00:04:46,000 --> 00:04:50,000
and try to find a product for a parameter value

85
00:04:50,000 --> 00:04:52,000
which was not predefined here

86
00:04:52,000 --> 00:04:56,000
because maybe we do have that maybe dummy-backend.json

87
00:04:56,000 --> 00:04:58,000
is a more dynamic data source

88
00:04:58,000 --> 00:05:01,000
which could yield that product.

89
00:05:01,000 --> 00:05:03,000
But if we then still fail to fetch it

90
00:05:03,000 --> 00:05:06,000
we don't want to return to regular page

91
00:05:06,000 --> 00:05:09,000
with the missing data, which causes an error.

92
00:05:09,000 --> 00:05:12,000
But we then wanna show the not found

93
00:05:12,000 --> 00:05:15,000
the 404 error page instead.

94
00:05:15,000 --> 00:05:18,000
So with that if we save this

95
00:05:18,000 --> 00:05:23,000
now you see for P4 I get loading and then the 404 page.

96
00:05:23,000 --> 00:05:28,000
And for P3 on the other hand it still works as before.

97
00:05:28,000 --> 00:05:30,000
So that's how we can then utilize

98
00:05:30,000 --> 00:05:32,000
the not found property here

99
00:05:32,000 --> 00:05:37,000
in getStaticProps together with fallback true.

100
00:05:37,000 --> 00:05:38,000
And of course, it's up to you

101
00:05:38,000 --> 00:05:40,000
which combination makes the most sense

102
00:05:40,000 --> 00:05:43,000
for your exact scenario and use case.

103
00:05:43,000 --> 00:05:46,000
This is just one example

104
00:05:46,000 --> 00:05:51,000
and one other idea of using Next.js and its features.