1 00:00:00,000 --> 00:00:01,000 Now with that, 2 00:00:01,000 --> 00:00:04,000 we're almost done with this application. 3 00:00:04,000 --> 00:00:07,000 As you see, we can now update the data, 4 00:00:07,000 --> 00:00:08,000 we can add new posts. 5 00:00:08,000 --> 00:00:12,000 This all works, but here's something that won't work. 6 00:00:12,000 --> 00:00:16,000 Let's say we're done and we wanna deploy this application. 7 00:00:17,000 --> 00:00:19,000 What we would do then 8 00:00:19,000 --> 00:00:23,000 is that we would build the application for deployment. 9 00:00:23,000 --> 00:00:27,000 We would trigger a process that's provided by NextJS 10 00:00:27,000 --> 00:00:29,000 that prepares the application for deployment 11 00:00:29,000 --> 00:00:32,000 and that performs the various optimizations 12 00:00:32,000 --> 00:00:35,000 and preparation steps. 13 00:00:35,000 --> 00:00:38,000 To start that process you can simply run a script 14 00:00:38,000 --> 00:00:42,000 that's part of the NextJS project by running npm run build. 15 00:00:42,000 --> 00:00:45,000 That's what you would typically always do 16 00:00:45,000 --> 00:00:47,000 before deploying the application. 17 00:00:47,000 --> 00:00:52,000 Now this will then go through that build process, 18 00:00:52,000 --> 00:00:57,000 and once it's done, it will give you a folder, 19 00:00:57,000 --> 00:01:00,000 next folder, which you can deploy. 20 00:01:00,000 --> 00:01:02,000 For now I don't wanna deploy it. 21 00:01:02,000 --> 00:01:03,000 Instead, what I wanna do here 22 00:01:03,000 --> 00:01:08,000 is I wanna preview that deployable application. 23 00:01:08,000 --> 00:01:10,000 So now I wanna run this application, 24 00:01:10,000 --> 00:01:13,000 not in development mode, but in production mode, 25 00:01:13,000 --> 00:01:17,000 still on my computer here to test it, 26 00:01:17,000 --> 00:01:21,000 but without all those extra development mode features. 27 00:01:21,000 --> 00:01:23,000 And we can do that 28 00:01:23,000 --> 00:01:27,000 after running npm run build by running npm start. 29 00:01:27,000 --> 00:01:30,000 That will start a production Server 30 00:01:30,000 --> 00:01:33,000 of this NextJS application. 31 00:01:33,000 --> 00:01:37,000 Now this Server will still be available on local host 3000, 32 00:01:37,000 --> 00:01:40,000 and therefore I can simply reload here, 33 00:01:40,000 --> 00:01:43,000 but it will now be the production version. 34 00:01:43,000 --> 00:01:46,000 And one thing you can immediately see here 35 00:01:46,000 --> 00:01:48,000 is that as I switch those pages, 36 00:01:48,000 --> 00:01:51,000 that loading text doesn't appear here. 37 00:01:51,000 --> 00:01:53,000 Instead the data is there instantly. 38 00:01:53,000 --> 00:01:55,000 Great. It's faster. 39 00:01:55,000 --> 00:01:58,000 Yeah, but this comes with a price 40 00:01:58,000 --> 00:02:01,000 and you can see that price if I create a new post. 41 00:02:02,000 --> 00:02:07,000 Let's say I wanna share a post about a great vacation I had, 42 00:02:07,000 --> 00:02:11,000 I prepare the image for that, like this, 43 00:02:11,000 --> 00:02:13,000 and I click create post. 44 00:02:13,000 --> 00:02:15,000 That's all looking good. 45 00:02:15,000 --> 00:02:18,000 I'm redirected to the feed page and where's my post? 46 00:02:18,000 --> 00:02:19,000 It's not there. 47 00:02:19,000 --> 00:02:21,000 And it's also not there if I reload. 48 00:02:21,000 --> 00:02:24,000 It's also not on the starting page. 49 00:02:24,000 --> 00:02:27,000 And that is something we did not encounter 50 00:02:27,000 --> 00:02:28,000 during development, 51 00:02:28,000 --> 00:02:31,000 but we do encounter now in production mode. 52 00:02:31,000 --> 00:02:33,000 Because I did mention before 53 00:02:33,000 --> 00:02:37,000 that NextJS performs some pretty aggressive caching. 54 00:02:37,000 --> 00:02:41,000 And again, I'll get back to that in the next section again. 55 00:02:41,000 --> 00:02:43,000 But what NextJS does in the end 56 00:02:43,000 --> 00:02:46,000 when preparing this page for production 57 00:02:46,000 --> 00:02:51,000 is it pre renders all your pages during that build process 58 00:02:52,000 --> 00:02:55,000 and caches those pre-rendered pages. 59 00:02:55,000 --> 00:02:59,000 And it's then never re-renders them thereafter then, 60 00:02:59,000 --> 00:03:02,000 unless there are dynamic pages with dynamic segments, 61 00:03:02,000 --> 00:03:04,000 which we don't have here though. 62 00:03:05,000 --> 00:03:09,000 So these pages were pre-rendered and they stay that way. 63 00:03:09,000 --> 00:03:12,000 So any changes to the data aren't picked up. 64 00:03:12,000 --> 00:03:14,000 And that's of course not great. 65 00:03:15,000 --> 00:03:16,000 Now what can we do about that? 66 00:03:16,000 --> 00:03:19,000 Well, we have to tell NextJS 67 00:03:19,000 --> 00:03:22,000 that it should re-render some of these pages 68 00:03:22,000 --> 00:03:25,000 whenever we change the data. 69 00:03:25,000 --> 00:03:26,000 And we can do that 70 00:03:26,000 --> 00:03:29,000 with help of the revalidatePath function here. 71 00:03:30,000 --> 00:03:34,000 We are already using that for changing the likes status. 72 00:03:34,000 --> 00:03:38,000 And for that reason, for example, liking does work 73 00:03:38,000 --> 00:03:40,000 and those changes are picked up. 74 00:03:40,000 --> 00:03:43,000 And you see that now after I liked this, 75 00:03:43,000 --> 00:03:45,000 suddenly my new post also appeared. 76 00:03:46,000 --> 00:03:50,000 because when I liked this, I called revalidatePath 77 00:03:50,000 --> 00:03:53,000 and that revalidates all those pages 78 00:03:53,000 --> 00:03:56,000 and tells NextJS to throw them out of the cache 79 00:03:56,000 --> 00:03:58,000 and recreate them. 80 00:03:58,000 --> 00:04:01,000 But of course, the idea is not that I have to like 81 00:04:01,000 --> 00:04:05,000 or unlike a post in order to get any new posts. 82 00:04:05,000 --> 00:04:07,000 Instead, what we should do 83 00:04:07,000 --> 00:04:10,000 is we should also revalidate the data 84 00:04:10,000 --> 00:04:15,000 here inside of our createPost Server Action. 85 00:04:16,000 --> 00:04:20,000 Before I redirect, I wanna call revalidatePath, 86 00:04:22,000 --> 00:04:26,000 and I wanna make sure that all my pages are revalidated 87 00:04:26,000 --> 00:04:28,000 and get their latest data. 88 00:04:29,000 --> 00:04:31,000 Now, revalidating all pages 89 00:04:31,000 --> 00:04:33,000 is actually not necessary here though, 90 00:04:33,000 --> 00:04:36,000 because the new post page, for example, 91 00:04:36,000 --> 00:04:40,000 does not need to be revalidated and recreated. 92 00:04:40,000 --> 00:04:43,000 But we'll dive deeper into caching 93 00:04:43,000 --> 00:04:46,000 and how you can control in greater detail 94 00:04:46,000 --> 00:04:50,000 which parts of the cached data will be revalidated 95 00:04:50,000 --> 00:04:51,000 in the next section. 96 00:04:51,000 --> 00:04:53,000 For now, I'll just do it like this. 97 00:04:53,000 --> 00:04:56,000 And therefore with that change made, 98 00:04:56,000 --> 00:04:58,000 if we stop that production server 99 00:04:58,000 --> 00:05:00,000 and we rebuild the project 100 00:05:00,000 --> 00:05:02,000 so that the latest code is picked up, 101 00:05:06,000 --> 00:05:10,000 and we then thereafter start that production server again. 102 00:05:11,000 --> 00:05:15,000 If I now reload this and create another new post 103 00:05:16,000 --> 00:05:21,000 and I share my experience with the delicious paella I had, 104 00:05:25,000 --> 00:05:27,000 you'll see that now I'm redirected 105 00:05:27,000 --> 00:05:30,000 after this was uploaded and created, 106 00:05:30,000 --> 00:05:33,000 and I now see that data right from the start. 107 00:05:33,000 --> 00:05:35,000 And I don't have to like or unlike something 108 00:05:35,000 --> 00:05:36,000 for it to appear 109 00:05:36,000 --> 00:05:39,000 because now we are revalidating our pages 110 00:05:39,000 --> 00:05:44,000 and our paths there whenever we create a new post. 111 00:05:44,000 --> 00:05:46,000 By the way, on the starting page I only see two, 112 00:05:46,000 --> 00:05:48,000 because there I have some code 113 00:05:48,000 --> 00:05:51,000 to only fetch the latest two posts. 114 00:05:51,000 --> 00:05:52,000 So that's not a bug, 115 00:05:52,000 --> 00:05:54,000 but instead working the way it should work. 116 00:05:55,000 --> 00:05:58,000 And with that, we now finished this application 117 00:05:58,000 --> 00:06:02,000 and you learned a lot about data mutations in NextJS apps 118 00:06:02,000 --> 00:06:06,000 and how to perform them with Server Actions 119 00:06:06,000 --> 00:06:09,000 and with a couple of utility hooks and extra features 120 00:06:09,000 --> 00:06:11,000 you also might need quite a lot.