Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:03,280
So let's say we have
2
00:00:03,280 --> 00:00:08,280
a dummy user profile js file here in the pages folder.
3
00:00:08,580 --> 00:00:13,200
So a user profile page for which I'll add a component here,
4
00:00:13,200 --> 00:00:16,680
the UserProfilePage component.
5
00:00:16,680 --> 00:00:20,640
And in here, we want to get some users specific data
6
00:00:20,640 --> 00:00:23,090
and show that on the screen.
7
00:00:23,090 --> 00:00:25,690
So of course we export that like this,
8
00:00:25,690 --> 00:00:29,900
but now that's a page, which we can't pre-render
9
00:00:29,900 --> 00:00:32,590
because we need to know for which user
10
00:00:32,590 --> 00:00:34,190
we are rendering this.
11
00:00:34,190 --> 00:00:38,680
Now we could expect a user ID as part of the URL.
12
00:00:38,680 --> 00:00:40,550
So we could make this kind of dynamic
13
00:00:40,550 --> 00:00:43,210
and expect to use the ID instead.
14
00:00:43,210 --> 00:00:47,070
But then everyone who enters this ID in the browser
15
00:00:47,070 --> 00:00:50,680
is able to see some data for that given user ID.
16
00:00:50,680 --> 00:00:52,830
So that's not what I want here.
17
00:00:52,830 --> 00:00:56,910
Instead, we wanna identify the user making the request,
18
00:00:56,910 --> 00:01:00,730
let's say with help of a cookie which we set before.
19
00:01:00,730 --> 00:01:02,640
Now at the moment we don't have that here.
20
00:01:02,640 --> 00:01:05,190
We didn't add any authentication,
21
00:01:05,190 --> 00:01:08,920
we're not placing any cookies on the user's machine
22
00:01:08,920 --> 00:01:12,150
and therefore, we don't really have to use case here,
23
00:01:12,150 --> 00:01:15,940
but it hopefully is a scenario that's easy to imagine.
24
00:01:15,940 --> 00:01:19,250
And the later in the course we'll dive into authentication
25
00:01:19,250 --> 00:01:22,640
and we'll then have this actual scenario.
26
00:01:22,640 --> 00:01:24,540
So therefore here, we wanna return
27
00:01:24,540 --> 00:01:26,500
some user specific data,
28
00:01:26,500 --> 00:01:30,450
let's say to user name, but again, we need to get access
29
00:01:30,450 --> 00:01:32,360
to the request object
30
00:01:32,360 --> 00:01:35,030
which carries the cookies and the headers
31
00:01:35,030 --> 00:01:39,000
to find out which users sent this request.
32
00:01:39,000 --> 00:01:42,433
That would be a typical use case for getServerSideProps.
33
00:01:43,550 --> 00:01:45,670
We can't pre-rendered as page
34
00:01:45,670 --> 00:01:49,170
because we don't know which users will have in advance
35
00:01:49,170 --> 00:01:52,300
and we don't get access to their cookies in advance.
36
00:01:53,318 --> 00:01:56,700
Therefore, we want to export an async function here,
37
00:01:56,700 --> 00:01:59,797
an async function called getServerSideProps.
38
00:02:02,570 --> 00:02:04,780
Now, we get a context object here
39
00:02:04,780 --> 00:02:07,350
at which we'll take a closer look in a second,
40
00:02:07,350 --> 00:02:10,259
and we also need to return an object here,
41
00:02:10,259 --> 00:02:12,430
and the object which be returned
42
00:02:12,430 --> 00:02:15,710
actually needs to have the same format
43
00:02:15,710 --> 00:02:18,450
as it does in getStaticProps.
44
00:02:18,450 --> 00:02:21,840
So that return object does not change.
45
00:02:21,840 --> 00:02:23,710
It should have a props key,
46
00:02:23,710 --> 00:02:26,070
it can have a not found key
47
00:02:26,070 --> 00:02:28,980
and it can have a redirect key.
48
00:02:28,980 --> 00:02:31,950
The only difference is the revalidate key.
49
00:02:31,950 --> 00:02:36,200
That is not required here and the debts can't be set here
50
00:02:36,200 --> 00:02:39,940
because getStaticProps per definition
51
00:02:39,940 --> 00:02:42,630
runs for every incoming request.
52
00:02:42,630 --> 00:02:45,091
So there's no need to revalidate
53
00:02:45,091 --> 00:02:47,030
after a certain amount of seconds
54
00:02:47,030 --> 00:02:49,893
because it will always run again.
55
00:02:50,940 --> 00:02:54,540
So therefore we return an object with props,
56
00:02:54,540 --> 00:02:55,830
which makes sense Since, I guess,
57
00:02:55,830 --> 00:02:58,577
since it's called getServerSideProps,
58
00:02:59,690 --> 00:03:00,523
and these props
59
00:03:00,523 --> 00:03:02,690
will then be made available to this function,
60
00:03:02,690 --> 00:03:06,250
which will still be called by Next.js.
61
00:03:06,250 --> 00:03:07,650
But as mentioned before,
62
00:03:07,650 --> 00:03:11,570
it will not be called in advance when we built the project,
63
00:03:11,570 --> 00:03:14,203
but really for every incoming request.
64
00:03:15,210 --> 00:03:18,500
So here we could then have a username prop
65
00:03:18,500 --> 00:03:21,770
which I afforded moment hard code to Max.
66
00:03:21,770 --> 00:03:25,460
And then here we output prop props.username
67
00:03:25,460 --> 00:03:26,973
in the component function.
68
00:03:28,400 --> 00:03:30,660
And if we do all of that
69
00:03:30,660 --> 00:03:34,940
and we then visit slash user profile page,
70
00:03:34,940 --> 00:03:37,200
so this page which we just added,
71
00:03:37,200 --> 00:03:39,830
we see Max here at the moment.
72
00:03:39,830 --> 00:03:41,810
So that works and that proofs
73
00:03:41,810 --> 00:03:43,900
that getsServerSideProps works
74
00:03:43,900 --> 00:03:47,370
because that's where the value Max is coming from.
75
00:03:47,370 --> 00:03:50,050
But the important thing now really is
76
00:03:50,050 --> 00:03:55,050
that this only executes on the server after deployment
77
00:03:55,480 --> 00:03:57,990
and also on our development server here,
78
00:03:57,990 --> 00:04:00,960
but it's not statically pre-generated.
79
00:04:00,960 --> 00:04:03,573
And that has a couple of important implications.
6203
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.