Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,480 --> 00:00:05,930
So getStaticProps is a very useful function
2
00:00:05,930 --> 00:00:08,792
which you can export in your page components to ensure
3
00:00:08,792 --> 00:00:12,178
that your pre-rendered pages contain data
4
00:00:12,178 --> 00:00:15,040
you might need to wait for.
5
00:00:15,040 --> 00:00:17,320
Now with revalidate, you can ensure
6
00:00:17,320 --> 00:00:21,672
that this page is also updated regularly after deployment.
7
00:00:21,672 --> 00:00:25,301
But sometimes even a regular update is not enough.
8
00:00:25,301 --> 00:00:29,061
Sometimes you really want to regenerate this page
9
00:00:29,061 --> 00:00:32,203
for every incoming request.
10
00:00:32,203 --> 00:00:35,962
So you want to pre-generate the page dynamically
11
00:00:35,962 --> 00:00:40,058
on the fly after deployment on the server.
12
00:00:40,058 --> 00:00:41,813
Not during the build process
13
00:00:41,813 --> 00:00:44,030
and not every couple of seconds,
14
00:00:44,030 --> 00:00:46,050
but for every request.
15
00:00:46,050 --> 00:00:47,540
And if that's your goal,
16
00:00:47,540 --> 00:00:50,712
then there is an alternative to getStaticProps.
17
00:00:50,712 --> 00:00:53,411
Now, I will comment out getStaticProps,
18
00:00:53,411 --> 00:00:55,683
because it is the better choice here
19
00:00:55,683 --> 00:00:57,461
and I wanna use it later again.
20
00:00:57,461 --> 00:01:00,970
But I want to show you this alternative as well.
21
00:01:00,970 --> 00:01:03,820
And that would be another function which you can export.
22
00:01:03,820 --> 00:01:07,003
A function that can also be async if you want to.
23
00:01:07,003 --> 00:01:11,263
And that's the getServerSideProps function.
24
00:01:12,110 --> 00:01:15,191
Just like getStaticProps, that is a reserved name,
25
00:01:15,191 --> 00:01:17,580
which NextJS will be looking for.
26
00:01:17,580 --> 00:01:20,420
And the difference to getStaticProps
27
00:01:20,420 --> 00:01:23,530
is that this function will now not run
28
00:01:23,530 --> 00:01:25,231
during the build process,
29
00:01:25,231 --> 00:01:29,944
but instead always on the server after deployment.
30
00:01:29,944 --> 00:01:32,705
Now you will still return an object here,
31
00:01:32,705 --> 00:01:35,311
an object with a props property,
32
00:01:35,311 --> 00:01:38,420
because after all, this function still is
33
00:01:38,420 --> 00:01:41,648
about getting the props for this page component.
34
00:01:41,648 --> 00:01:45,670
And you can still then fetch data from an API here,
35
00:01:45,670 --> 00:01:48,458
or from the file system, whatever you want to do.
36
00:01:48,458 --> 00:01:52,610
Any code you write in here will always run on the server,
37
00:01:52,610 --> 00:01:53,999
never in the client.
38
00:01:53,999 --> 00:01:56,421
So you can run the server side code in here,
39
00:01:56,421 --> 00:01:59,639
you can also perform operations that use credentials
40
00:01:59,639 --> 00:02:02,170
that should not be exposed to your users,
41
00:02:02,170 --> 00:02:05,530
because this code only runs on the server.
42
00:02:05,530 --> 00:02:09,680
And then ultimately, you return your props object.
43
00:02:09,680 --> 00:02:12,021
So here an object with a meetups key,
44
00:02:12,021 --> 00:02:15,221
which holds my dummy meetups, for example.
45
00:02:15,221 --> 00:02:18,010
Now you can't set revalidate here,
46
00:02:18,010 --> 00:02:20,870
because it doesn't make any sense here.
47
00:02:20,870 --> 00:02:23,360
This getServerSideProps function runs
48
00:02:23,360 --> 00:02:25,338
for every incoming requests anyways,
49
00:02:25,338 --> 00:02:29,349
so there is no need to revalidate every x seconds.
50
00:02:29,349 --> 00:02:31,400
Now what you can do in here,
51
00:02:31,400 --> 00:02:34,620
is you can work with a parameter,
52
00:02:34,620 --> 00:02:37,488
which you'll receive. The context parameter.
53
00:02:37,488 --> 00:02:40,518
You actually also get this and getStaticProps,
54
00:02:40,518 --> 00:02:43,678
but I will come back to it there, later.
55
00:02:43,678 --> 00:02:47,230
You do get it here and getServerSideProps as well.
56
00:02:47,230 --> 00:02:50,400
And there in this context argument,
57
00:02:50,400 --> 00:02:52,036
in this context parameter.
58
00:02:52,036 --> 00:02:55,458
You also get access to the request object
59
00:02:55,458 --> 00:02:58,978
under direct key, and the response object
60
00:02:58,978 --> 00:03:00,800
that will be sent back.
61
00:03:00,800 --> 00:03:03,713
And if you worked with NodeJS and Express before,
62
00:03:03,713 --> 00:03:06,446
this might look familiar to you.
63
00:03:06,446 --> 00:03:09,766
There, you also get request and response objects
64
00:03:09,766 --> 00:03:12,944
in your middleware to then work with those.
65
00:03:12,944 --> 00:03:15,120
And especially having access
66
00:03:15,120 --> 00:03:17,810
to the concrete request object can be helpful.
67
00:03:17,810 --> 00:03:21,460
For example, when you're working with authentication,
68
00:03:21,460 --> 00:03:24,390
and you need to check some session cookie
69
00:03:24,390 --> 00:03:25,763
or anything like this.
70
00:03:25,763 --> 00:03:29,910
This is something which I show in my full NextJS course,
71
00:03:29,910 --> 00:03:31,540
it's a little too advanced here.
72
00:03:31,540 --> 00:03:34,311
But you do have access to the incoming request
73
00:03:34,311 --> 00:03:37,550
and all its headers and the request body if you need to.
74
00:03:37,550 --> 00:03:41,403
And that then might give you extra data or information,
75
00:03:41,403 --> 00:03:44,380
which you need for the code that executes
76
00:03:44,380 --> 00:03:46,315
in getServerSideProps.
77
00:03:46,315 --> 00:03:49,349
Ultimately, you then don't return a response
78
00:03:49,349 --> 00:03:51,772
by working on that response object here,
79
00:03:51,772 --> 00:03:55,279
but instead, you return this object with the props key,
80
00:03:55,279 --> 00:03:59,200
which holds the props for this page component function.
81
00:03:59,200 --> 00:04:01,979
So that is how you then can use getServerSideProps
82
00:04:01,979 --> 00:04:06,564
for preparing that data for your page.
83
00:04:06,564 --> 00:04:09,870
And if we do use getServerSideProps here,
84
00:04:09,870 --> 00:04:13,118
if we save everything, if I reload the starting page,
85
00:04:13,118 --> 00:04:15,336
you see it works just as before,
86
00:04:15,336 --> 00:04:17,790
and if we view the page source,
87
00:04:17,790 --> 00:04:20,320
we also see all the data in there again.
88
00:04:20,320 --> 00:04:22,616
The unordered list with all the list items.
89
00:04:22,616 --> 00:04:24,968
That works exactly as we learned it,
90
00:04:24,968 --> 00:04:28,060
but now their page is really pre-generated
91
00:04:28,060 --> 00:04:29,758
for every incoming request.
92
00:04:29,758 --> 00:04:32,760
Now, which one of the two should you use?
93
00:04:32,760 --> 00:04:36,703
Is getServerSideProps better or getStaticProps?
94
00:04:36,703 --> 00:04:39,507
getServerSideProps might sound better
95
00:04:39,507 --> 00:04:42,867
because it's guaranteed to run for every request.
96
00:04:42,867 --> 00:04:45,886
But that actually can be a disadvantage,
97
00:04:45,886 --> 00:04:49,387
because that means that you need to wait for your page
98
00:04:49,387 --> 00:04:53,820
to be generated on every incoming request.
99
00:04:53,820 --> 00:04:57,570
Now if you don't have data that changes all the time,
100
00:04:57,570 --> 00:04:59,090
and with that, I really mean
101
00:04:59,090 --> 00:05:01,574
that it changes multiple times every second.
102
00:05:01,574 --> 00:05:05,110
And if you don't need access to the request object,
103
00:05:05,110 --> 00:05:07,176
let's say for authentication,
104
00:05:07,176 --> 00:05:10,174
getStaticProps is actually better.
105
00:05:10,174 --> 00:05:13,913
Because there you pre-generate an HTML file,
106
00:05:13,913 --> 00:05:17,622
that file can then be stored and served by a CDN.
107
00:05:17,622 --> 00:05:21,113
And that simply is faster than regenerating
108
00:05:21,113 --> 00:05:24,924
and fetching that data for every incoming request.
109
00:05:24,924 --> 00:05:27,822
So your page will be faster when working
110
00:05:27,822 --> 00:05:30,972
with getStaticProps, because then it can be cached
111
00:05:30,972 --> 00:05:34,910
and reused, instead of regenerated all the time.
112
00:05:34,910 --> 00:05:38,633
Hence, you should really only use getServerSideProps
113
00:05:38,633 --> 00:05:41,862
if you need access to that concrete request object,
114
00:05:41,862 --> 00:05:44,813
because you don't have access to request
115
00:05:44,813 --> 00:05:46,913
and response in getStaticProps.
116
00:05:47,764 --> 00:05:49,873
Or if you really have data
117
00:05:49,873 --> 00:05:53,102
that changes multiple times every second,
118
00:05:53,102 --> 00:05:56,063
then therefore even revalidate won't help you,
119
00:05:56,063 --> 00:05:59,840
then getServerSideProps is a great choice.
120
00:05:59,840 --> 00:06:01,515
Now here for our meetup list, though,
121
00:06:01,515 --> 00:06:05,300
it's not a great choice, because that is not data,
122
00:06:05,300 --> 00:06:06,930
which changes frequently.
123
00:06:06,930 --> 00:06:08,704
And here I also don't need to work
124
00:06:08,704 --> 00:06:10,693
with the incoming request.
125
00:06:10,693 --> 00:06:14,780
And therefore I will comment getServerSideprops out again,
126
00:06:14,780 --> 00:06:16,765
and comment getStaticProps in.
127
00:06:16,765 --> 00:06:19,644
Because with that, we can take advantage of the caching
128
00:06:19,644 --> 00:06:23,493
and we're not regenerating the page multiple times,
129
00:06:23,493 --> 00:06:25,123
unnecessarily.
10342
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.