1
00:00:00,000 --> 00:00:04,000
Now, one way of improving the user experience

2
00:00:04,000 --> 00:00:07,000
here would be to go to the Server Action

3
00:00:07,000 --> 00:00:10,000
and await these database updates,

4
00:00:10,000 --> 00:00:13,000
to which I again added some delay

5
00:00:13,000 --> 00:00:16,000
to simulate a slower connection.

6
00:00:18,000 --> 00:00:23,000
And then thereafter, we should call the revalidatePath

7
00:00:23,000 --> 00:00:28,000
function, which must be imported from next/cache.

8
00:00:31,000 --> 00:00:33,000
Now, what's this function about?

9
00:00:34,000 --> 00:00:36,000
Well, by default,

10
00:00:36,000 --> 00:00:40,000
NextJS caches data pretty aggressively.

11
00:00:40,000 --> 00:00:44,000
And we'll take a closer look at how NextJS caches data

12
00:00:44,000 --> 00:00:48,000
and what that means for you in the next section.

13
00:00:48,000 --> 00:00:49,000
But what you should know here is

14
00:00:49,000 --> 00:00:53,000
that NextJS does indeed cache page data

15
00:00:53,000 --> 00:00:55,000
and therefore by default,

16
00:00:55,000 --> 00:00:59,000
it will not pick up changes to data

17
00:00:59,000 --> 00:01:01,000
that's reflected on the page.

18
00:01:01,000 --> 00:01:04,000
So of course, those changes are stored in the database,

19
00:01:04,000 --> 00:01:06,000
but the page doesn't update

20
00:01:06,000 --> 00:01:09,000
just because some database data changed.

21
00:01:09,000 --> 00:01:13,000
Instead, NextJS by default will show you

22
00:01:13,000 --> 00:01:18,000
that cached page, which is based on old data potentially,

23
00:01:18,000 --> 00:01:20,000
and that's why this change isn't picked up.

24
00:01:21,000 --> 00:01:25,000
Now, revalidatePath then is an important function

25
00:01:25,000 --> 00:01:29,000
which you should call whenever you are changing some data

26
00:01:29,000 --> 00:01:32,000
that is shown on some page.

27
00:01:33,000 --> 00:01:36,000
And indeed later we will also need to call it

28
00:01:36,000 --> 00:01:38,000
after adding a new post.

29
00:01:38,000 --> 00:01:40,000
But I'll get back to this later.

30
00:01:41,000 --> 00:01:44,000
So for now, we should call it here to tell NextJS

31
00:01:44,000 --> 00:01:47,000
that some data of some page changed,

32
00:01:47,000 --> 00:01:52,000
and we need to tell NextJS which page's data changed.

33
00:01:52,000 --> 00:01:54,000
Now attached you find a link

34
00:01:54,000 --> 00:01:58,000
to the official revalidatePath documentation

35
00:01:58,000 --> 00:02:00,000
because it turns out

36
00:02:00,000 --> 00:02:03,000
that there are quite a few different ways

37
00:02:03,000 --> 00:02:06,000
of configuring this function or of calling this function

38
00:02:06,000 --> 00:02:10,000
and of defining the path of the page

39
00:02:10,000 --> 00:02:13,000
or pages that should be revalidated.

40
00:02:13,000 --> 00:02:16,000
So that should be removed from the cache

41
00:02:16,000 --> 00:02:18,000
so that an updated version is shown,

42
00:02:18,000 --> 00:02:22,000
because that's the main task of this function.

43
00:02:22,000 --> 00:02:24,000
It tells NextJS that some page

44
00:02:24,000 --> 00:02:28,000
or pages need to be revalidated,

45
00:02:28,000 --> 00:02:31,000
that it should not continue showing the cached versions,

46
00:02:31,000 --> 00:02:35,000
but instead create updated versions.

47
00:02:35,000 --> 00:02:38,000
And for that, you can, for example, define the path

48
00:02:38,000 --> 00:02:42,000
to one of your pages, for example, to the feed route.

49
00:02:44,000 --> 00:02:46,000
With that, we would make sure that

50
00:02:46,000 --> 00:02:48,000
whenever the user visits that feed route,

51
00:02:48,000 --> 00:02:51,000
an updated version is served.

52
00:02:51,000 --> 00:02:54,000
And indeed, if that's called whilst the user

53
00:02:54,000 --> 00:02:58,000
is on the feed route, NextJS will update the page

54
00:02:58,000 --> 00:03:00,000
behind the scenes and show an updated version

55
00:03:00,000 --> 00:03:02,000
of the page automatically.

56
00:03:03,000 --> 00:03:06,000
And therefore, by just adding this code here

57
00:03:06,000 --> 00:03:10,000
to togglePostLikeStatus, if we go back and reload

58
00:03:10,000 --> 00:03:14,000
and I now click here, you see initially nothing changes,

59
00:03:14,000 --> 00:03:19,000
but after a short while, this does change magically,

60
00:03:19,000 --> 00:03:23,000
and I did not reload the page or anything like that.

61
00:03:23,000 --> 00:03:25,000
Instead, NextJS found out

62
00:03:25,000 --> 00:03:29,000
that this feed page on which I was here was updated,

63
00:03:29,000 --> 00:03:34,000
or that I told it that it should revalidate that page.

64
00:03:34,000 --> 00:03:36,000
And since I was on that page,

65
00:03:36,000 --> 00:03:38,000
it automatically updated it behind the scenes.

66
00:03:39,000 --> 00:03:42,000
Now here you actually also might wanna make sure

67
00:03:42,000 --> 00:03:47,000
that NextJS is not just revalidating the feed route,

68
00:03:47,000 --> 00:03:50,000
but actually maybe all pages of the application,

69
00:03:50,000 --> 00:03:54,000
which you can do by using just a slash here.

70
00:03:54,000 --> 00:03:58,000
And then passing a second argument where you set a string

71
00:03:58,000 --> 00:04:01,000
of layout, that essentially means that all the pages

72
00:04:01,000 --> 00:04:05,000
that are wrapped by the root layout should be revalidated,

73
00:04:05,000 --> 00:04:09,000
which in this case are all the pages of this application.

74
00:04:10,000 --> 00:04:13,000
And again, you can learn about all the details

75
00:04:13,000 --> 00:04:16,000
of configuring different paths, including paths

76
00:04:16,000 --> 00:04:20,000
to dynamic segments here in that official documentation.

77
00:04:20,000 --> 00:04:23,000
But that's one way of revalidating that will make sure

78
00:04:23,000 --> 00:04:26,000
that all pages pick up the latest data.

79
00:04:27,000 --> 00:04:29,000
So that's an important improvement here,

80
00:04:29,000 --> 00:04:32,000
but it's not the only improvement I want to make

81
00:04:32,000 --> 00:04:35,000
because of course with that, we still have the problem

82
00:04:35,000 --> 00:04:39,000
that if I change that status, it takes a short while until

83
00:04:39,000 --> 00:04:41,000
that change is reflected here.

84
00:04:41,000 --> 00:04:43,000
And that's not ideal.