1 00:00:02,000 --> 00:00:03,000 Now getServiceSideProps 2 00:00:03,000 --> 00:00:05,000 can sometimes be useful. 3 00:00:05,000 --> 00:00:08,000 I also want to mention how you would use it 4 00:00:08,000 --> 00:00:10,000 with a dynamic page. 5 00:00:10,000 --> 00:00:13,000 Here before, when we used getStaticProps, 6 00:00:13,000 --> 00:00:16,000 we also needed getStaticPaths 7 00:00:16,000 --> 00:00:20,000 to let Next.js know which instances of this page 8 00:00:20,000 --> 00:00:23,000 should be pre-generated. 9 00:00:23,000 --> 00:00:27,000 Now when using getServiceSideProps, that's not the case. 10 00:00:27,000 --> 00:00:32,000 If I do have a [Uid].js file, Uid in square brackets, 11 00:00:33,000 --> 00:00:36,000 so that I have a dynamic page for a single user 12 00:00:36,000 --> 00:00:38,000 for different user IDs. 13 00:00:38,000 --> 00:00:43,000 If we use getServiceSideProps we don't need 14 00:00:43,000 --> 00:00:45,000 and we can't use getStaticPaths. 15 00:00:46,000 --> 00:00:49,000 So here, if I have the UserIdPage 16 00:00:50,000 --> 00:00:52,000 and I get some props here 17 00:00:52,000 --> 00:00:57,000 and here I then simply return h1 tag where I put props, 18 00:00:58,000 --> 00:01:01,000 id something like this, and we then export this. 19 00:01:02,000 --> 00:01:04,000 If we do all of that, 20 00:01:04,000 --> 00:01:09,000 and I then also have this async getServerSideProps function 21 00:01:10,000 --> 00:01:11,000 which we export. 22 00:01:12,000 --> 00:01:15,000 If we have this, then you will see 23 00:01:15,000 --> 00:01:17,000 that we don't need getStaticPaths at all. 24 00:01:17,000 --> 00:01:20,000 Here I just returned an object, 25 00:01:20,000 --> 00:01:23,000 and now I'm interested in the concrete param value 26 00:01:23,000 --> 00:01:24,000 which I'm getting here. 27 00:01:24,000 --> 00:01:27,000 So we can get access to that through context. 28 00:01:27,000 --> 00:01:31,000 From there we can still extract params as I mentioned, 29 00:01:31,000 --> 00:01:34,000 and from params we can still get our userId 30 00:01:34,000 --> 00:01:39,000 by accessing uid, since that's the identifier I picked 31 00:01:39,000 --> 00:01:41,000 between square brackets. 32 00:01:41,000 --> 00:01:43,000 And then in the props which we passed 33 00:01:43,000 --> 00:01:45,000 to the component function, 34 00:01:45,000 --> 00:01:49,000 we could have the id prop, since I'm accessing that here 35 00:01:49,000 --> 00:01:51,000 and set this equal to userid- 36 00:01:53,000 --> 00:01:58,000 and then let's say the userId we extracted from the URL, 37 00:01:59,000 --> 00:02:02,000 just to have some dummy code here that proves 38 00:02:02,000 --> 00:02:04,000 that this code actually did execute 39 00:02:04,000 --> 00:02:07,000 before this component function code ran. 40 00:02:07,000 --> 00:02:10,000 With that if you wanna test this, 41 00:02:10,000 --> 00:02:13,000 we first of all need to make sure we get rid of [pid].js 42 00:02:13,000 --> 00:02:18,000 because otherwise we have two dynamic segment pages 43 00:02:18,000 --> 00:02:21,000 on the same level in our pages folder, 44 00:02:21,000 --> 00:02:25,000 so Next.js wouldn't know if a value after slash 45 00:02:25,000 --> 00:02:28,000 nothing should be a product ID or a user ID, 46 00:02:28,000 --> 00:02:33,000 and therefore if I move to pitfall 47 00:02:33,000 --> 00:02:34,000 into the products folder here. 48 00:02:36,000 --> 00:02:39,000 And in index.js I update my links 49 00:02:39,000 --> 00:02:43,000 to go to /products/some ID, 50 00:02:43,000 --> 00:02:47,000 now we resolve the disc clash because now we know 51 00:02:47,000 --> 00:02:50,000 that if it's just slash something unrecognized, 52 00:02:50,000 --> 00:02:54,000 it will always target this user ID route. 53 00:02:54,000 --> 00:02:58,000 And now with that, if I bring back that development server, 54 00:02:58,000 --> 00:03:03,000 if we visit let's say /u1 for user one, 55 00:03:04,000 --> 00:03:08,000 we see userid-u1 here so it worked. 56 00:03:08,000 --> 00:03:13,000 And it did work without us adding getStaticPaths. 57 00:03:13,000 --> 00:03:18,000 Why? Because this runs on the server only anyways. 58 00:03:18,000 --> 00:03:22,000 So Next.js does not pre generate any pages at all, 59 00:03:22,000 --> 00:03:25,000 and therefore of course, it also doesn't need to know 60 00:03:25,000 --> 00:03:27,000 which pages to pre-generate 61 00:03:27,000 --> 00:03:30,000 because there is no pre-generation. 62 00:03:30,000 --> 00:03:33,000 So unlike in the other case with getStaticProps 63 00:03:34,000 --> 00:03:37,000 where we do pre-generate pages 64 00:03:37,000 --> 00:03:40,000 and where we therefore for do need to tell Next.js 65 00:03:40,000 --> 00:03:44,000 for which param values pages should be pre-generated, 66 00:03:44,000 --> 00:03:48,000 with getServiceSideProps that's simply not an issue 67 00:03:48,000 --> 00:03:51,000 because we run that server side code 68 00:03:51,000 --> 00:03:54,000 for every request anyways. 69 00:03:54,000 --> 00:03:55,000 So there is no pre-generation 70 00:03:55,000 --> 00:03:58,000 and therefore no need to define those dynamic paths 71 00:03:58,000 --> 00:04:00,000 in advance. 72 00:04:00,000 --> 00:04:02,000 I hope that makes sense.