All language subtitles for 020 Using _getServerSideProps_ for Server-side Rendering_Downloadly.ir_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.