1
00:00:00,000 --> 00:00:03,000
So sharing meals works now,

2
00:00:03,000 --> 00:00:07,000
but there actually is one problem with our application.

3
00:00:08,000 --> 00:00:13,000
Everything works fine here during development when using

4
00:00:13,000 --> 00:00:15,000
that development server,

5
00:00:15,000 --> 00:00:19,000
but things will change once we move to production.

6
00:00:20,000 --> 00:00:24,000
Now, to move from development to production, we should quit

7
00:00:24,000 --> 00:00:26,000
that development server here

8
00:00:27,000 --> 00:00:30,000
and then run another script in the terminal,

9
00:00:30,000 --> 00:00:33,000
navigate it into our project folder still.

10
00:00:34,000 --> 00:00:37,000
And that's the NPM Run build script.

11
00:00:37,000 --> 00:00:39,000
This will build

12
00:00:39,000 --> 00:00:43,000
and prepare our NextJS application for production.

13
00:00:43,000 --> 00:00:46,000
It will essentially give us a project

14
00:00:46,000 --> 00:00:49,000
that we could then deploy onto a server.

15
00:00:50,000 --> 00:00:53,000
Now you can run that production server

16
00:00:53,000 --> 00:00:57,000
and that optimized code by then running NPM start.

17
00:00:57,000 --> 00:01:02,000
So first NPM run build, and then thereafter NPM start.

18
00:01:02,000 --> 00:01:04,000
This will start a server,

19
00:01:04,000 --> 00:01:06,000
but now not some development server,

20
00:01:06,000 --> 00:01:10,000
but instead the production server,

21
00:01:10,000 --> 00:01:13,000
which here is still served under the same address,

22
00:01:13,000 --> 00:01:17,000
but now it's serving that optimized code and so on.

23
00:01:17,000 --> 00:01:22,000
Now therefore you can revisit local host 3000

24
00:01:22,000 --> 00:01:25,000
and you should, for example, still see your meals there,

25
00:01:25,000 --> 00:01:28,000
but you'll now notice something strange

26
00:01:28,000 --> 00:01:30,000
when you add a new meal.

27
00:01:31,000 --> 00:01:36,000
For that, I'll again, going to enter some data

28
00:01:36,000 --> 00:01:38,000
and I'll name my meal, tasty Bruschetta,

29
00:01:39,000 --> 00:01:41,000
Very delicious.

30
00:01:42,000 --> 00:01:46,000
Add my instructions like this

31
00:01:47,000 --> 00:01:49,000
and pick the same image as always.

32
00:01:50,000 --> 00:01:53,000
If I now click share meal, I'm redirected.

33
00:01:53,000 --> 00:01:56,000
And this is now quicker, as I mentioned before.

34
00:01:56,000 --> 00:01:58,000
That's great, it's quicker, better user experience,

35
00:01:59,000 --> 00:02:01,000
but the meal is missing here.

36
00:02:02,000 --> 00:02:05,000
I see the three meals I submitted before,

37
00:02:05,000 --> 00:02:08,000
but this new meal is missing.

38
00:02:08,000 --> 00:02:12,000
Keep in mind that I added a text of very delicious to it

39
00:02:12,000 --> 00:02:15,000
and I don't see that text anywhere here.

40
00:02:16,000 --> 00:02:17,000
And there's one other thing

41
00:02:17,000 --> 00:02:20,000
that's pretty strange here on this site.

42
00:02:21,000 --> 00:02:25,000
If I go back to the starting page for example, and I reload

43
00:02:25,000 --> 00:02:27,000
and I then go to browse meals,

44
00:02:27,000 --> 00:02:30,000
I'm there pretty much instantly.

45
00:02:30,000 --> 00:02:32,000
If I'm on this page and I reload,

46
00:02:32,000 --> 00:02:35,000
it also reloads pretty much instantly.

47
00:02:35,000 --> 00:02:40,000
You might recall that before, this took five seconds

48
00:02:40,000 --> 00:02:45,000
because I added this extra delay here in the meals.js file,

49
00:02:45,000 --> 00:02:46,000
this delay.

50
00:02:47,000 --> 00:02:50,000
Why is this missing here in production

51
00:02:50,000 --> 00:02:53,000
and why is this meal we added missing?

52
00:02:54,000 --> 00:02:58,000
Well, because as mentioned earlier in this section,

