1
00:00:00,000 --> 00:00:03,000
So, as mentioned before, Next.js

2
00:00:03,000 --> 00:00:06,000
performs some pretty aggressive

3
00:00:06,000 --> 00:00:07,000
caching.

4
00:00:07,000 --> 00:00:10,000
And to be precise, there are four

5
00:00:10,000 --> 00:00:14,000
different areas where Next.js caches data

6
00:00:14,000 --> 00:00:16,000
or pages.

7
00:00:16,000 --> 00:00:20,000
Though I will also say that the amount of

8
00:00:20,000 --> 00:00:23,000
caching or the aggressiveness by which

9
00:00:23,000 --> 00:00:26,000
Next.js performs the caching will

10
00:00:26,000 --> 00:00:29,000
depend on the Next.js version you're

11
00:00:29,000 --> 00:00:29,000
using.

12
00:00:30,000 --> 00:00:32,000
You get the most aggressive caching if

13
00:00:32,000 --> 00:00:34,000
you're using Next.js 14.

14
00:00:35,000 --> 00:00:37,000
And you can check your package.json

15
00:00:37,000 --> 00:00:40,000
file to find out which version you're

16
00:00:40,000 --> 00:00:40,000
using.

17
00:00:40,000 --> 00:00:43,000
So you get the most aggressive caching

18
00:00:43,000 --> 00:00:44,000
with Next.js 14.

19
00:00:44,000 --> 00:00:48,000
If you're using Next.js 15 or higher, it'll be

20
00:00:48,000 --> 00:00:52,000
a bit less aggressive because with Next.js

21
00:00:52,000 --> 00:00:56,000
15, some caching behaviors and defaults

22
00:00:56,000 --> 00:00:57,000
were changed.

23
00:00:57,000 --> 00:00:59,000
But I'll highlight the important

24
00:00:59,000 --> 00:01:02,000
differences as we explore the different

25
00:01:02,000 --> 00:01:03,000
kinds of caching.

26
00:01:03,000 --> 00:01:06,000
First, let me give you an overview of the

27
00:01:06,000 --> 00:01:09,000
different kinds of caching Next.js

28
00:01:09,000 --> 00:01:10,000
performs for you.

29
00:01:10,000 --> 00:01:13,000
And that starts with request

30
00:01:13,000 --> 00:01:16,000
memoization, which is a fancy term

31
00:01:16,000 --> 00:01:18,000
which in the end simply means that

32
00:01:18,000 --> 00:01:22,000
Next.js stores data requests with the

33
00:01:22,000 --> 00:01:25,000
same configuration so that duplicate

34
00:01:25,000 --> 00:01:27,000
requests are avoided.

35
00:01:27,000 --> 00:01:28,000
That's the main idea.

36
00:01:29,000 --> 00:01:33,000
And this request memoization only

37
00:01:33,000 --> 00:01:36,000
happens during one request that's

38
00:01:36,000 --> 00:01:39,000
being handled on the Next.js server.

39
00:01:39,000 --> 00:01:43,000
This still might not be 100% clear, but I'll

40
00:01:43,000 --> 00:01:45,000
show you how request memoization

41
00:01:45,000 --> 00:01:47,000
works and what it means for you in

42
00:01:47,000 --> 00:01:51,000
detail at a concrete example in the next

43
00:01:51,000 --> 00:01:51,000
lectures.

44
00:01:51,000 --> 00:01:52,000
No worries.

45
00:01:53,000 --> 00:01:56,000
So there is this mechanism that simply

46
00:01:56,000 --> 00:01:59,000
exists to make sure that duplicate

47
00:01:59,000 --> 00:02:02,000
unnecessary requests to some data

48
00:02:02,000 --> 00:02:03,000
source are avoided.

49
00:02:04,000 --> 00:02:08,000
There also is a separate data cache

50
00:02:08,000 --> 00:02:11,000
managed by Next.js which might sound

