1
00:00:03,000 --> 00:00:04,796
Now that we're displaying

2
00:00:04,796 --> 00:00:07,167
the list of posts in the HomePage

3
00:00:07,167 --> 00:00:10,042
we have a simple but fully working blog.

4
00:00:10,686 --> 00:00:12,572
Before adding more features,

5
00:00:12,572 --> 00:00:14,324
let's have another look at

6
00:00:14,324 --> 00:00:16,683
what happens when we build our app,

7
00:00:16,683 --> 00:00:18,839
now that we have dynamic routes.

8
00:00:19,542 --> 00:00:21,046
So I'll stop the dev server,

9
00:00:22,108 --> 00:00:23,929
and launch "npm run build"

10
00:00:23,929 --> 00:00:26,100
that, as we know, will generate

11
00:00:26,100 --> 00:00:28,551
a production build for our website.

12
00:00:29,192 --> 00:00:30,896
Let's have a look at the full output.

13
00:00:31,396 --> 00:00:33,313
One thing to notice is that

14
00:00:33,313 --> 00:00:35,798
our Home page is now an "SSG" page,

15
00:00:35,798 --> 00:00:37,572
not simply a "Static" one

16
00:00:37,572 --> 00:00:40,341
as it was the last time we did a build.

17
00:00:41,054 --> 00:00:43,230
And that's because in the previous video

18
00:00:43,230 --> 00:00:45,244
we added a "getStaticProps" function.

19
00:00:45,798 --> 00:00:48,146
But the most interesting part is

20
00:00:48,146 --> 00:00:51,007
our new dynamic route for the PostPage.

21
00:00:51,581 --> 00:00:54,324
You can see that "posts/[slug]"

22
00:00:54,324 --> 00:00:56,449
is also of the SSG type,

23
00:00:56,449 --> 00:00:59,901
but it resulted in three separate pages

24
00:00:59,901 --> 00:01:02,999
being generated, one for each post.

25
00:01:02,999 --> 00:01:06,009
So Next.js generated 3 HTML pages,

26
00:01:06,009 --> 00:01:08,133
named "first-post.html",

27
00:01:08,133 --> 00:01:10,700
"second-post.html" and so on.

28
00:01:10,700 --> 00:01:13,444
This dynamic route is "dynamic"

29
00:01:13,444 --> 00:01:16,276
in the sense that multiple pages

30
00:01:16,276 --> 00:01:18,755
are generated automatically,

31
00:01:20,052 --> 00:01:23,316
but this still happens at build time,

32
00:01:23,316 --> 00:01:27,550
so these pages are still static HTML (and JSON).

33
00:01:28,139 --> 00:01:30,614
Now, let's look at the full build log,

34
00:01:30,614 --> 00:01:31,851
from the beginning.

35
00:01:32,417 --> 00:01:34,961
What we can tell from here is that

36
00:01:34,961 --> 00:01:38,329
the "getStaticProps" function in our PostPage

37
00:01:38,329 --> 00:01:40,051
was called three times,

38
00:01:40,051 --> 00:01:42,820
each time with a different post slug.

39
00:01:43,545 --> 00:01:45,907
So what happens is that Next.js

40
00:01:45,907 --> 00:01:49,107
first calls the "getStaticPaths" function,

41
00:01:49,107 --> 00:01:50,860
which we don't see here

42
00:01:50,860 --> 00:01:53,832
just because we're not logging anything

43
00:01:53,832 --> 00:01:55,127
in that function,

44
00:01:55,127 --> 00:01:57,871
but if you remember "getStaticPaths"

45
00:01:57,871 --> 00:01:59,623
returns three elements.

46
00:01:59,623 --> 00:02:03,053
So for each path returned by "getStaticPaths"

47
00:02:03,053 --> 00:02:06,329
Next.js calls the "getStaticProps" function

48
00:02:06,329 --> 00:02:08,996
passing the "params" for that path,

49
00:02:08,996 --> 00:02:12,044
which in our case contain the post slug.

50
00:02:13,307 --> 00:02:15,404
And after each "getStaticProps"

51
00:02:15,404 --> 00:02:18,787
Next.js should call the component render function.

52
00:02:19,355 --> 00:02:21,562
We can see one render call here.

53
00:02:21,562 --> 00:02:24,667
This one has the props for the "Second Post".

54
00:02:25,236 --> 00:02:28,688
Next.js generates multiple pages in parallel,

55
00:02:28,688 --> 00:02:31,833
so the order in which pages are generated

56
00:02:31,833 --> 00:02:33,137
is unpredictable.

57
00:02:33,791 --> 00:02:35,056
But if we scroll down,

58
00:02:35,056 --> 00:02:36,609
at some point we should see

59
00:02:38,191 --> 00:02:40,346
another call to PostPage render,

60
00:02:40,346 --> 00:02:42,569
this one is for the "Third Post".

61
00:02:43,137 --> 00:02:44,704
And below that there's also

62
00:02:44,704 --> 00:02:46,388
the one for the "First Post".

63
00:02:46,947 --> 00:02:48,490
So those are the three

64
00:02:48,490 --> 00:02:51,017
post page components being rendered,

65
00:02:51,017 --> 00:02:53,192
each time with different props.

66
00:02:53,833 --> 00:02:56,239
If you look inside the build folder,

67
00:02:56,239 --> 00:02:59,247
that is the ".next" directory in our project,

68
00:02:59,247 --> 00:03:01,854
you'll see all the HTML and JSON files,

69
00:03:01,854 --> 00:03:04,460
but we've seen that in previous videos,

70
00:03:04,460 --> 00:03:06,265
so I won't show that again.

71
00:03:07,033 --> 00:03:09,771
The important thing to know is that,

72
00:03:09,771 --> 00:03:11,901
as I mentioned a minute ago,

73
00:03:11,901 --> 00:03:14,336
a dynamic route still results in

74
00:03:14,336 --> 00:03:16,922
static HTML files being generated.

75
00:03:16,922 --> 00:03:18,976
At least as long as you set

76
00:03:18,976 --> 00:03:22,171
"fallback" to "false" in "getStaticPaths".

77
00:03:22,171 --> 00:03:23,769
So our entire website

78
00:03:23,769 --> 00:03:25,823
is still completely static,

79
00:03:25,823 --> 00:03:28,714
and can be deployed to any web server.