1 00:00:02,000 --> 00:00:04,000 The get Static props function 2 00:00:04,000 --> 00:00:07,000 can be added to any page file 3 00:00:07,000 --> 00:00:09,000 and only there as I mentioned, 4 00:00:09,000 --> 00:00:10,000 and you need to export it. 5 00:00:10,000 --> 00:00:12,000 And when you do so, 6 00:00:12,000 --> 00:00:16,000 then next JS will also call this get static props 7 00:00:16,000 --> 00:00:21,000 function on your behalf when it pre generate a page. 8 00:00:21,000 --> 00:00:25,000 And the disfunction also signals to next JS 9 00:00:25,000 --> 00:00:28,000 that this is a page that should be pre generated. 10 00:00:28,000 --> 00:00:31,000 Now I just said that that next JS would pre render 11 00:00:31,000 --> 00:00:34,000 any page by default and that's true, 12 00:00:34,000 --> 00:00:37,000 but we'll later learn about a way of telling next JS 13 00:00:37,000 --> 00:00:39,000 to not pre render a page 14 00:00:39,000 --> 00:00:42,000 and the offer it's important to understand that 15 00:00:42,000 --> 00:00:46,000 that get static props will not tell next JS 16 00:00:46,000 --> 00:00:47,000 to not pre render, 17 00:00:47,000 --> 00:00:51,000 but instead it of kind of a confirms to next to JS that 18 00:00:51,000 --> 00:00:55,000 this page still should be pre-generated. 19 00:00:55,000 --> 00:00:58,000 But in addition to just running through the component 20 00:00:58,000 --> 00:01:00,000 and returning the JS x code, 21 00:01:00,000 --> 00:01:03,000 next JS will then also call this, 22 00:01:03,000 --> 00:01:05,000 get static prompts function. 23 00:01:05,000 --> 00:01:09,000 If it finds one in your component file. 24 00:01:09,000 --> 00:01:12,000 So therefor here let's say we want to load this product 25 00:01:12,000 --> 00:01:17,000 data dynamically but not in the way we would do it 26 00:01:17,000 --> 00:01:19,000 in a standard react app with user fact 27 00:01:19,000 --> 00:01:21,000 what showed you before. 28 00:01:21,000 --> 00:01:24,000 And therefor attached you find another file 29 00:01:24,000 --> 00:01:28,000 the dummy backend Jason file with is just example, 30 00:01:28,000 --> 00:01:29,000 dummy file are used. 31 00:01:29,000 --> 00:01:33,000 In the react example a second ago and you should add 32 00:01:33,000 --> 00:01:37,000 that in your main project folder not in public, 33 00:01:37,000 --> 00:01:41,000 not in pages just in your folder like this. 34 00:01:41,000 --> 00:01:42,000 or actually 35 00:01:42,000 --> 00:01:46,000 maybe at a data folder oops a folder not a file 36 00:01:46,000 --> 00:01:50,000 add a data folder and move that file into there 37 00:01:50,000 --> 00:01:52,000 so that you have a data folder. 38 00:01:53,000 --> 00:01:56,000 And in that data folder you have to dummy back and Jason 39 00:01:56,000 --> 00:01:58,000 File. 40 00:01:58,000 --> 00:02:01,000 And now We want to load data from that file 41 00:02:01,000 --> 00:02:03,000 for this index JS file. 42 00:02:03,000 --> 00:02:07,000 But we don't want to load it through an HTDP request. 43 00:02:07,000 --> 00:02:10,000 That's only sent from the client site after the page 44 00:02:10,000 --> 00:02:11,000 was loaded. 45 00:02:11,000 --> 00:02:15,000 Instead we wanna prefetch the data before 46 00:02:15,000 --> 00:02:17,000 we create this component. 47 00:02:17,000 --> 00:02:22,000 And before this component page gets pre rendered by next JS. 48 00:02:22,000 --> 00:02:26,000 And that's exactly why we then add this function 49 00:02:26,000 --> 00:02:31,000 which we export the async function called get static props. 50 00:02:31,000 --> 00:02:34,000 And again it needs to be called exactly like this. 51 00:02:35,000 --> 00:02:39,000 Now in this function you then always needs to 52 00:02:39,000 --> 00:02:41,000 return an object. 53 00:02:42,000 --> 00:02:45,000 An object that has a props key because 54 00:02:45,000 --> 00:02:47,000 the function is named gets static props. 55 00:02:47,000 --> 00:02:50,000 And actually what this function does is it 56 00:02:50,000 --> 00:02:54,000 prepares the props for your component. 57 00:02:54,000 --> 00:02:57,000 So this props object It prepares that, 58 00:02:57,000 --> 00:03:01,000 because next JS if you have i get static props 59 00:03:01,000 --> 00:03:05,000 function in your file we'll first execute this function. 60 00:03:05,000 --> 00:03:09,000 And then in a second step execute the component function. 61 00:03:09,000 --> 00:03:12,000 Now in a second step because that first step 62 00:03:12,000 --> 00:03:15,000 prepares the props for this component function, 63 00:03:15,000 --> 00:03:18,000 and therefor in this get static props function. 64 00:03:18,000 --> 00:03:20,000 You can run any code you want. 65 00:03:20,000 --> 00:03:22,000 Again code that will never 66 00:03:22,000 --> 00:03:25,000 be visible on the client site that fetches data, 67 00:03:25,000 --> 00:03:30,000 and exposes data through props to this homepage component. 68 00:03:31,000 --> 00:03:34,000 So here it could set props equal to an object so 69 00:03:34,000 --> 00:03:38,000 that the props I get here are still an object, 70 00:03:38,000 --> 00:03:40,000 where i have my products. 71 00:03:40,000 --> 00:03:41,000 And that could be an array where i 72 00:03:41,000 --> 00:03:44,000 for example have one object 73 00:03:44,000 --> 00:03:49,000 in that array with an idea of P one and a title 74 00:03:49,000 --> 00:03:54,000 P of product one something like this. 75 00:03:54,000 --> 00:03:57,000 So now et study props returns an object with a props 76 00:03:57,000 --> 00:03:59,000 key that's always required. 77 00:03:59,000 --> 00:04:03,000 You always must return an object with a props key 78 00:04:03,000 --> 00:04:05,000 and then the data and the props keys up to you 79 00:04:05,000 --> 00:04:07,000 but it should be an object. 80 00:04:07,000 --> 00:04:09,000 And here it's an object with a product key 81 00:04:09,000 --> 00:04:11,000 Which holds an array. 82 00:04:11,000 --> 00:04:13,000 An array of product objects. 83 00:04:14,000 --> 00:04:18,000 And now We'll receive that here on props on this homepage 84 00:04:18,000 --> 00:04:22,000 because next JS first calls this get static props function, 85 00:04:22,000 --> 00:04:24,000 and then executes this component function. 86 00:04:25,000 --> 00:04:29,000 And it does both things in advance. 87 00:04:29,000 --> 00:04:32,000 So non of that code here runs on the client side, 88 00:04:32,000 --> 00:04:36,000 instead that all happens during built time 89 00:04:36,000 --> 00:04:39,000 or in development as part of this development server, 90 00:04:39,000 --> 00:04:40,000 which we're using. 91 00:04:41,000 --> 00:04:43,000 So here on their homepage component. 92 00:04:43,000 --> 00:04:48,000 We can then expect that we do get a product key 93 00:04:48,000 --> 00:04:50,000 On our props. 94 00:04:50,000 --> 00:04:54,000 So I can use object de-structuring to pull products 95 00:04:54,000 --> 00:04:55,000 out of props. 96 00:04:55,000 --> 00:04:58,000 And I use Products here because that's the key I 97 00:04:58,000 --> 00:05:00,000 Used to down there. 98 00:05:00,000 --> 00:05:03,000 And then we can render this list dynamically. 99 00:05:03,000 --> 00:05:06,000 By accessing products and mapping that, 100 00:05:06,000 --> 00:05:10,000 such that every product is mapped into a list item, 101 00:05:10,000 --> 00:05:13,000 Where the key is the product ID. 102 00:05:13,000 --> 00:05:16,000 So this ID we got down there 103 00:05:16,000 --> 00:05:19,000 and as a value between the opening and closing lists 104 00:05:19,000 --> 00:05:22,000 item tags i output the title like this. 105 00:05:24,000 --> 00:05:25,000 And with this In place 106 00:05:25,000 --> 00:05:29,000 if we now visit our next JS application , 107 00:05:29,000 --> 00:05:31,000 we see product one here. 108 00:05:32,000 --> 00:05:36,000 Now of course we're not fetching that data from any file, 109 00:05:36,000 --> 00:05:38,000 i have it hard coded in there 110 00:05:38,000 --> 00:05:42,000 but we already implemented get static props with that. 111 00:05:42,000 --> 00:05:44,000 And if we now again, 112 00:05:44,000 --> 00:05:47,000 view the page source off this page we see 113 00:05:47,000 --> 00:05:51,000 that this data this product one data is part 114 00:05:51,000 --> 00:05:54,000 of the page that was sent to the client. 115 00:05:54,000 --> 00:05:58,000 So fetching that product data did not happen on the client, 116 00:05:58,000 --> 00:06:00,000 It happened on the server. 117 00:06:00,000 --> 00:06:04,000 And if we would dive into the sources tab of the dev tools 118 00:06:04,000 --> 00:06:07,000 and look through the JavaScript code files, 119 00:06:07,000 --> 00:06:11,000 you wouldn't find that code anywhere in those files. 120 00:06:11,000 --> 00:06:12,000 because it's not 121 00:06:12,000 --> 00:06:15,000 part of the code that's shipped to the client side. 122 00:06:15,000 --> 00:06:17,000 And that means that the code 123 00:06:17,000 --> 00:06:21,000 in get static props can do server side things 124 00:06:21,000 --> 00:06:24,000 because it's not executed on the client side, 125 00:06:24,000 --> 00:06:27,000 So you can use credentials which your users shouldn't see 126 00:06:27,000 --> 00:06:30,000 and you can also run code that wouldn't work 127 00:06:30,000 --> 00:06:31,000 in the browser. 128 00:06:31,000 --> 00:06:34,000 Code that accesses the file system for example, 129 00:06:34,000 --> 00:06:37,000 and that's exactly what we're going to do next.