1 00:00:02,000 --> 00:00:05,000 So what's up with this fallback key here? 2 00:00:05,000 --> 00:00:08,000 The fallback key can help you if you have 3 00:00:08,000 --> 00:00:13,000 a lot of pages that would need to be pre-generated. 4 00:00:13,000 --> 00:00:16,000 Here I only have three dummy products, 5 00:00:16,000 --> 00:00:18,000 and I'm currently not even fetching 6 00:00:18,000 --> 00:00:20,000 that data from that file. 7 00:00:20,000 --> 00:00:21,000 We'll do that later, 8 00:00:21,000 --> 00:00:24,000 but we only have three products. 9 00:00:24,000 --> 00:00:27,000 Now imagine that you have like an Amazon-like website 10 00:00:27,000 --> 00:00:30,000 with millions of products. 11 00:00:30,000 --> 00:00:33,000 Of course, pre-generating all those products 12 00:00:33,000 --> 00:00:35,000 like this might not be optimal, 13 00:00:35,000 --> 00:00:39,000 not just because I hard coded this here. 14 00:00:39,000 --> 00:00:41,000 We could fetch this dynamically from this file, 15 00:00:41,000 --> 00:00:43,000 so that's not the problem, 16 00:00:43,000 --> 00:00:46,000 but simply because pre-generating all 17 00:00:46,000 --> 00:00:50,000 those millions of pages might take super long, 18 00:00:50,000 --> 00:00:52,000 and there might be products, 19 00:00:52,000 --> 00:00:57,000 let's say you're not Amazon, which are rarely visited. 20 00:00:57,000 --> 00:01:00,000 If you're building a blog and you have hundreds of articles, 21 00:01:00,000 --> 00:01:04,000 you might have some articles which are basically never read. 22 00:01:04,000 --> 00:01:08,000 So then, pre-generating such rarely visited pages 23 00:01:08,000 --> 00:01:11,000 is a waste of time and resources. 24 00:01:12,000 --> 00:01:15,000 That's where fallback becomes important. 25 00:01:15,000 --> 00:01:18,000 Here we can set this to true, 26 00:01:18,000 --> 00:01:20,000 and then for example, we could decide 27 00:01:20,000 --> 00:01:23,000 to only pre-render some pages. 28 00:01:23,000 --> 00:01:26,000 So let's say we wanna pre-render the page 29 00:01:26,000 --> 00:01:27,000 with product ID one. 30 00:01:27,000 --> 00:01:31,000 So with P1, because that's a highly frequented page, 31 00:01:31,000 --> 00:01:33,000 it's visited very often, 32 00:01:33,000 --> 00:01:37,000 but we don't wanna pre-generate the other two pages. 33 00:01:37,000 --> 00:01:41,000 With fallback set to true, that's possible 34 00:01:41,000 --> 00:01:44,000 because now if I save this, you will notice 35 00:01:44,000 --> 00:01:46,000 that if I go back to the starting page, 36 00:01:46,000 --> 00:01:48,000 if I click on product three, 37 00:01:48,000 --> 00:01:51,000 we still load this page successfully. 38 00:01:51,000 --> 00:01:56,000 Even though it was not added here to paths. 39 00:01:56,000 --> 00:01:59,000 And the reason for that is that with fallback true, 40 00:01:59,000 --> 00:02:04,000 we tell NextJS that even pages which are not listed here. 41 00:02:05,000 --> 00:02:09,000 So even parameter values for the PID parameter, 42 00:02:09,000 --> 00:02:12,000 which are not listed here, can be valid. 43 00:02:12,000 --> 00:02:16,000 Values that should be loaded when they are visited. 44 00:02:16,000 --> 00:02:18,000 But they're not pre-generated, 45 00:02:18,000 --> 00:02:21,000 instead they're generated just in time 46 00:02:21,000 --> 00:02:24,000 when a request reaches the server. 47 00:02:24,000 --> 00:02:28,000 And that allows us to pre-generate highly visited pages, 48 00:02:28,000 --> 00:02:33,000 and postpone the generation to less frequented pages 49 00:02:33,000 --> 00:02:36,000 to the server, so that they are only pre-generated 50 00:02:36,000 --> 00:02:38,000 when they're needed. 51 00:02:38,000 --> 00:02:41,000 So that can be a very useful behavior, 52 00:02:41,000 --> 00:02:43,000 but you'll notice a problem here. 53 00:02:43,000 --> 00:02:45,000 If I don't click on a link here, 54 00:02:45,000 --> 00:02:49,000 but instead I directly enter this in URL, 55 00:02:49,000 --> 00:02:53,000 and therefore send a new request to this page, 56 00:02:53,000 --> 00:02:55,000 we actually get an error. 57 00:02:55,000 --> 00:02:58,000 Cannot read property title of undefined. 58 00:02:58,000 --> 00:03:01,000 The reason for that, is that this pre-generation, 59 00:03:01,000 --> 00:03:04,000 this dynamic pre-generation, when it's needed, 60 00:03:04,000 --> 00:03:06,000 does not finish instantly. 61 00:03:07,000 --> 00:03:10,000 So therefore instead when using this fallback feature, 62 00:03:10,000 --> 00:03:12,000 you should be prepared to return 63 00:03:12,000 --> 00:03:15,000 a fallback state in your component. 64 00:03:15,000 --> 00:03:19,000 For example, by simply checking if loaded product 65 00:03:19,000 --> 00:03:23,000 is maybe not a thing with if not, 66 00:03:23,000 --> 00:03:26,000 and then returning something like loading here. 67 00:03:27,000 --> 00:03:29,000 And if you do this, and you add 68 00:03:29,000 --> 00:03:31,000 this to your component function, 69 00:03:31,000 --> 00:03:33,000 and you save everything, 70 00:03:33,000 --> 00:03:35,000 if you now reload this page, 71 00:03:35,000 --> 00:03:36,000 you'll see loading briefly 72 00:03:36,000 --> 00:03:40,000 and then NextJS will automatically give you that data 73 00:03:40,000 --> 00:03:42,000 once it's done loading. 74 00:03:42,000 --> 00:03:45,000 So this is a little bit like the standard react solution 75 00:03:45,000 --> 00:03:49,000 with user fact and set state, except for that 76 00:03:49,000 --> 00:03:50,000 you don't need to do any of that. 77 00:03:50,000 --> 00:03:53,000 You just get something through props, 78 00:03:53,000 --> 00:03:55,000 you check if it's there yet, 79 00:03:55,000 --> 00:03:58,000 and if it's not you show that fallback content, 80 00:03:58,000 --> 00:04:02,000 and once it's there NextJS will automatically update 81 00:04:02,000 --> 00:04:04,000 this component page for you, 82 00:04:04,000 --> 00:04:06,000 and then return the regular content here. 83 00:04:08,000 --> 00:04:12,000 So with that you see that now I can also reload this page 84 00:04:12,000 --> 00:04:15,000 and we still load this successfully eventually, 85 00:04:15,000 --> 00:04:18,000 because of that fallback feature. 86 00:04:18,000 --> 00:04:20,000 An alternative would be 87 00:04:20,000 --> 00:04:23,000 that you don't set fallback to true or false, 88 00:04:23,000 --> 00:04:27,000 but to a string with a value of blocking. 89 00:04:27,000 --> 00:04:30,000 If you do that, then you don't even need 90 00:04:30,000 --> 00:04:33,000 that fallback check here in the component, 91 00:04:33,000 --> 00:04:35,000 and hence we can comment this out, 92 00:04:35,000 --> 00:04:37,000 because then NextJS will actually wait 93 00:04:37,000 --> 00:04:42,000 for this page to fully be pre-generated on the server 94 00:04:42,000 --> 00:04:44,000 before it serves that. 95 00:04:44,000 --> 00:04:46,000 So then it will take a little bit longer 96 00:04:46,000 --> 00:04:49,000 for the visitor of the page to get a response, 97 00:04:49,000 --> 00:04:53,000 but the response which is sent back will be finished. 98 00:04:53,000 --> 00:04:55,000 So for now reload that still works. 99 00:04:55,000 --> 00:04:57,000 It just takes a bit longer. 100 00:04:57,000 --> 00:05:00,000 And again it's up to you which approach you need 101 00:05:00,000 --> 00:05:02,000 for your application. 102 00:05:02,000 --> 00:05:05,000 Sometimes it's important to show something quickly, 103 00:05:05,000 --> 00:05:08,000 especially if you know that generating the page 104 00:05:08,000 --> 00:05:10,000 and fetching the data might take a bit longer. 105 00:05:10,000 --> 00:05:13,000 Sometimes it's worth to wait for it. 106 00:05:13,000 --> 00:05:14,000 And you don't want to show 107 00:05:14,000 --> 00:05:17,000 an incomplete page to your visitors 108 00:05:17,000 --> 00:05:20,000 in such a case, blocking can be better. 109 00:05:20,000 --> 00:05:25,000 Here you saw both and as you see both is super easy to use.