Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:05,700
So what's up with this fallback key here?
2
00:00:05,700 --> 00:00:08,310
The fallback key can help you if you have
3
00:00:08,310 --> 00:00:13,310
a lot of pages that would need to be pre-generated.
4
00:00:13,700 --> 00:00:16,820
Here I only have three dummy products,
5
00:00:16,820 --> 00:00:18,650
and I'm currently not even fetching
6
00:00:18,650 --> 00:00:20,320
that data from that file.
7
00:00:20,320 --> 00:00:21,820
We'll do that later,
8
00:00:21,820 --> 00:00:24,130
but we only have three products.
9
00:00:24,130 --> 00:00:27,380
Now imagine that you have like an Amazon-like website
10
00:00:27,380 --> 00:00:30,200
with millions of products.
11
00:00:30,200 --> 00:00:33,300
Of course, pre-generating all those products
12
00:00:33,300 --> 00:00:35,900
like this might not be optimal,
13
00:00:35,900 --> 00:00:39,150
not just because I hard coded this here.
14
00:00:39,150 --> 00:00:41,470
We could fetch this dynamically from this file,
15
00:00:41,470 --> 00:00:43,340
so that's not the problem,
16
00:00:43,340 --> 00:00:46,600
but simply because pre-generating all
17
00:00:46,600 --> 00:00:50,380
those millions of pages might take super long,
18
00:00:50,380 --> 00:00:52,400
and there might be products,
19
00:00:52,400 --> 00:00:57,400
let's say you're not Amazon, which are rarely visited.
20
00:00:57,450 --> 00:01:00,690
If you're building a blog and you have hundreds of articles,
21
00:01:00,690 --> 00:01:04,360
you might have some articles which are basically never read.
22
00:01:04,360 --> 00:01:08,590
So then, pre-generating such rarely visited pages
23
00:01:08,590 --> 00:01:11,073
is a waste of time and resources.
24
00:01:12,050 --> 00:01:15,320
That's where fallback becomes important.
25
00:01:15,320 --> 00:01:18,300
Here we can set this to true,
26
00:01:18,300 --> 00:01:20,870
and then for example, we could decide
27
00:01:20,870 --> 00:01:23,550
to only pre-render some pages.
28
00:01:23,550 --> 00:01:26,190
So let's say we wanna pre-render the page
29
00:01:26,190 --> 00:01:27,870
with product ID one.
30
00:01:27,870 --> 00:01:31,450
So with P1, because that's a highly frequented page,
31
00:01:31,450 --> 00:01:33,550
it's visited very often,
32
00:01:33,550 --> 00:01:37,330
but we don't wanna pre-generate the other two pages.
33
00:01:37,330 --> 00:01:41,230
With fallback set to true, that's possible
34
00:01:41,230 --> 00:01:44,430
because now if I save this, you will notice
35
00:01:44,430 --> 00:01:46,520
that if I go back to the starting page,
36
00:01:46,520 --> 00:01:48,520
if I click on product three,
37
00:01:48,520 --> 00:01:51,350
we still load this page successfully.
38
00:01:51,350 --> 00:01:56,240
Even though it was not added here to paths.
39
00:01:56,240 --> 00:01:59,650
And the reason for that is that with fallback true,
40
00:01:59,650 --> 00:02:04,650
we tell NextJS that even pages which are not listed here.
41
00:02:05,680 --> 00:02:09,160
So even parameter values for the PID parameter,
42
00:02:09,160 --> 00:02:12,870
which are not listed here, can be valid.
43
00:02:12,870 --> 00:02:16,600
Values that should be loaded when they are visited.
44
00:02:16,600 --> 00:02:18,380
But they're not pre-generated,
45
00:02:18,380 --> 00:02:21,540
instead they're generated just in time
46
00:02:21,540 --> 00:02:24,710
when a request reaches the server.
47
00:02:24,710 --> 00:02:28,940
And that allows us to pre-generate highly visited pages,
48
00:02:28,940 --> 00:02:33,200
and postpone the generation to less frequented pages
49
00:02:33,200 --> 00:02:36,540
to the server, so that they are only pre-generated
50
00:02:36,540 --> 00:02:38,150
when they're needed.
51
00:02:38,150 --> 00:02:41,710
So that can be a very useful behavior,
52
00:02:41,710 --> 00:02:43,960
but you'll notice a problem here.
53
00:02:43,960 --> 00:02:45,850
If I don't click on a link here,
54
00:02:45,850 --> 00:02:49,400
but instead I directly enter this in URL,
55
00:02:49,400 --> 00:02:53,620
and therefore send a new request to this page,
56
00:02:53,620 --> 00:02:55,090
we actually get an error.
57
00:02:55,090 --> 00:02:58,250
Cannot read property title of undefined.
58
00:02:58,250 --> 00:03:01,240
The reason for that, is that this pre-generation,
59
00:03:01,240 --> 00:03:04,470
this dynamic pre-generation, when it's needed,
60
00:03:04,470 --> 00:03:06,303
does not finish instantly.
61
00:03:07,150 --> 00:03:10,490
So therefore instead when using this fallback feature,
62
00:03:10,490 --> 00:03:12,920
you should be prepared to return
63
00:03:12,920 --> 00:03:15,970
a fallback state in your component.
64
00:03:15,970 --> 00:03:19,920
For example, by simply checking if loaded product
65
00:03:19,920 --> 00:03:23,450
is maybe not a thing with if not,
66
00:03:23,450 --> 00:03:26,703
and then returning something like loading here.
67
00:03:27,730 --> 00:03:29,430
And if you do this, and you add
68
00:03:29,430 --> 00:03:31,510
this to your component function,
69
00:03:31,510 --> 00:03:33,410
and you save everything,
70
00:03:33,410 --> 00:03:35,030
if you now reload this page,
71
00:03:35,030 --> 00:03:36,850
you'll see loading briefly
72
00:03:36,850 --> 00:03:40,750
and then NextJS will automatically give you that data
73
00:03:40,750 --> 00:03:42,620
once it's done loading.
74
00:03:42,620 --> 00:03:45,850
So this is a little bit like the standard react solution
75
00:03:45,850 --> 00:03:49,190
with user fact and set state, except for that
76
00:03:49,190 --> 00:03:50,950
you don't need to do any of that.
77
00:03:50,950 --> 00:03:53,030
You just get something through props,
78
00:03:53,030 --> 00:03:55,030
you check if it's there yet,
79
00:03:55,030 --> 00:03:58,680
and if it's not you show that fallback content,
80
00:03:58,680 --> 00:04:02,420
and once it's there NextJS will automatically update
81
00:04:02,420 --> 00:04:04,270
this component page for you,
82
00:04:04,270 --> 00:04:06,853
and then return the regular content here.
83
00:04:08,830 --> 00:04:12,550
So with that you see that now I can also reload this page
84
00:04:12,550 --> 00:04:15,950
and we still load this successfully eventually,
85
00:04:15,950 --> 00:04:18,920
because of that fallback feature.
86
00:04:18,920 --> 00:04:20,589
An alternative would be
87
00:04:20,589 --> 00:04:23,660
that you don't set fallback to true or false,
88
00:04:23,660 --> 00:04:27,150
but to a string with a value of blocking.
89
00:04:27,150 --> 00:04:30,100
If you do that, then you don't even need
90
00:04:30,100 --> 00:04:33,160
that fallback check here in the component,
91
00:04:33,160 --> 00:04:35,360
and hence we can comment this out,
92
00:04:35,360 --> 00:04:37,930
because then NextJS will actually wait
93
00:04:37,930 --> 00:04:42,610
for this page to fully be pre-generated on the server
94
00:04:42,610 --> 00:04:44,440
before it serves that.
95
00:04:44,440 --> 00:04:46,410
So then it will take a little bit longer
96
00:04:46,410 --> 00:04:49,520
for the visitor of the page to get a response,
97
00:04:49,520 --> 00:04:53,330
but the response which is sent back will be finished.
98
00:04:53,330 --> 00:04:55,710
So for now reload that still works.
99
00:04:55,710 --> 00:04:57,600
It just takes a bit longer.
100
00:04:57,600 --> 00:05:00,510
And again it's up to you which approach you need
101
00:05:00,510 --> 00:05:02,100
for your application.
102
00:05:02,100 --> 00:05:05,250
Sometimes it's important to show something quickly,
103
00:05:05,250 --> 00:05:08,010
especially if you know that generating the page
104
00:05:08,010 --> 00:05:10,770
and fetching the data might take a bit longer.
105
00:05:10,770 --> 00:05:13,220
Sometimes it's worth to wait for it.
106
00:05:13,220 --> 00:05:14,800
And you don't want to show
107
00:05:14,800 --> 00:05:17,420
an incomplete page to your visitors
108
00:05:17,420 --> 00:05:20,290
in such a case, blocking can be better.
109
00:05:20,290 --> 00:05:25,290
Here you saw both and as you see both is super easy to use.
8546
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.