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