Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,210 --> 00:00:06,550
So here on this slug page, on this catch all page,
2
00:00:06,550 --> 00:00:10,820
we're currently getting the concrete path values
3
00:00:10,820 --> 00:00:12,210
from the router,
4
00:00:12,210 --> 00:00:14,830
to then get the year and the month
5
00:00:14,830 --> 00:00:19,570
and fetch the appropriate events for us here.
6
00:00:19,570 --> 00:00:23,450
Now the question is, how do we wanna do that in the future
7
00:00:23,450 --> 00:00:25,950
with our newly gained knowledge?
8
00:00:25,950 --> 00:00:28,170
And we have a couple of options here.
9
00:00:28,170 --> 00:00:32,790
We can use getStaticProps to pre-generate this.
10
00:00:32,790 --> 00:00:35,470
But of course, for the filtered events,
11
00:00:35,470 --> 00:00:39,210
we'll have a lot of different combinations of parameters.
12
00:00:39,210 --> 00:00:44,210
2021, and one, and five, and two, and so on.
13
00:00:44,290 --> 00:00:46,920
That's not necessarily an issue, though,
14
00:00:46,920 --> 00:00:50,990
because we will have to use getStaticPaths anyways,
15
00:00:50,990 --> 00:00:54,850
and once we add that, we could only pre-render a couple
16
00:00:54,850 --> 00:00:58,070
of those combinations, and not all of them.
17
00:00:58,070 --> 00:01:03,020
And instead, then, use fallback set to true or blocking.
18
00:01:03,020 --> 00:01:04,379
But how should we decide
19
00:01:04,379 --> 00:01:07,510
which paths should be pre-generated?
20
00:01:07,510 --> 00:01:12,020
In the end, all possible filters are equally likely
21
00:01:12,020 --> 00:01:13,500
to be visited.
22
00:01:13,500 --> 00:01:16,790
So, I would have a hard time picking a couple
23
00:01:16,790 --> 00:01:20,360
of combinations that should be pre-generated.
24
00:01:20,360 --> 00:01:23,400
And pre-generating all possible combinations
25
00:01:23,400 --> 00:01:25,430
is also not a great option
26
00:01:25,430 --> 00:01:27,860
because that could be a lot of pages.
27
00:01:27,860 --> 00:01:30,963
Especially if we have no year restriction, for example.
28
00:01:32,130 --> 00:01:36,190
So, getStaticProps might not be ideal here.
29
00:01:36,190 --> 00:01:40,050
Maybe, here, getServerSideProps is better.
30
00:01:40,050 --> 00:01:44,120
So that we do indeed fetch the data on the fly
31
00:01:44,120 --> 00:01:47,830
for every incoming request, and we then return the page
32
00:01:47,830 --> 00:01:50,190
for every incoming request.
33
00:01:50,190 --> 00:01:52,150
So let's start with that.
34
00:01:52,150 --> 00:01:57,150
In this slug page, I will export an async function
35
00:02:00,070 --> 00:02:02,267
called getServerSideProps.
36
00:02:04,400 --> 00:02:07,410
You know that here we get the context.
37
00:02:07,410 --> 00:02:09,550
And then here we wanna return an object
38
00:02:09,550 --> 00:02:13,810
which is similar to the object we return in getStaticProps.
39
00:02:13,810 --> 00:02:17,930
With the props key and possibly also with the not found key
40
00:02:17,930 --> 00:02:19,773
and the redirect key if we need it.
41
00:02:21,110 --> 00:02:26,110
Now here, from the context, we can get access to the params.
42
00:02:26,670 --> 00:02:30,030
So here, we can get access to the parameters
43
00:02:30,030 --> 00:02:32,620
for which this page was visited.
44
00:02:32,620 --> 00:02:34,380
And that's good because now,
45
00:02:34,380 --> 00:02:37,760
we basically wanna repeat what we previously did
46
00:02:37,760 --> 00:02:40,030
in our component function.
47
00:02:40,030 --> 00:02:43,540
We wanna get our year and month,
48
00:02:43,540 --> 00:02:45,750
and convert that to a number,
49
00:02:45,750 --> 00:02:47,820
and then validate it,
50
00:02:47,820 --> 00:02:51,173
and then ultimately get our filtered events.
51
00:02:52,170 --> 00:02:54,440
So I will copy all that code,
52
00:02:54,440 --> 00:02:56,420
though we're going to edit it a bit,
53
00:02:56,420 --> 00:02:58,460
but I'll copy all that code,
54
00:02:58,460 --> 00:03:00,883
and bring it down there into getServerSideProps.
55
00:03:02,670 --> 00:03:06,180
Now here, we're accessing filtered data
56
00:03:06,180 --> 00:03:08,480
that should actually be our params.
57
00:03:08,480 --> 00:03:12,450
Because up there, filtered data is also just what we read
58
00:03:12,450 --> 00:03:16,440
from the router query, which are also our params
59
00:03:16,440 --> 00:03:19,650
when accessed through useRouter.
60
00:03:19,650 --> 00:03:22,447
So therefore here I'll rebuild filterData
61
00:03:23,590 --> 00:03:26,070
and access params.slug.
62
00:03:26,070 --> 00:03:27,790
So we still access .slug
63
00:03:27,790 --> 00:03:32,340
because that is our catch-all grouping parameter name,
64
00:03:32,340 --> 00:03:34,420
if you wanna call it like that.
65
00:03:34,420 --> 00:03:38,290
And that will still be an array with multiple values,
66
00:03:38,290 --> 00:03:41,170
and we are interested in the first two values
67
00:03:41,170 --> 00:03:43,760
which should be the year and the month.
68
00:03:43,760 --> 00:03:45,700
Which is why we convert them to numbers
69
00:03:45,700 --> 00:03:48,440
and then validate them down there.
70
00:03:48,440 --> 00:03:52,810
Now if validation fails, however, we don't wanna return JSX.
71
00:03:52,810 --> 00:03:55,043
That's not possible in getServerSideProps.
72
00:03:56,190 --> 00:03:59,520
We always have to return an object instead.
73
00:03:59,520 --> 00:04:01,390
But if the validation fails,
74
00:04:01,390 --> 00:04:05,720
I don't wanna return a props object here,
75
00:04:05,720 --> 00:04:07,390
or a props key.
76
00:04:07,390 --> 00:04:10,920
Instead, here, I'll then set notFound to true.
77
00:04:10,920 --> 00:04:13,370
I wanna show the 404 page
78
00:04:13,370 --> 00:04:17,223
if an invalid parameter combination is passed in.
79
00:04:18,350 --> 00:04:23,330
We could also consider redirecting to some error page
80
00:04:23,330 --> 00:04:24,950
if we had one.
81
00:04:24,950 --> 00:04:26,580
But here, we don't have one.
82
00:04:26,580 --> 00:04:28,850
We could add one, but I will not do that here.
83
00:04:28,850 --> 00:04:30,080
So I'll comment this out,
84
00:04:30,080 --> 00:04:33,827
and instead show the 404 error page.
85
00:04:33,827 --> 00:04:37,200
Another alternative would be to set some props
86
00:04:37,200 --> 00:04:39,810
like the hasError prop,
87
00:04:39,810 --> 00:04:42,200
and then handle this specific prop
88
00:04:42,200 --> 00:04:46,770
in our component function to show an error message.
89
00:04:46,770 --> 00:04:47,603
And actually,
90
00:04:47,603 --> 00:04:51,140
since we do have that error specific JSX code here,
91
00:04:51,140 --> 00:04:54,060
that might actually be the best alternative.
92
00:04:54,060 --> 00:04:56,450
So it's still worth knowing the other ones,
93
00:04:56,450 --> 00:04:58,990
but I will now not show the 404 page,
94
00:04:58,990 --> 00:05:02,070
but instead return my special hasError prop,
95
00:05:02,070 --> 00:05:05,253
set to true if the validation fails.
96
00:05:06,250 --> 00:05:08,520
So that in the component function,
97
00:05:08,520 --> 00:05:11,130
in this FilteredEventsPage function,
98
00:05:11,130 --> 00:05:14,920
we should expect props, and then down there,
99
00:05:14,920 --> 00:05:18,490
instead of validating our query parameters,
100
00:05:18,490 --> 00:05:22,340
I check if props hasError is true.
101
00:05:22,340 --> 00:05:25,723
And if that's the case, I'll show this error message.
102
00:05:26,580 --> 00:05:29,200
I think that actually makes the most sense,
103
00:05:29,200 --> 00:05:30,360
but you can also go
104
00:05:30,360 --> 00:05:32,593
with one of the two alternatives I showed.
105
00:05:35,250 --> 00:05:37,440
Now if we make it past this if check,
106
00:05:37,440 --> 00:05:40,680
we do have valid parameter values,
107
00:05:40,680 --> 00:05:44,410
and therefore now we wanna get our filtered events.
108
00:05:44,410 --> 00:05:47,070
For this, I'll go to dummy data,
109
00:05:47,070 --> 00:05:51,330
and take this getFilteredEvents function,
110
00:05:51,330 --> 00:05:54,730
and bring that over into api-util.
111
00:05:54,730 --> 00:05:55,803
Maybe down there.
112
00:05:56,990 --> 00:06:01,590
Here, we getFilteredEvents by reaching out to DUMMY_EVENTS
113
00:06:01,590 --> 00:06:03,670
and calling filter on that.
114
00:06:03,670 --> 00:06:06,000
Now just as in the other functions here,
115
00:06:06,000 --> 00:06:09,750
I will instead now turn this into a async function,
116
00:06:09,750 --> 00:06:13,173
then get access to allEvents by awaiting getAllEvents,
117
00:06:15,084 --> 00:06:16,760
and then using allEvents here
118
00:06:16,760 --> 00:06:19,463
instead of DUMMY_EVENTS for filtering.
119
00:06:21,860 --> 00:06:25,100
And with that, back in this slug page,
120
00:06:25,100 --> 00:06:28,040
we now wanna import getFilteredEvents,
121
00:06:28,040 --> 00:06:31,850
not from dummy-data, but from the helpers folder,
122
00:06:31,850 --> 00:06:35,160
and the api-util file.
123
00:06:35,160 --> 00:06:38,277
And then down there in getServerSideProps,
124
00:06:39,220 --> 00:06:41,910
we now get our filtered events
125
00:06:41,910 --> 00:06:44,630
by awaiting getFilteredEvents,
126
00:06:44,630 --> 00:06:48,000
to which we still pass this object with this data.
127
00:06:48,000 --> 00:06:51,220
Because I haven't changed the function's signature
128
00:06:51,220 --> 00:06:52,310
of this function.
129
00:06:52,310 --> 00:06:54,403
It still wants the same parameter.
130
00:06:55,530 --> 00:06:58,390
But we should await because this is now an async function
131
00:06:58,390 --> 00:07:00,133
returning a promise, therefore.
132
00:07:01,160 --> 00:07:03,340
So that gives us our filteredEvents,
133
00:07:03,340 --> 00:07:07,670
and hence, here, through props, we can expose our events,
134
00:07:07,670 --> 00:07:08,910
our filtered events,
135
00:07:08,910 --> 00:07:10,833
through an events prop.
136
00:07:12,660 --> 00:07:15,360
And therefore, back in the component function,
137
00:07:15,360 --> 00:07:17,050
now, in there,
138
00:07:17,050 --> 00:07:22,050
we actually don't really need to parse the URL anymore,
139
00:07:22,430 --> 00:07:25,283
though I'll keep that code around for now.
140
00:07:26,560 --> 00:07:30,710
But I will comment it out like this.
141
00:07:30,710 --> 00:07:34,133
Instead, now we are already using props.hasError,
142
00:07:35,060 --> 00:07:39,790
and I now also in addition wanna set my filteredEvents here
143
00:07:39,790 --> 00:07:41,850
equal to props.events.
144
00:07:41,850 --> 00:07:46,850
So this events prop which we populate in getServerSideProps.
145
00:07:47,010 --> 00:07:49,930
With that, if we save this,
146
00:07:49,930 --> 00:07:53,160
if I reload this page for this kind of filter,
147
00:07:53,160 --> 00:07:56,370
I still get no events found.
148
00:07:56,370 --> 00:08:00,120
Now, if I do pick a combination that exists, though,
149
00:08:00,120 --> 00:08:03,303
I get an error: numYear is not defined.
150
00:08:04,630 --> 00:08:05,950
That makes sense, because now,
151
00:08:05,950 --> 00:08:08,270
in there, I am constructing a date
152
00:08:08,270 --> 00:08:09,653
with numYear and numMonth,
153
00:08:11,040 --> 00:08:13,110
and we're not having that anymore,
154
00:08:13,110 --> 00:08:18,025
because I am not extracting it from the URL anymore.
155
00:08:18,025 --> 00:08:19,510
Now we could do that,
156
00:08:19,510 --> 00:08:23,820
but since we do get it in getServerSideProps anyways,
157
00:08:23,820 --> 00:08:26,420
we can't just expose numYear and month
158
00:08:26,420 --> 00:08:28,630
through props to the component.
159
00:08:28,630 --> 00:08:31,150
So here, besides exposing the events,
160
00:08:31,150 --> 00:08:33,900
I'll also expose my date,
161
00:08:33,900 --> 00:08:38,270
and here I'll then just expose this as a object
162
00:08:38,270 --> 00:08:41,289
where year is set equal to numYear,
163
00:08:41,289 --> 00:08:44,263
and month is set equal to numMonth.
164
00:08:45,950 --> 00:08:48,150
And now that we exposed this date prop,
165
00:08:48,150 --> 00:08:50,330
we can go to the component function,
166
00:08:50,330 --> 00:08:54,540
and build a date by accessing props.date.year,
167
00:08:56,020 --> 00:08:59,640
and then props.date.month.
168
00:08:59,640 --> 00:09:02,540
So these props which we just added.
169
00:09:02,540 --> 00:09:04,960
For that, if we save this and reload,
170
00:09:04,960 --> 00:09:08,540
now this gets loaded correctly.
171
00:09:08,540 --> 00:09:12,660
And this is now pre-rendered on the fly on the server
172
00:09:12,660 --> 00:09:15,170
for every incoming request.
173
00:09:15,170 --> 00:09:19,915
Because we are using getServerSideProps here.
174
00:09:19,915 --> 00:09:21,440
And of course, again, we can see that
175
00:09:21,440 --> 00:09:23,530
if we inspect the page source,
176
00:09:23,530 --> 00:09:28,530
there, the event data is part of that HTML content.
177
00:09:29,440 --> 00:09:33,240
And again, if I use some other filter
178
00:09:33,240 --> 00:09:36,540
where we don't find any events, we see that message.
179
00:09:36,540 --> 00:09:39,170
And if I enter something invalid here,
180
00:09:39,170 --> 00:09:41,390
we see the invalid filter page.
181
00:09:41,390 --> 00:09:45,270
And that also is pre-rendered
182
00:09:45,270 --> 00:09:46,623
as you can see here.
183
00:09:47,700 --> 00:09:49,933
So that's how we can use getServerSideProps.
14289
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.