Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,070 --> 00:00:04,660
Now to fully understand getStaticProps
2
00:00:04,660 --> 00:00:06,580
and also see what we can do with it,
3
00:00:06,580 --> 00:00:11,580
let's quit the dev server for now and run npm run build.
4
00:00:11,670 --> 00:00:13,490
This is the build command which you need
5
00:00:13,490 --> 00:00:18,120
to run before you deploy your NextJS site.
6
00:00:18,120 --> 00:00:20,180
Now, we are not going to deploy here
7
00:00:20,180 --> 00:00:23,220
but running it is still helpful and interesting.
8
00:00:23,220 --> 00:00:24,960
If we run npm run build here
9
00:00:24,960 --> 00:00:27,720
to build that production build,
10
00:00:27,720 --> 00:00:30,090
to create that production build,
11
00:00:30,090 --> 00:00:31,503
we see some output here.
12
00:00:32,740 --> 00:00:35,240
And in this output, we see what it did
13
00:00:35,240 --> 00:00:38,780
and that it generated some static pages, for example,
14
00:00:38,780 --> 00:00:41,060
four pages to be precise.
15
00:00:41,060 --> 00:00:43,933
And we see which pages it generated.
16
00:00:44,770 --> 00:00:47,770
And what we see here is that it generated the root page
17
00:00:47,770 --> 00:00:49,760
for slash nothing,
18
00:00:49,760 --> 00:00:53,438
the dynamic page for /meetupId,
19
00:00:53,438 --> 00:00:56,590
a 404 page, which is actually generates
20
00:00:56,590 --> 00:00:59,070
for us automatically by default
21
00:00:59,070 --> 00:01:02,460
in case we enter a invalid URL.
22
00:01:02,460 --> 00:01:05,340
And the new-meetup page.
23
00:01:05,340 --> 00:01:09,880
And then we got these icons here next to the pages.
24
00:01:09,880 --> 00:01:13,730
A filled dot and three empty dots.
25
00:01:13,730 --> 00:01:16,210
If we scroll down, we see a legend here
26
00:01:16,210 --> 00:01:17,970
and we learn that a filled dot
27
00:01:17,970 --> 00:01:21,370
is a statically generated site,
28
00:01:21,370 --> 00:01:25,080
that's what SSG stands for, Static Site Generation,
29
00:01:25,080 --> 00:01:28,870
which was automatically generated as HTML
30
00:01:28,870 --> 00:01:32,570
and JSON, which is then used for pre-fetching data
31
00:01:32,570 --> 00:01:35,893
once the page turned into a single page application.
32
00:01:36,750 --> 00:01:40,083
The empty dot stands for Static Generation.
33
00:01:41,040 --> 00:01:42,550
That's almost the same.
34
00:01:42,550 --> 00:01:46,110
The only difference is that here we got no initial props.
35
00:01:46,110 --> 00:01:49,790
So we have no initial data that was fetched
36
00:01:49,790 --> 00:01:51,660
and indeed, only for the root page,
37
00:01:51,660 --> 00:01:53,000
we are fetching data
38
00:01:53,000 --> 00:01:56,040
because that is the page where we added getStaticProps
39
00:01:56,040 --> 00:01:58,800
and that's why we have the filled dot here.
40
00:01:58,800 --> 00:02:01,060
Now, we will work on some other pages later,
41
00:02:01,060 --> 00:02:04,580
to be precise, we will work on the meetupId page soon
42
00:02:04,580 --> 00:02:06,740
but, for example, the new-meetup page
43
00:02:06,740 --> 00:02:08,972
does not need any data fetching.
44
00:02:08,972 --> 00:02:13,170
There, we, in the end, only render our form
45
00:02:13,170 --> 00:02:15,230
and we don't need any data here,
46
00:02:15,230 --> 00:02:17,620
we don't fetch any data from a server
47
00:02:17,620 --> 00:02:19,650
and therefore, the new-meetup page
48
00:02:19,650 --> 00:02:23,520
will always stay a static page with no content.
49
00:02:23,520 --> 00:02:25,590
So that is fine.
50
00:02:25,590 --> 00:02:30,040
But we will turn the meetupId page into a SSG page later
51
00:02:30,040 --> 00:02:31,050
but for the moment,
52
00:02:31,050 --> 00:02:32,890
we see that only the starting page,
53
00:02:32,890 --> 00:02:37,150
the root page is such a statically generated site.
54
00:02:37,150 --> 00:02:40,320
Now, with that, let's start the development server again
55
00:02:40,320 --> 00:02:42,870
and let's think about potential problems
56
00:02:42,870 --> 00:02:46,420
we could be facing when using getStaticProps.
57
00:02:46,420 --> 00:02:48,530
And one pretty big problem,
58
00:02:48,530 --> 00:02:51,550
which we could face in some websites,
59
00:02:51,550 --> 00:02:53,350
depending on what we're doing
60
00:02:53,350 --> 00:02:57,020
is that the data here could be outdated.
61
00:02:57,020 --> 00:02:59,300
This page, as I mentioned, is generated
62
00:02:59,300 --> 00:03:01,180
during the build process.
63
00:03:01,180 --> 00:03:03,130
So thereafter, we deploy it.
64
00:03:03,130 --> 00:03:06,200
If we then add more meetups to our database,
65
00:03:06,200 --> 00:03:09,810
this pre-generated page would not know about them.
66
00:03:09,810 --> 00:03:13,180
And if we don't add any client-side data fetching,
67
00:03:13,180 --> 00:03:16,820
we would always just see the outdated meetups here.
68
00:03:16,820 --> 00:03:19,330
And this could, of course, be a problem.
69
00:03:19,330 --> 00:03:22,380
Now, we can always rebuild our site
70
00:03:22,380 --> 00:03:25,360
and redeploy when our data changes.
71
00:03:25,360 --> 00:03:28,260
And for some websites, like personal blogs,
72
00:03:28,260 --> 00:03:29,924
this is a great alternative
73
00:03:29,924 --> 00:03:33,570
because there data doesn't change too frequently
74
00:03:33,570 --> 00:03:36,440
but if data does change more frequently,
75
00:03:36,440 --> 00:03:38,300
there is a extra property,
76
00:03:38,300 --> 00:03:41,230
which we can add to this returned object.
77
00:03:41,230 --> 00:03:45,040
And that's the revalidate property.
78
00:03:45,040 --> 00:03:48,750
When we add this property to the object returned
79
00:03:48,750 --> 00:03:52,680
by getStaticProps, we unlock a feature
80
00:03:52,680 --> 00:03:55,971
called incremental Static Generation.
81
00:03:55,971 --> 00:03:58,830
Revalidate wants a number,
82
00:03:58,830 --> 00:04:01,900
let's say 10, and this number is the number
83
00:04:01,900 --> 00:04:04,760
of seconds NextJS will wait
84
00:04:04,760 --> 00:04:07,410
until it regenerates this page
85
00:04:07,410 --> 00:04:09,313
for an incoming request.
86
00:04:10,340 --> 00:04:14,010
That means that with revalidate set to some number,
87
00:04:14,010 --> 00:04:17,720
this page will not just be generated
88
00:04:17,720 --> 00:04:19,339
during the build process.
89
00:04:19,339 --> 00:04:22,360
It will be generated there but not just
90
00:04:22,360 --> 00:04:25,940
but it will also be generated every couple of seconds
91
00:04:25,940 --> 00:04:29,200
on the server, at least if there are requests
92
00:04:29,200 --> 00:04:30,602
for this page.
93
00:04:30,602 --> 00:04:35,520
So that means that this page, with revalidate set to 10,
94
00:04:35,520 --> 00:04:38,300
would be regenerated on the server
95
00:04:38,300 --> 00:04:42,140
at least every 10 seconds if there are requests coming in
96
00:04:42,140 --> 00:04:43,500
for this page.
97
00:04:43,500 --> 00:04:46,340
And then these regenerated pages
98
00:04:46,340 --> 00:04:50,060
would replace the old pre-generated pages.
99
00:04:50,060 --> 00:04:52,460
And with that, you would ensure that your data
100
00:04:52,460 --> 00:04:55,840
is never older than 10 seconds.
101
00:04:55,840 --> 00:04:57,500
And therefore, the number of seconds
102
00:04:57,500 --> 00:04:58,790
you wanna use here depends
103
00:04:58,790 --> 00:05:01,510
on your data update frequency.
104
00:05:01,510 --> 00:05:05,100
If your data changes once every hour,
105
00:05:05,100 --> 00:05:09,290
then setting this to 3600 might be great.
106
00:05:09,290 --> 00:05:13,630
If it changes all the time, one second might be better.
107
00:05:13,630 --> 00:05:15,840
But whatever you set this number to,
108
00:05:15,840 --> 00:05:18,403
you will ensure that this page will occasionally
109
00:05:18,403 --> 00:05:23,403
be re pre-generated on the server after deployment
110
00:05:24,317 --> 00:05:26,740
so that you don't have to redeploy
111
00:05:26,740 --> 00:05:31,370
and rebuild all the time just because some data changed.
112
00:05:31,370 --> 00:05:33,570
It doesn't really matter to us here,
113
00:05:33,570 --> 00:05:36,900
especially not as long as we're just using this dummy array
114
00:05:36,900 --> 00:05:40,030
but it is an important feature you should know about
115
00:05:40,030 --> 00:05:42,293
and that is how you can set it.
8922
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.