1
00:00:00,000 --> 00:00:03,000
So how can we fix this problem

2
00:00:03,000 --> 00:00:06,000
of NextJS caching too aggressively?

3
00:00:08,000 --> 00:00:13,000
Well, we need to tell NextJS to throw away its cache

4
00:00:13,000 --> 00:00:17,000
or parts of its cache whenever we add a new meal.

5
00:00:18,000 --> 00:00:21,000
And of course, this is such a common requirement

6
00:00:21,000 --> 00:00:24,000
that there's a built-in method for that,

7
00:00:24,000 --> 00:00:28,000
a built-in function provided by NextJS,

8
00:00:28,000 --> 00:00:32,000
a function which I wanna execute in my server action

9
00:00:32,000 --> 00:00:36,000
right after saving a meal before I redirect.

10
00:00:37,000 --> 00:00:41,000
And that function is called revalidatePath.

11
00:00:43,000 --> 00:00:46,000
This function tells NextJS

12
00:00:46,000 --> 00:00:50,000
to revalidate the cache

13
00:00:50,000 --> 00:00:53,000
that belongs to a certain route path.

14
00:00:54,000 --> 00:00:57,000
So for example, if I know that I want

15
00:00:57,000 --> 00:00:58,000
to visit the meals page

16
00:00:58,000 --> 00:01:03,000
and that the meals page depends on data that changed now,

17
00:01:03,000 --> 00:01:08,000
I can tell NextJS to revalidate the /meals path.

18
00:01:09,000 --> 00:01:12,000
And with that, that path would be revalidated.

19
00:01:13,000 --> 00:01:15,000
Now what's important is that,

20
00:01:15,000 --> 00:01:19,000
by default, only that path will be revalidated,

21
00:01:19,000 --> 00:01:21,000
no nested paths.

22
00:01:22,000 --> 00:01:26,000
So if I had some nested path there in my meals folder,

23
00:01:26,000 --> 00:01:29,000
that also depends on all the meals data,

24
00:01:29,000 --> 00:01:32,000
I would have to revalidate that separately.

25
00:01:33,000 --> 00:01:36,000
Alternatively, you can pass a second argument

26
00:01:36,000 --> 00:01:40,000
to revalidate path and set this to layout.

27
00:01:41,000 --> 00:01:45,000
The default is page, which means that simply this one page

28
00:01:45,000 --> 00:01:48,000
for this one path will be revalidated.

29
00:01:48,000 --> 00:01:50,000
If you set it to layout,

30
00:01:50,000 --> 00:01:53,000
it's the layout that will be revalidated,

31
00:01:53,000 --> 00:01:56,000
which as you learned, also wraps nested pages,

32
00:01:56,000 --> 00:01:58,000
and therefore, with this,

33
00:01:58,000 --> 00:02:02,000
all nested pages would be revalidated as well.

34
00:02:03,000 --> 00:02:05,000
And revalidate simply means

35
00:02:05,000 --> 00:02:09,000
that NextJS throws away the cache that is associated

36
00:02:09,000 --> 00:02:11,000
with those pages.

37
00:02:11,000 --> 00:02:15,000
So, for example, the cached pages themselves.

38
00:02:16,000 --> 00:02:19,000
Now here, I don't care about any nested pages

39
00:02:19,000 --> 00:02:23,000
because the dynamic page here isn't pre-generated anyways

40
00:02:23,000 --> 00:02:24,000
in our current setup

41
00:02:24,000 --> 00:02:28,000
and the share page doesn't depend on the meals data.

42
00:02:28,000 --> 00:02:32,000
So I'm fine with just revalidating /meals.

43
00:02:32,000 --> 00:02:35,000
If you would want to revalidate all the pages

44
00:02:35,000 --> 00:02:38,000
of your entire website, you could, by the way, do that

45
00:02:38,000 --> 00:02:41,000
by targeting slash and then setting the mode to layout.

46
00:02:43,000 --> 00:02:46,000
But here, I'm fine with just revalidating the meals path.

47
00:02:48,000 --> 00:02:53,000
Well, and with that done, if we now run npm run build again

48
00:02:54,000 --> 00:02:56,000
to build all those pages again,

49
00:02:56,000 --> 00:02:59,000
they will still be pre-generated and cached,

50
00:02:59,000 --> 00:03:03,000
but now that cache should be revalidated

51
00:03:03,000 --> 00:03:07,000
and partially cleared once we added a new meal.

52
00:03:08,000 --> 00:03:10,000
So if I now run npm start again

53
00:03:10,000 --> 00:03:13,000
to start that development server,

54
00:03:13,000 --> 00:03:15,000
and I then add another new meal,

55
00:03:20,000 --> 00:03:23,000
like this, picking the same image as always,

56
00:03:25,000 --> 00:03:26,000
if I submit that,

57
00:03:28,000 --> 00:03:31,000
it takes a bit longer here, which is a good sign

58
00:03:31,000 --> 00:03:33,000
because it's taking longer

59
00:03:33,000 --> 00:03:36,000
because it loaded all those meals again.

60
00:03:36,000 --> 00:03:40,000
And here we are, now the image is missing,

61
00:03:40,000 --> 00:03:42,000
we'll take care of that in just a second.

62
00:03:42,000 --> 00:03:47,000
But the meal is there and that's of course a good sign.

63
00:03:47,000 --> 00:03:51,000
In addition, we got these Fetching meals logs back here,

64
00:03:51,000 --> 00:03:55,000
which also proves that this is now working as intended.