1
00:00:00,000 --> 00:00:02,000
So we did now learn

2
00:00:02,000 --> 00:00:04,000
about a lot of different cache settings,

3
00:00:04,000 --> 00:00:07,000
and we learned how those settings can be used

4
00:00:07,000 --> 00:00:09,000
to control the data cache.

5
00:00:09,000 --> 00:00:12,000
Now, besides that data cache,

6
00:00:12,000 --> 00:00:15,000
NextJS also has a full route cache,

7
00:00:15,000 --> 00:00:18,000
and that's actually the kind of cache

8
00:00:18,000 --> 00:00:22,000
we saw in action in this application before.

9
00:00:23,000 --> 00:00:26,000
Because that full route cache is actually already created

10
00:00:26,000 --> 00:00:29,000
and initialized at build time,

11
00:00:30,000 --> 00:00:34,000
which simply means that if I stop that development server

12
00:00:34,000 --> 00:00:38,000
and I build this NextJS application for production

13
00:00:38,000 --> 00:00:41,000
by running npm run build, NextJS goes ahead

14
00:00:41,000 --> 00:00:45,000
and pre-renders all the pages of this application,

15
00:00:45,000 --> 00:00:49,000
unless they're dynamic pages with a dynamic parameter,

16
00:00:49,000 --> 00:00:50,000
because there, by default,

17
00:00:50,000 --> 00:00:55,000
it doesn't know all the possible dynamic parameter values,

18
00:00:56,000 --> 00:01:00,000
but it pre-renders all the pages it's able to pre-render.

19
00:01:00,000 --> 00:01:04,000
You also see that here, that all those pages marked

20
00:01:04,000 --> 00:01:06,000
with a dot were pre-rendered,

21
00:01:06,000 --> 00:01:08,000
so the messages page, for example,

22
00:01:08,000 --> 00:01:12,000
was pre-rendered, as you can tell,

23
00:01:12,000 --> 00:01:14,000
and the implication of that is

24
00:01:14,000 --> 00:01:18,000
that when we start the production server with npm start,

25
00:01:18,000 --> 00:01:20,000
it will actually be those pre-rendered pages

26
00:01:20,000 --> 00:01:24,000
that we see out of the box, and those pages

27
00:01:24,000 --> 00:01:28,000
are actually cached by NextJS, you could say.

28
00:01:28,000 --> 00:01:32,000
Therefore, now with that production server up and running,

29
00:01:32,000 --> 00:01:36,000
if I clear and restart my backend,

30
00:01:36,000 --> 00:01:39,000
we will actually see no log message at all here

31
00:01:39,000 --> 00:01:42,000
when I reload that messages page,

32
00:01:42,000 --> 00:01:45,000
and we see no log message here at all

33
00:01:45,000 --> 00:01:49,000
because that page was pre-rendered at build time

34
00:01:49,000 --> 00:01:51,000
and it's cached, and it's now always

35
00:01:51,000 --> 00:01:55,000
that pre-rendered cached page that's being served here,

36
00:01:55,000 --> 00:01:59,000
no matter how often I reload or navigate away and come back.

37
00:01:59,000 --> 00:02:02,000
It's always that pre-rendered page.

38
00:02:02,000 --> 00:02:05,000
Hence, we got no logs here on that backend server.

39
00:02:05,000 --> 00:02:06,000
Now, that's, of course, fine,

40
00:02:06,000 --> 00:02:09,000
as long as the data here doesn't change,

41
00:02:09,000 --> 00:02:12,000
and in this dummy application with that dummy backend,

42
00:02:12,000 --> 00:02:15,000
that's the case because the data served

43
00:02:15,000 --> 00:02:17,000
from that dummy backend does never change,

44
00:02:17,000 --> 00:02:20,000
but we saw before in the previous section

45
00:02:20,000 --> 00:02:24,000
where we learned about data mutations with NextJS

46
00:02:24,000 --> 00:02:28,000
that this can be a problem if we have data that does change,

47
00:02:28,000 --> 00:02:32,000
because due to that pre-rendered cached page,

48
00:02:32,000 --> 00:02:36,000
NextJS never re-renders and updates that page,

49
00:02:36,000 --> 00:02:40,000
And that's another thing that will be controlled

50
00:02:40,000 --> 00:02:44,000
by setting one of these cache settings here.

51
00:02:44,000 --> 00:02:48,000
For example, if I set force dynamic to this entire file

52
00:02:48,000 --> 00:02:51,000
to make sure that there is no data caching,

53
00:02:51,000 --> 00:02:55,000
I automatically also disable the full route cache

54
00:02:55,000 --> 00:02:58,000
for this page, and I make sure that,

55
00:02:58,000 --> 00:03:01,000
instead of pre-rendering and caching this page,

56
00:03:01,000 --> 00:03:04,000
NextJS will always re-render that page

57
00:03:04,000 --> 00:03:06,000
whenever a request is sent to it,

58
00:03:07,000 --> 00:03:11,000
which ensures that we're always fetching fresh data,

59
00:03:12,000 --> 00:03:15,000
and that's why, when I enable this dynamic constant

60
00:03:15,000 --> 00:03:20,000
and set it to force dynamic here, and I then save that file,

61
00:03:20,000 --> 00:03:25,000
and I then rebuild my project to rebuild it for production,

62
00:03:28,000 --> 00:03:31,000
now, this messages route has a different symbol here,

63
00:03:31,000 --> 00:03:34,000
which means that it's a dynamic page now,

64
00:03:34,000 --> 00:03:37,000
which is server-rendered on demand,

65
00:03:37,000 --> 00:03:39,000
as you can tell down here.

66
00:03:41,000 --> 00:03:43,000
And indeed, that's what we can see

67
00:03:43,000 --> 00:03:47,000
when we start the production server with npm start.

68
00:03:47,000 --> 00:03:49,000
Now, if we take a look at this backend log,

69
00:03:49,000 --> 00:03:52,000
if I reload this page a couple of times,

70
00:03:52,000 --> 00:03:54,000
I see a bunch of logs here,

71
00:03:54,000 --> 00:03:58,000
because now it's not just the data cache that's cleared,

72
00:03:58,000 --> 00:03:59,000
but also that full route cache,

73
00:03:59,000 --> 00:04:03,000
and we make sure that it's not some pre-rendered page

74
00:04:03,000 --> 00:04:05,000
that's reused over and over again.

75
00:04:07,000 --> 00:04:09,000
Of course, we don't have to use this setting

76
00:04:09,000 --> 00:04:12,000
to make sure that we see updated data.

77
00:04:12,000 --> 00:04:15,000
A different approach would be to revalidate the cache

78
00:04:15,000 --> 00:04:18,000
of a specific page on demand

79
00:04:18,000 --> 00:04:21,000
with the revalidate path function we already used

80
00:04:21,000 --> 00:04:25,000
in the previous section, and that's now a function

81
00:04:25,000 --> 00:04:27,000
which we'll revisit in the next lecture

82
00:04:27,000 --> 00:04:29,000
before we then thereafter will take a look

83
00:04:29,000 --> 00:04:30,000
at how we can manage caching

84
00:04:30,000 --> 00:04:34,000
if we're not sending a request to a separate backend,

85
00:04:34,000 --> 00:04:36,000
but instead to some other data source,

86
00:04:36,000 --> 00:04:40,000
like a database we manage in the NextJS application.