1
00:00:02,000 --> 00:00:05,000
So, I outlined a potential problem we could be facing

2
00:00:05,000 --> 00:00:07,000
in the last lecture.

3
00:00:07,000 --> 00:00:12,000
Now Next.js can help us with a concept called pre-rendering.

4
00:00:13,000 --> 00:00:15,000
Imagine that you have some page,

5
00:00:15,000 --> 00:00:18,000
some route which then loads some page file

6
00:00:18,000 --> 00:00:21,000
in the pages folder, which needs data.

7
00:00:21,000 --> 00:00:25,000
Now when a request is sent to this route,

8
00:00:25,000 --> 00:00:28,000
so if a user wants to visit this page,

9
00:00:28,000 --> 00:00:30,000
then what Next.js does

10
00:00:30,000 --> 00:00:35,000
is it will return a pre-rendered page.

11
00:00:35,000 --> 00:00:38,000
And that's a difference to standard React.

12
00:00:38,000 --> 00:00:43,000
With standard React, you get back an empty HTML file

13
00:00:43,000 --> 00:00:45,000
and all the JavaScript code.

14
00:00:45,000 --> 00:00:48,000
And then that JavaScript code runs

15
00:00:48,000 --> 00:00:50,000
and brings something onto the screen.

16
00:00:50,000 --> 00:00:52,000
And that happens super fast

17
00:00:52,000 --> 00:00:55,000
so users won't really see a problem there.

18
00:00:55,000 --> 00:00:58,000
But then any data which might be needed

19
00:00:58,000 --> 00:01:01,000
in addition to the general DOM structure

20
00:01:01,000 --> 00:01:02,000
that should be showed,

21
00:01:02,000 --> 00:01:05,000
such data then is loaded from a server

22
00:01:05,000 --> 00:01:07,000
and that can take a while.

23
00:01:07,000 --> 00:01:10,000
Now not if the page is pre-rendered.

24
00:01:10,000 --> 00:01:13,000
And that is what Next.js does for us.

25
00:01:13,000 --> 00:01:15,000
Instead of loading data only

26
00:01:15,000 --> 00:01:19,000
after the page was sent back to the client,

27
00:01:19,000 --> 00:01:22,000
Next.js pre-renders a page

28
00:01:22,000 --> 00:01:26,000
and pre-renders all the HTML content

29
00:01:26,000 --> 00:01:28,000
with all the data that might be needed.

30
00:01:28,000 --> 00:01:30,000
It loads that in advance

31
00:01:30,000 --> 00:01:35,000
and then pre-generates the finished HTML page

32
00:01:35,000 --> 00:01:39,000
so that it's this finished, fully populated HTML page

33
00:01:39,000 --> 00:01:44,000
which can be sent back to the client, so to the visitor.

34
00:01:44,000 --> 00:01:47,000
So that's great for SEO.

35
00:01:47,000 --> 00:01:49,000
Now we also of course still want

36
00:01:49,000 --> 00:01:51,000
to have an interactive React app.

37
00:01:51,000 --> 00:01:54,000
After all, there is a reason why we use React,

38
00:01:54,000 --> 00:01:58,000
and we don't just build a HTML and CSS app.

39
00:01:58,000 --> 00:02:00,000
Instead, we might be using React

40
00:02:00,000 --> 00:02:02,000
for handling user interaction,

41
00:02:02,000 --> 00:02:05,000
for watching a forum and showing validation errors,

42
00:02:05,000 --> 00:02:07,000
for reacting to button clicks.

43
00:02:07,000 --> 00:02:09,000
And therefore Next.js

44
00:02:09,000 --> 00:02:13,000
will not just send back this pre-rendered page,

45
00:02:13,000 --> 00:02:16,000
but it will also send back all the JavaScript code

46
00:02:16,000 --> 00:02:18,000
that belongs to it.

47
00:02:18,000 --> 00:02:19,000
And it will do something

48
00:02:19,000 --> 00:02:22,000
which is called hydrating that page.

49
00:02:22,000 --> 00:02:25,000
So it will send back that JavaScript code,

50
00:02:25,000 --> 00:02:29,000
and that code will then take over that pre-rendered page,

51
00:02:29,000 --> 00:02:32,000
and again let React do its job.

52
00:02:32,000 --> 00:02:33,000
That is great

53
00:02:33,000 --> 00:02:37,000
because now we have an interactive page or app.

54
00:02:37,000 --> 00:02:40,000
But we did send back that pre-rendered page initially,

55
00:02:40,000 --> 00:02:43,000
so that all the core content was already there

56
00:02:43,000 --> 00:02:44,000
right from the start,