51
00:02:11,000 --> 00:02:13,000
similar but which actually has a different

52
00:02:13,000 --> 00:02:14,000
purpose.

53
00:02:15,000 --> 00:02:18,000
Where request memoization aims to

54
00:02:18,000 --> 00:02:20,000
avoid duplicate requests to a data

55
00:02:20,000 --> 00:02:23,000
source for a single request that's

56
00:02:23,000 --> 00:02:26,000
handled by the Next.js server, the data

57
00:02:26,000 --> 00:02:29,000
cache is all about storing and reusing

58
00:02:29,000 --> 00:02:31,000
data that has been fetched from a data

59
00:02:31,000 --> 00:02:33,000
source if it hasn't changed.

60
00:02:34,000 --> 00:02:37,000
The idea behind this data cache

61
00:02:37,000 --> 00:02:41,000
therefore is not to deduplicate requests

62
00:02:41,000 --> 00:02:44,000
or avoid duplicate requests but instead

63
00:02:44,000 --> 00:02:47,000
to avoid requests altogether unless the

64
00:02:47,000 --> 00:02:48,000
data has changed.

65
00:02:49,000 --> 00:02:50,000
Which of course means that your

66
00:02:50,000 --> 00:02:53,000
application may be a bit faster because

67
00:02:53,000 --> 00:02:56,000
those extra round trips to the data

68
00:02:56,000 --> 00:02:57,000
source are avoided.

69
00:02:58,000 --> 00:03:01,000
And this data cache then persists until

70
00:03:01,000 --> 00:03:05,000
it's revalidated manually by you and you

71
00:03:05,000 --> 00:03:07,000
will learn how to do that or after a

72
00:03:07,000 --> 00:03:10,000
certain time set by you and you will also

73
00:03:10,000 --> 00:03:11,000
learn how to do that.

74
00:03:12,000 --> 00:03:15,000
In addition to caching data that might

75
00:03:15,000 --> 00:03:19,000
be used by pages, Next.js also manages

76
00:03:19,000 --> 00:03:21,000
a full route cache.

77
00:03:22,000 --> 00:03:25,000
And the idea here is that Next.js does

78
00:03:25,000 --> 00:03:28,000
not just cache and store and reuse data

79
00:03:28,000 --> 00:03:31,000
that may be used by pages but instead

80
00:03:31,000 --> 00:03:34,000
the entire page, the entire HTML code

81
00:03:34,000 --> 00:03:37,000
and the entire React server component

82
00:03:37,000 --> 00:03:39,000
payload which is managed under the

83
00:03:39,000 --> 00:03:41,000
hood and which is used to render those

84
00:03:41,000 --> 00:03:41,000
pages.

85
00:03:42,000 --> 00:03:45,000
This therefore does not just avoid extra

86
00:03:45,000 --> 00:03:48,000
round trips to some data source but it

87
00:03:48,000 --> 00:03:50,000
instead entirely avoids the re-rendering

88
00:03:50,000 --> 00:03:53,000
of an entire HTML page and hence it

89
00:03:53,000 --> 00:03:56,000
speeds up pages even further because

90
00:03:56,000 --> 00:03:58,000
existing pages can be reused.

91
00:03:59,000 --> 00:04:00,000
That's the idea here.

92
00:04:01,000 --> 00:04:03,000
And this cache also persists until the

93
00:04:03,000 --> 00:04:06,000
related data cache is revalidated.

94
00:04:06,000 --> 00:04:09,000
So when updated data is there, pages

95
00:04:09,000 --> 00:04:12,000
also will be re-rendered but only then.

96
00:04:14,000 --> 00:04:18,000
And then last but not least there is a

97
00:04:18,000 --> 00:04:19,000
router cache.

98
00:04:20,000 --> 00:04:22,000
And one key difference here is that all

99
00:04:22,000 --> 00:04:25,000
three other caches, request

100
00:04:25,000 --> 00:04:28,000
memoization, data cache and full route