53
00:02:58,000 --> 00:03:03,000
NextJS performs some pretty aggressive caching

54
00:03:03,000 --> 00:03:07,000
and there is one extra step it performs

55
00:03:07,000 --> 00:03:11,000
and goes through when preparing the app for production

56
00:03:11,000 --> 00:03:14,000
that we didn't see when testing it

57
00:03:14,000 --> 00:03:15,000
with the development server.

58
00:03:17,000 --> 00:03:21,000
Because when you run this NPM run build command

59
00:03:21,000 --> 00:03:26,000
to prepare the app for production, NextJS goes ahead

60
00:03:26,000 --> 00:03:31,000
and actually generates, pre-renders all the pages

61
00:03:31,000 --> 00:03:35,000
of your app that can be pre-generated,

62
00:03:35,000 --> 00:03:38,000
so basically all non-dynamic pages.

63
00:03:39,000 --> 00:03:44,000
So it, for example, pre-generated the meals page.

64
00:03:45,000 --> 00:03:48,000
So this page.js file in the meals folder,

65
00:03:48,000 --> 00:03:51,000
this page here, which outputs some meals,

66
00:03:51,000 --> 00:03:56,000
it was pre-generated, so all that data was fetched

67
00:03:56,000 --> 00:04:00,000
and rendered there during the build process.

68
00:04:00,000 --> 00:04:02,000
And NextJS is doing that

69
00:04:02,000 --> 00:04:05,000
because by pre-rendering all these pages,

70
00:04:05,000 --> 00:04:08,000
it of course has those pages available right

71
00:04:08,000 --> 00:04:11,000
from the start after being deployed.

72
00:04:11,000 --> 00:04:15,000
And so the very first visitor of your website is able

73
00:04:15,000 --> 00:04:19,000
to instantly see the finished page without having to wait

74
00:04:19,000 --> 00:04:21,000
for anything to render,

75
00:04:21,000 --> 00:04:24,000
which of course can be a great user experience.

76
00:04:26,000 --> 00:04:30,000
And NextJS then caches those pre-rendered pages so

77
00:04:30,000 --> 00:04:33,000
that it's able to serve them to all visitors.

78
00:04:34,000 --> 00:04:36,000
But the downside of this approach, of course,

79
00:04:36,000 --> 00:04:40,000
is that it never re-fetches the meals

80
00:04:40,000 --> 00:04:43,000
because this code here never executes again.

81
00:04:43,000 --> 00:04:48,000
Instead, it just uses those pre-generated pages.

82
00:04:48,000 --> 00:04:52,000
And I can prove that we can simply console log,

83
00:04:52,000 --> 00:04:56,000
fetching meals here in that meals component

84
00:04:56,000 --> 00:04:58,000
that's being used by the meals page.

85
00:05:00,000 --> 00:05:04,000
And if I do that and I then rebuild my project

86
00:05:04,000 --> 00:05:08,000
by running NPM run build again, you will see

87
00:05:09,000 --> 00:05:13,000
that it generates all those pages

88
00:05:13,000 --> 00:05:17,000
and then once it's done, if I start that production server,

89
00:05:18,000 --> 00:05:23,000
if I reload the meals page, I don't see fetching meals here.

90
00:05:24,000 --> 00:05:26,000
I get some warning that we might want

91
00:05:26,000 --> 00:05:28,000
to install some extra package when using

92
00:05:28,000 --> 00:05:31,000
that image component, but we can ignore that here.

93
00:05:31,000 --> 00:05:32,000
The main thing is

94
00:05:32,000 --> 00:05:35,000
that we don't see this message being logged,

95
00:05:35,000 --> 00:05:38,000
so that is not executing anymore

96
00:05:38,000 --> 00:05:42,000
because those pages were pre-generated and cached.

97
00:05:43,000 --> 00:05:46,000
But that's of course a problem if the data that's visible on

98
00:05:46,000 --> 00:05:50,000
that page changes as is the case for me here.

99
00:05:50,000 --> 00:05:53,000
Now you can see that latest meal I added earlier now

100
00:05:53,000 --> 00:05:56,000
because I regenerated all the pages,

101
00:05:56,000 --> 00:05:58,000
but if I would add another new meal here,

102
00:05:58,000 --> 00:06:00,000
it would again be missing.

103
00:06:00,000 --> 00:06:01,000
And that's of course

104
00:06:01,000 --> 00:06:04,000
absolutely not the behavior we want here.