57
00:02:44,000 --> 00:02:48,000
and so that search engine crawlers, for example,

58
00:02:48,000 --> 00:02:52,000
also see that entire page with all the content.

59
00:02:52,000 --> 00:02:55,000
If it's not interactive at that point,

60
00:02:55,000 --> 00:02:57,000
that doesn't matter to those crawlers

61
00:02:57,000 --> 00:03:01,000
because they are only interested in the content anyways.

62
00:03:02,000 --> 00:03:04,000
So that's the idea of pre-rendering.

63
00:03:04,000 --> 00:03:09,000
We, or to be precise, Next.js, prepare a page in advance

64
00:03:11,000 --> 00:03:14,000
by pre-building all the HTML content

65
00:03:14,000 --> 00:03:17,000
and by pre-loading all the data

66
00:03:17,000 --> 00:03:18,000
that will eventually be needed.

67
00:03:18,000 --> 00:03:22,000
And it is worth pointing out that this pre-rendering

68
00:03:22,000 --> 00:03:26,000
only affects the initial load.

69
00:03:26,000 --> 00:03:30,000
So when we visit a page and we load our first page,

70
00:03:30,000 --> 00:03:33,000
this page is pre-rendered.

71
00:03:33,000 --> 00:03:35,000
Once we are on a website

72
00:03:35,000 --> 00:03:38,000
that's powered by Next.js and React,

73
00:03:38,000 --> 00:03:40,000
and once that page is hydrated,

74
00:03:40,000 --> 00:03:43,000
which happens right after this first rendering,

75
00:03:43,000 --> 00:03:45,000
once that is the case,

76
00:03:45,000 --> 00:03:49,000
we have a standard single page application again.

77
00:03:49,000 --> 00:03:51,000
So then React takes over

78
00:03:51,000 --> 00:03:53,000
and handles everything on the front end.

79
00:03:53,000 --> 00:03:55,000
If the page changes thereafter,

80
00:03:55,000 --> 00:03:59,000
if we visit a different page of that same website,

81
00:03:59,000 --> 00:04:01,000
that page is not pre-rendered,

82
00:04:01,000 --> 00:04:05,000
but instead created in the client with React.

83
00:04:05,000 --> 00:04:09,000
It's just this initial page which we visit

84
00:04:09,000 --> 00:04:10,000
which is pre-rendered.

85
00:04:10,000 --> 00:04:13,000
So that there we don't get this empty page

86
00:04:13,000 --> 00:04:15,000
until React is ready,

87
00:04:15,000 --> 00:04:17,000
but we get this pre-rendered page

88
00:04:17,000 --> 00:04:20,000
which contains all that initial content already.

89
00:04:21,000 --> 00:04:23,000
And for achieving this,

90
00:04:23,000 --> 00:04:26,000
Next.js has two forms of pre-rendering,

91
00:04:26,000 --> 00:04:30,000
and we are, of course, going to learn about both,

92
00:04:30,000 --> 00:04:31,000
which you can choose from.

93
00:04:31,000 --> 00:04:34,000
So you can choose which form you wanna use.

94
00:04:34,000 --> 00:04:37,000
The first form, and the recommended form,

95
00:04:37,000 --> 00:04:40,000
is static generation.

96
00:04:40,000 --> 00:04:45,000
The other form, the alternative, is server-side rendering.

97
00:04:46,000 --> 00:04:48,000
Now that might not tell you much right now.

98
00:04:48,000 --> 00:04:51,000
I will explain both throughout this section.

99
00:04:51,000 --> 00:04:55,000
The main difference is that with static generation,

100
00:04:55,000 --> 00:04:58,000
all the pages are pre-generated

101
00:04:58,000 --> 00:05:00,000
in advance during build time.

102
00:05:00,000 --> 00:05:04,000
So when you build your application for production,

103
00:05:04,000 --> 00:05:08,000
before you deploy it, you prepare all those pages.

104
00:05:08,000 --> 00:05:13,000
With server-side rendering, pages are created just in time

105
00:05:13,000 --> 00:05:17,000
after deployment when a request reaches the server.

106
00:05:17,000 --> 00:05:20,000
Now there are also ways of mixing that

107
00:05:20,000 --> 00:05:23,000
and I will dive deeply into both concepts

108
00:05:23,000 --> 00:05:26,000
and when to use which throughout this section.

109
00:05:27,000 --> 00:05:29,000
I hope it's clear what the core idea

110
00:05:29,000 --> 00:05:30,000
behind pre-rendering is, though,

111
00:05:30,000 --> 00:05:34,000
and therefore, let's now explore these different concepts

112
00:05:34,000 --> 00:05:36,000
of pre-rendering pages.