101
00:04:28,000 --> 00:04:31,000
cache, all these caches are managed on

102
00:04:31,000 --> 00:04:32,000
the server side.

103
00:04:33,000 --> 00:04:36,000
The router cache on the other hand is a

104
00:04:36,000 --> 00:04:38,000
cache that's managed on the client side

105
00:04:38,000 --> 00:04:42,000
and here Next.js also stores some React

106
00:04:42,000 --> 00:04:45,000
server component payload in memory in

107
00:04:45,000 --> 00:04:47,000
the browser and it does that so that

108
00:04:47,000 --> 00:04:50,000
navigations between pages can happen

109
00:04:50,000 --> 00:04:50,000
faster.

110
00:04:51,000 --> 00:04:53,000
Because even with the full route cache,

111
00:04:53,000 --> 00:04:56,000
Next.js of course would need to send a

112
00:04:56,000 --> 00:04:59,000
request to the Next.js server to get that

113
00:04:59,000 --> 00:04:59,000
cache.

114
00:05:00,000 --> 00:05:02,000
cached page and that request to the

115
00:05:02,000 --> 00:05:05,000
server can be sped up or avoided if the

116
00:05:05,000 --> 00:05:08,000
page data is already managed on the

117
00:05:08,000 --> 00:05:10,000
client side and that's the idea behind the

118
00:05:10,000 --> 00:05:10,000
router cache.

119
00:05:11,000 --> 00:05:14,000
And this cache will be invalidated when

120
00:05:14,000 --> 00:05:18,000
new pages are rendered by the server or

121
00:05:18,000 --> 00:05:21,000
whenever you leave the Next.js rendered

122
00:05:21,000 --> 00:05:23,000
website and come back to it, for

123
00:05:23,000 --> 00:05:24,000
example.

124
00:05:25,000 --> 00:05:27,000
So it's also worth noting that this router

125
00:05:27,000 --> 00:05:30,000
cache, this client-side router cache has

126
00:05:30,000 --> 00:05:33,000
been made a bit less aggressive with

127
00:05:33,000 --> 00:05:37,000
Next.js 15, simply to ensure that you

128
00:05:37,000 --> 00:05:40,000
don't run into weird situations where for

129
00:05:40,000 --> 00:05:43,000
some reason some page might not

130
00:05:43,000 --> 00:05:45,000
reflect your latest data when you

131
00:05:45,000 --> 00:05:46,000
expected it to.

132
00:05:46,000 --> 00:05:49,000
But the feature still exists, for example

133
00:05:49,000 --> 00:05:51,000
also to speed up backward and forward

134
00:05:51,000 --> 00:05:54,000
navigation if the user uses the

135
00:05:54,000 --> 00:05:55,000
appropriate buttons and so on.

136
00:05:56,000 --> 00:05:59,000
So these are four different important

137
00:05:59,000 --> 00:06:02,000
caches managed by Next.js and if you

138
00:06:02,000 --> 00:06:05,000
wanna dive deeper there is an entire

139
00:06:05,000 --> 00:06:07,000
page in the official documentation to

140
00:06:07,000 --> 00:06:10,000
which you find a link attached to this

141
00:06:10,000 --> 00:06:13,000
lecture which explains these different

142
00:06:13,000 --> 00:06:16,000
caches in even greater detail and also

143
00:06:16,000 --> 00:06:18,000
has some nice graphics here.

144
00:06:18,000 --> 00:06:21,000
But we'll of course also explore those

145
00:06:21,000 --> 00:06:25,000
caches, specifically the first three caches

146
00:06:25,000 --> 00:06:27,000
since these are the important ones we

147
00:06:27,000 --> 00:06:29,000
need to manage throughout this section

148
00:06:29,000 --> 00:06:32,000
and we'll see how they work, how we can

149
00:06:32,000 --> 00:06:34,000
revalidate data and what they mean for

150
00:06:34,000 --> 00:06:37,000
us as a Next.js developer.