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:03,150
Now before,
2
00:00:03,150 --> 00:00:06,470
I also always had a look at the production build
3
00:00:06,470 --> 00:00:09,820
to really show you what Next.js does under the hood.
4
00:00:09,820 --> 00:00:12,393
And I wanna do the same here for getServerSideProps.
5
00:00:13,820 --> 00:00:17,283
So for this, I will add a console log statement here,
6
00:00:18,450 --> 00:00:20,833
where I log server side code.
7
00:00:22,110 --> 00:00:25,160
So that we see when this function runs
8
00:00:25,160 --> 00:00:27,370
and now if we save that file,
9
00:00:27,370 --> 00:00:29,630
and we again run npm run build
10
00:00:29,630 --> 00:00:31,870
to build this for production,
11
00:00:31,870 --> 00:00:34,950
we'll see when that code gets executed.
12
00:00:34,950 --> 00:00:37,200
Now, here, if I make this a bit bigger
13
00:00:37,200 --> 00:00:39,370
we see that we again
14
00:00:39,370 --> 00:00:42,910
pre-generated a couple of pages and importantly
15
00:00:42,910 --> 00:00:46,490
it's the same number of pages as we generated before.
16
00:00:46,490 --> 00:00:49,290
It's still the starting page slash nothing
17
00:00:49,290 --> 00:00:52,070
with the revalidation recognized,
18
00:00:52,070 --> 00:00:54,180
it's then 404 page.
19
00:00:54,180 --> 00:00:57,243
And it stands the product pages for P1,
20
00:00:57,243 --> 00:00:59,560
P2, P3 and so on.
21
00:00:59,560 --> 00:01:03,200
Now the user profile page was not pre-generated
22
00:01:03,200 --> 00:01:08,200
as is in the end signaled by this Lambda symbol here.
23
00:01:08,470 --> 00:01:12,220
The UID file also wasn't pre-generated.
24
00:01:12,220 --> 00:01:14,550
So this Lambda symbol here
25
00:01:14,550 --> 00:01:18,250
shows you that these pages are not pre-generated
26
00:01:18,250 --> 00:01:22,810
but instead will be pre-rendered on the server only.
27
00:01:22,810 --> 00:01:25,690
And that makes sense because in user profile
28
00:01:25,690 --> 00:01:27,760
we're using get Server Side Props
29
00:01:27,760 --> 00:01:31,220
and then UID we're using get Server Side Props.
30
00:01:31,220 --> 00:01:34,750
That's why, those pages are not pre-generated
31
00:01:34,750 --> 00:01:37,110
So, now with that
32
00:01:37,110 --> 00:01:41,570
If we, again, start our server with npm start here
33
00:01:42,610 --> 00:01:44,770
If you load, local host to three thousands,
34
00:01:44,770 --> 00:01:46,270
we're on this page here,
35
00:01:46,270 --> 00:01:49,830
but if I now visit the user dash profile page here
36
00:01:49,830 --> 00:01:51,460
and we see Max,
37
00:01:51,460 --> 00:01:53,760
if we go back to that terminal
38
00:01:53,760 --> 00:01:57,510
where I started this production server with npm start,
39
00:01:57,510 --> 00:02:00,780
we see server side code being logged here.
40
00:02:00,780 --> 00:02:03,960
So this output here, we see that log here,
41
00:02:03,960 --> 00:02:07,250
and that proves that this does code now executed,
42
00:02:07,250 --> 00:02:11,640
but as shown before that this page was not pre-generated
43
00:02:12,670 --> 00:02:14,490
With that, I'm going to get rid of that
44
00:02:14,490 --> 00:02:16,010
console log statement
45
00:02:16,010 --> 00:02:21,010
but I hope it's crystal clear when which code runs now.
46
00:02:21,260 --> 00:02:23,960
And that is it for a get Server Side Props
47
00:02:23,960 --> 00:02:26,080
and get static props
48
00:02:26,080 --> 00:02:30,200
and also for get Static Paths.
49
00:02:30,200 --> 00:02:32,220
I hope the differences are clear,
50
00:02:32,220 --> 00:02:35,710
especially between static pre generation
51
00:02:35,710 --> 00:02:37,420
and server side code
52
00:02:37,420 --> 00:02:39,670
that only runs there.
53
00:02:39,670 --> 00:02:42,700
I hope it's also clear why we use that.
54
00:02:42,700 --> 00:02:46,409
Simply so that we can prepare data for our component
55
00:02:46,409 --> 00:02:49,420
ahead of time or on the server
56
00:02:49,420 --> 00:02:53,840
so that we can serve a finished page to the client,
57
00:02:53,840 --> 00:02:57,700
that can offer a better user experience to our users
58
00:02:57,700 --> 00:02:59,410
since they get the finished page
59
00:02:59,410 --> 00:03:02,200
and all the content is there right from the start
60
00:03:02,200 --> 00:03:05,790
but it can also help us with search engines
61
00:03:05,790 --> 00:03:10,790
since search engine crawlers also see the finished page.
62
00:03:10,840 --> 00:03:13,660
And with that, there's only one thing left
63
00:03:13,660 --> 00:03:16,460
which I also want to take a look at in this module
64
00:03:16,460 --> 00:03:19,430
and that's client site data fetching,
65
00:03:19,430 --> 00:03:22,943
what that is, and when we still might need that.
5052
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese