Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,050 --> 00:00:05,460
NextJS has this built-in page pre-rendering
2
00:00:05,460 --> 00:00:08,640
but this built-in process has a flaw
3
00:00:08,640 --> 00:00:10,460
if you wanna call it like this.
4
00:00:10,460 --> 00:00:12,810
As I showed you a couple of seconds ago,
5
00:00:12,810 --> 00:00:16,780
the page that is pre-rendered has basically the snapshot
6
00:00:16,780 --> 00:00:21,260
after the first component render cycle as its content
7
00:00:21,260 --> 00:00:23,640
and that might be missing crucial data.
8
00:00:23,640 --> 00:00:25,470
So if we visit some route,
9
00:00:25,470 --> 00:00:29,840
if some request is sent to some route to this page then,
10
00:00:29,840 --> 00:00:32,170
there we return that pre-rendered page
11
00:00:32,170 --> 00:00:34,400
but we might be missing data here.
12
00:00:34,400 --> 00:00:37,710
So whilst this is theoretically good for SEO,
13
00:00:37,710 --> 00:00:39,360
for search engine optimization,
14
00:00:39,360 --> 00:00:41,170
it might not always be.
15
00:00:41,170 --> 00:00:44,180
But after this HTML page was received,
16
00:00:44,180 --> 00:00:46,440
React will actually take over,
17
00:00:46,440 --> 00:00:49,930
the page is hydrated as this process is called,
18
00:00:49,930 --> 00:00:52,110
which means that now React will turn this
19
00:00:52,110 --> 00:00:55,830
into a single page application and take over control
20
00:00:55,830 --> 00:00:59,620
and then this useEffect function might be executed,
21
00:00:59,620 --> 00:01:03,400
data might be fetched and the page might be updated
22
00:01:03,400 --> 00:01:06,050
in the browser, not on the server,
23
00:01:06,050 --> 00:01:07,880
not on the pre-rendered page
24
00:01:07,880 --> 00:01:12,180
but instead, after this page was received in the browser.
25
00:01:12,180 --> 00:01:14,970
And therefore, we then have a fully interactive page
26
00:01:14,970 --> 00:01:17,980
or app with all the data we need.
27
00:01:17,980 --> 00:01:21,330
But if we wanna pre-render a page with data
28
00:01:21,330 --> 00:01:24,890
so that this initially returned HTML code
29
00:01:24,890 --> 00:01:26,740
already contains the data,
30
00:01:26,740 --> 00:01:30,820
we need to fine tune this built-it pre-rendering process
31
00:01:30,820 --> 00:01:32,730
and we need to configure it.
32
00:01:32,730 --> 00:01:37,030
And for this, NextJS gives us two forms of pre-rendering,
33
00:01:37,030 --> 00:01:40,580
which we can use for controlling
34
00:01:40,580 --> 00:01:43,470
how the pages should be rendered.
35
00:01:43,470 --> 00:01:46,750
It has something which is called Static Generation
36
00:01:46,750 --> 00:01:48,530
and it has an alternative,
37
00:01:48,530 --> 00:01:51,010
which is called Server-side Rendering.
38
00:01:51,010 --> 00:01:53,540
And the two might sound similar
39
00:01:53,540 --> 00:01:58,110
but they run or the code runs at different points of time
40
00:01:58,110 --> 00:02:00,890
as you will learn over the next minutes.
41
00:02:00,890 --> 00:02:03,710
Now, we're going to start with Static Generation
42
00:02:03,710 --> 00:02:07,150
because that is the approach which you typically should use
43
00:02:07,150 --> 00:02:08,592
but how does it work?
44
00:02:09,500 --> 00:02:11,830
When using Static Generation,
45
00:02:11,830 --> 00:02:14,510
a page component is pre-rendered
46
00:02:14,510 --> 00:02:16,980
when you build your application,
47
00:02:16,980 --> 00:02:19,070
when you build the next project.
48
00:02:19,070 --> 00:02:21,890
So when you build it for production.
49
00:02:21,890 --> 00:02:23,200
And that's important.
50
00:02:23,200 --> 00:02:25,180
With Static Generation,
51
00:02:25,180 --> 00:02:28,960
by default, your page is not pre-rendered
52
00:02:28,960 --> 00:02:31,130
on the fly on the server
53
00:02:31,130 --> 00:02:33,900
when a request reaches the server
54
00:02:33,900 --> 00:02:35,900
but instead, it is pre-rendered
55
00:02:35,900 --> 00:02:40,730
when you as a developer build your site for production.
56
00:02:40,730 --> 00:02:43,860
And that means that after it was deployed,
57
00:02:43,860 --> 00:02:46,820
that pre-rendered page does not change.
58
00:02:46,820 --> 00:02:49,000
At least not by default.
59
00:02:49,000 --> 00:02:51,450
If you then updated the data
60
00:02:51,450 --> 00:02:54,990
and you know that the pre-rendered page needs to change,
61
00:02:54,990 --> 00:02:57,820
you need to start that build process again
62
00:02:57,820 --> 00:02:59,640
and redeploy again.
63
00:02:59,640 --> 00:03:02,240
But that might sound worse than it actually is
64
00:03:02,240 --> 00:03:04,620
because for a lot of applications,
65
00:03:04,620 --> 00:03:06,530
pages don't change all the time.
66
00:03:06,530 --> 00:03:08,800
Page content doesn't change all the time
67
00:03:08,800 --> 00:03:11,280
and if it should change frequently,
68
00:03:11,280 --> 00:03:14,040
there are alternatives, which I will also show you
69
00:03:14,040 --> 00:03:15,377
in a couple of minutes.
70
00:03:15,377 --> 00:03:19,188
But for the moment, let's start with this Static Generation.
71
00:03:19,188 --> 00:03:21,570
Now, as I mentioned, by default,
72
00:03:21,570 --> 00:03:23,700
NextJS prepares your pages.
73
00:03:23,700 --> 00:03:27,270
It by default generates your pages already statically
74
00:03:27,270 --> 00:03:30,900
and it by default does that during the build process
75
00:03:30,900 --> 00:03:33,660
but if you need to wait for data,
76
00:03:33,660 --> 00:03:36,980
if you need to add data fetching to a page component,
77
00:03:36,980 --> 00:03:41,270
you can do so by exporting a special function
78
00:03:41,270 --> 00:03:43,920
from inside your page component file.
79
00:03:43,920 --> 00:03:45,870
And that's important.
80
00:03:45,870 --> 00:03:49,410
This now only works in your page component files,
81
00:03:49,410 --> 00:03:51,670
not in other component files.
82
00:03:51,670 --> 00:03:55,820
Only in component files inside of the pages folder.
83
00:03:55,820 --> 00:03:58,360
In there, you can export a function,
84
00:03:58,360 --> 00:04:00,620
a function called getStaticProps
85
00:04:02,290 --> 00:04:05,503
and it has to be called getStaticProps.
86
00:04:06,650 --> 00:04:09,370
This is a reserved name so to say.
87
00:04:09,370 --> 00:04:12,670
NextJS will look for a function with that name
88
00:04:12,670 --> 00:04:16,380
and if it finds it, it executes this function
89
00:04:16,380 --> 00:04:19,623
during this pre-rendering process.
90
00:04:20,579 --> 00:04:24,200
So it will then not directly call your component function
91
00:04:24,200 --> 00:04:28,680
and use the returned JSX snapshot as HTML content
92
00:04:28,680 --> 00:04:31,770
but it will, first of all, call getStaticProps
93
00:04:31,770 --> 00:04:34,520
before it calls the component function.
94
00:04:34,520 --> 00:04:37,560
And getStaticProps has this name
95
00:04:37,560 --> 00:04:42,560
because indeed, its job is to prepare props for this page.
96
00:04:44,050 --> 00:04:48,390
And these props could then contain the data this page needs.
97
00:04:48,390 --> 00:04:51,490
And that's useful because getStaticProps
98
00:04:51,490 --> 00:04:54,040
is allowed to be asynchronous.
99
00:04:54,040 --> 00:04:56,220
You can return a promise there
100
00:04:56,220 --> 00:04:58,450
and then, and that's the key thing,
101
00:04:58,450 --> 00:05:02,400
NextJS will wait for this promise to resolve,
102
00:05:02,400 --> 00:05:05,200
which means it waits until your data is loaded
103
00:05:05,200 --> 00:05:09,790
and then you return the props for this component function.
104
00:05:09,790 --> 00:05:12,250
And with that, you're able to load data
105
00:05:12,250 --> 00:05:14,950
before this component function is executed
106
00:05:14,950 --> 00:05:17,420
so that this component can be rendered
107
00:05:17,420 --> 00:05:18,973
with the required data.
108
00:05:20,220 --> 00:05:22,340
Now, here in getStaticProps,
109
00:05:22,340 --> 00:05:24,500
you can also execute any code
110
00:05:24,500 --> 00:05:27,730
that would normally only run on a server.
111
00:05:27,730 --> 00:05:29,880
You could access a file system here
112
00:05:29,880 --> 00:05:32,740
or securely connect to a database
113
00:05:32,740 --> 00:05:35,160
because any code you write in here
114
00:05:35,160 --> 00:05:37,570
will never end up on the client side
115
00:05:37,570 --> 00:05:41,050
and it will never execute on the client side
116
00:05:41,050 --> 00:05:44,410
simply because this code is executed
117
00:05:44,410 --> 00:05:45,920
during the build process,
118
00:05:45,920 --> 00:05:50,060
not on the server and especially not on the clients
119
00:05:50,060 --> 00:05:51,730
of your visitors.
120
00:05:51,730 --> 00:05:55,100
So the code in here will never reach the machines
121
00:05:55,100 --> 00:05:56,350
of your visitors.
122
00:05:56,350 --> 00:05:59,350
It will never execute on their machines.
123
00:05:59,350 --> 00:06:01,120
Now, here in getStaticProps,
124
00:06:01,120 --> 00:06:02,450
you can do whatever you want,
125
00:06:02,450 --> 00:06:06,480
for example, fetch data from an API
126
00:06:06,480 --> 00:06:09,880
or from a database or read data from some files
127
00:06:09,880 --> 00:06:11,970
in the file system, like we do it
128
00:06:11,970 --> 00:06:15,200
in my full NextJS course, for example.
129
00:06:15,200 --> 00:06:18,030
But then once you're done with whatever you did
130
00:06:18,030 --> 00:06:19,840
to get the data you need,
131
00:06:19,840 --> 00:06:23,183
you need to return an object here in getStaticProps.
132
00:06:24,040 --> 00:06:27,072
You always need to return an object here.
133
00:06:27,072 --> 00:06:28,830
Now, in this object,
134
00:06:28,830 --> 00:06:30,930
you can configure various things
135
00:06:30,930 --> 00:06:32,500
but most importantly,
136
00:06:32,500 --> 00:06:36,200
you typically set a props property here
137
00:06:36,200 --> 00:06:38,910
and it has to be named props.
138
00:06:38,910 --> 00:06:41,830
And that then holds another object,
139
00:06:41,830 --> 00:06:45,150
which will be the props object you receive
140
00:06:45,150 --> 00:06:47,720
in your component function here
141
00:06:47,720 --> 00:06:50,540
in this page component function.
142
00:06:50,540 --> 00:06:52,730
This now receives a props object
143
00:06:52,730 --> 00:06:56,180
and the object will be the object you set as props here
144
00:06:56,180 --> 00:06:57,233
in getStaticProps.
145
00:06:58,302 --> 00:07:03,180
And there we could have our meetups key in there.
146
00:07:03,180 --> 00:07:06,520
The structure of this props object is totally up to you,
147
00:07:06,520 --> 00:07:08,020
which holds our DUMMY_MEETUPS.
148
00:07:09,360 --> 00:07:12,160
With that, those DUMMY_MEETUPS would be loaded
149
00:07:12,160 --> 00:07:13,850
and prepared in getStaticProps
150
00:07:14,860 --> 00:07:17,836
and then they would be set as props
151
00:07:17,836 --> 00:07:20,890
for this page component.
152
00:07:20,890 --> 00:07:23,010
Therefore, in this page component,
153
00:07:23,010 --> 00:07:25,700
we no longer need to manage state,
154
00:07:25,700 --> 00:07:28,090
we no longer need useEffect
155
00:07:28,090 --> 00:07:31,182
and we can therefore get rid of those imports here
156
00:07:31,182 --> 00:07:34,890
because now we get the data through props.
157
00:07:34,890 --> 00:07:37,740
And our meetups for the MeetupList component
158
00:07:37,740 --> 00:07:40,727
are props.meetsups.
159
00:07:40,727 --> 00:07:44,163
.meetups because I'm adding a meetups prop down there.
160
00:07:45,070 --> 00:07:47,670
And that's how we can move the data fetching away
161
00:07:47,670 --> 00:07:51,060
from the client to the server-side
162
00:07:51,060 --> 00:07:56,060
or to be precise to the during the build process side.
163
00:07:56,200 --> 00:07:57,853
If I now save everything,
164
00:07:58,820 --> 00:08:02,900
if we reload our page, we still see our meetups here
165
00:08:02,900 --> 00:08:05,060
but if I now view the page source,
166
00:08:05,060 --> 00:08:09,100
we see that we no longer have an empty unordered list,
167
00:08:09,100 --> 00:08:10,970
instead we have an unordered list,
168
00:08:10,970 --> 00:08:12,940
which has list items
169
00:08:12,940 --> 00:08:17,293
with the images and the title and so on.
170
00:08:18,310 --> 00:08:20,310
So now this is pre-rendered
171
00:08:20,310 --> 00:08:23,510
and it now contains the full HTML code
172
00:08:23,510 --> 00:08:27,020
and that's, of course, also great for search engines then
173
00:08:27,020 --> 00:08:29,380
because now, data is not fetched
174
00:08:29,380 --> 00:08:32,620
in a second component render cycle on the client
175
00:08:32,620 --> 00:08:35,820
but initially, before this page is pre-rendered,
176
00:08:35,820 --> 00:08:38,010
during the build process.
177
00:08:38,010 --> 00:08:41,260
And that's a great plus and one of the main features
178
00:08:41,260 --> 00:08:45,692
of NextJS, this data fetching for pre-rendering.
179
00:08:45,692 --> 00:08:49,960
And getStaticProps will be a function you use a lot
180
00:08:49,960 --> 00:08:54,273
when working with NextJS as you also see in my full course.
14048
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.