1
00:00:02,000 --> 00:00:04,000
[Maximilian Schwarzmüller] Now this was a long module

2
00:00:04,000 --> 00:00:07,000
with a lot of key concepts.

3
00:00:07,000 --> 00:00:09,000
In general, this module was about

4
00:00:09,000 --> 00:00:13,000
how Next.js pre-renders pages for us

5
00:00:13,000 --> 00:00:15,000
so that if we view at a page source

6
00:00:15,000 --> 00:00:18,000
we have some data in that page source,

7
00:00:18,000 --> 00:00:21,000
some data which is there right from the start

8
00:00:21,000 --> 00:00:23,000
and which is there for all the visible

9
00:00:23,000 --> 00:00:25,000
to search engine crawlers

10
00:00:25,000 --> 00:00:26,000
which is a key difference

11
00:00:26,000 --> 00:00:30,000
to standard React apps without service side rendering.

12
00:00:30,000 --> 00:00:31,000
Now you did learn

13
00:00:31,000 --> 00:00:36,000
that out of the box Next.js pre-renders your pages.

14
00:00:36,000 --> 00:00:39,000
It does that automatically

15
00:00:39,000 --> 00:00:43,000
but you can also force it to do so by adding getStaticProps

16
00:00:43,000 --> 00:00:45,000
because you add this function

17
00:00:45,000 --> 00:00:49,000
whenever you also wanna pre-fetch data for your component.

18
00:00:49,000 --> 00:00:53,000
So if your page component doesn't need any data

19
00:00:53,000 --> 00:00:56,000
of course you never add getStaticProps typically

20
00:00:56,000 --> 00:01:00,000
because it doesn't add anything to the page then

21
00:01:00,000 --> 00:01:02,000
but if your page does needs data like the list

22
00:01:02,000 --> 00:01:06,000
of products here, then you add getStaticProps

23
00:01:06,000 --> 00:01:10,000
So that during the build process, this data is pre-fetched

24
00:01:10,000 --> 00:01:14,000
and available for the page when it's pre-rendered

25
00:01:14,000 --> 00:01:18,000
so that the pre-rendered page contains pre-fetched data.

26
00:01:19,000 --> 00:01:21,000
Since geStaticProps executes

27
00:01:21,000 --> 00:01:23,000
during the build process

28
00:01:23,000 --> 00:01:26,000
you can execute node js code in there

29
00:01:26,000 --> 00:01:28,000
which wouldn't run in the browser.

30
00:01:28,000 --> 00:01:30,000
For example you can get access

31
00:01:30,000 --> 00:01:34,000
to the file system and read data from files.

32
00:01:34,000 --> 00:01:37,000
Since data can get outdated

33
00:01:37,000 --> 00:01:40,000
after the pages were pre-generated,

34
00:01:40,000 --> 00:01:43,000
you can also add the revalidate key here

35
00:01:43,000 --> 00:01:47,000
in the object you return from inside getStaticProps

36
00:01:47,000 --> 00:01:48,000
to tell Next.js

37
00:01:48,000 --> 00:01:52,000
that this page should be regenerated again and again

38
00:01:52,000 --> 00:01:56,000
even after the page was built and deployed

39
00:01:56,000 --> 00:02:01,000
at most every x seconds here at most once every 10 seconds.

40
00:02:02,000 --> 00:02:04,000
Therefore getStaticProps is great

41
00:02:04,000 --> 00:02:08,000
for ensuring that you are pre-rendering pages with data.

42
00:02:09,000 --> 00:02:13,000
If you have dynamic pages with a dynamic parameter

43
00:02:13,000 --> 00:02:18,000
then you also need to let Next.js know how many instances

44
00:02:19,000 --> 00:02:21,000
of that page should be pre-rendered

45
00:02:21,000 --> 00:02:24,000
because it could be an infinite amount in theory.

46
00:02:24,000 --> 00:02:27,000
You do that with getStaticPaths

47
00:02:27,000 --> 00:02:29,000
and you need to add this when using

48
00:02:29,000 --> 00:02:32,000
getStaticProps on such a dynamic page.

49
00:02:32,000 --> 00:02:34,000
Otherwise we'll get an error

50
00:02:34,000 --> 00:02:38,000
because Next.js doesn't know how many pages to prepare.

51
00:02:38,000 --> 00:02:42,000
GetStaticPaths returns an object with a paths' key

52
00:02:42,000 --> 00:02:46,000
which holds an array of param objects in the end

53
00:02:46,000 --> 00:02:49,000
where you basically just make Next.js aware

54
00:02:49,000 --> 00:02:52,000
of all the parameter values

55
00:02:52,000 --> 00:02:55,000
for this dynamic page that should be used

56
00:02:55,000 --> 00:02:58,000
for pre-rendering a page.

57
00:02:58,000 --> 00:03:01,000
And you can also reach out to a file system

58
00:03:01,000 --> 00:03:04,000
or database or whatever you need to do here

59
00:03:04,000 --> 00:03:07,000
and when you do that Next.js will pre-generate

60
00:03:07,000 --> 00:03:11,000
all the paths so all the instances of that page

61
00:03:11,000 --> 00:03:15,000
for the paths you tell it to pre-render.

62
00:03:15,000 --> 00:03:17,000
It will then call getStaticProps

63
00:03:17,000 --> 00:03:20,000
for every page instance that it creates,

64
00:03:20,000 --> 00:03:22,000
you can access the params there as you learned

65
00:03:22,000 --> 00:03:26,000
and then you can fetch and prepare the data there just

66
00:03:26,000 --> 00:03:29,000
as it's needed, return that to the component function,

67
00:03:29,000 --> 00:03:33,000
and then last but not least Next.js will execute

68
00:03:33,000 --> 00:03:36,000
this component function in the build process

69
00:03:36,000 --> 00:03:40,000
or on the server to pre-render this page as well

70
00:03:40,000 --> 00:03:42,000
with the appropriate data.

71
00:03:44,000 --> 00:03:48,000
Sometimes you don't wanna pre-build during the build process

72
00:03:48,000 --> 00:03:50,000
and even when using revalidate

73
00:03:50,000 --> 00:03:53,000
the data might not be updated enough.

74
00:03:53,000 --> 00:03:56,000
Instead you really might want to run logic

75
00:03:56,000 --> 00:04:00,000
for every incoming request either because you need access

76
00:04:00,000 --> 00:04:04,000
to the request or because the data changes all the time.

77
00:04:04,000 --> 00:04:07,000
In such cases, you can use getServerSideProps.

78
00:04:07,000 --> 00:04:11,000
It's an alternative and unlike getStaticProps,

79
00:04:11,000 --> 00:04:14,000
this really runs on the server and only on the server,

80
00:04:14,000 --> 00:04:17,000
not during the build process.

81
00:04:17,000 --> 00:04:21,000
Here you can get access to the request and response objects

82
00:04:21,000 --> 00:04:24,000
to the real node request and response objects

83
00:04:24,000 --> 00:04:27,000
and you still return props to component,

84
00:04:27,000 --> 00:04:29,000
which is then pre-rendered

85
00:04:29,000 --> 00:04:32,000
but pre-rendered on the fly on the Server

86
00:04:34,000 --> 00:04:37,000
You can also do that for dynamic pages

87
00:04:37,000 --> 00:04:39,000
and here you don't need getStaticPaths

88
00:04:39,000 --> 00:04:42,000
because this now really does only execute

89
00:04:42,000 --> 00:04:45,000
when it's needed not in advance.

90
00:04:45,000 --> 00:04:49,000
However sometimes that's all not what you are looking for.

91
00:04:49,000 --> 00:04:51,000
Sometimes you really need to fetch data

92
00:04:51,000 --> 00:04:55,000
from inside the client or you wanna to combine pre-rendering

93
00:04:55,000 --> 00:04:57,000
with client site data fetching.

94
00:04:57,000 --> 00:04:59,000
And that's what we saw in the last lectures.

95
00:04:59,000 --> 00:05:03,000
You can also still write regular React code,

96
00:05:03,000 --> 00:05:07,000
regular React JavaScript code for fetching data

97
00:05:07,000 --> 00:05:09,000
in your component function

98
00:05:09,000 --> 00:05:12,000
and this code will then not be executed on the server

99
00:05:12,000 --> 00:05:15,000
even though the page will still be pre-rendered

100
00:05:15,000 --> 00:05:17,000
but this code will be skipped

101
00:05:17,000 --> 00:05:19,000
since its inside of useEffect typically

102
00:05:19,000 --> 00:05:22,000
instead you'll just get some Snapshot of your page

103
00:05:22,000 --> 00:05:23,000
which is then returned

104
00:05:23,000 --> 00:05:27,000
and that code really only runs in the client.

105
00:05:27,000 --> 00:05:29,000
So when a visitor visits the page

106
00:05:29,000 --> 00:05:33,000
here you can also consider using the useSWR hook

107
00:05:33,000 --> 00:05:36,000
since that can make writing that code a bit easier

108
00:05:36,000 --> 00:05:40,000
and since that is a feature rich custom hook built

109
00:05:40,000 --> 00:05:42,000
by the Next.js team which for example

110
00:05:42,000 --> 00:05:46,000
also automatically re-fetches data if you will lose

111
00:05:46,000 --> 00:05:49,000
and regain focus in your browser tab.

112
00:05:49,000 --> 00:05:51,000
So that can also be nice.

113
00:05:51,000 --> 00:05:54,000
And as you saw you can even still combine that

114
00:05:54,000 --> 00:05:57,000
with preparing and pre-fetching data.

115
00:05:57,000 --> 00:05:59,000
And therefore this was a long module

116
00:05:59,000 --> 00:06:03,000
but data fetching and pre-rendering of pages

117
00:06:03,000 --> 00:06:08,000
with pre-fetched data is another key aspect off Next.js.

118
00:06:09,000 --> 00:06:14,000
The file-based routing was nice and already a great feature

119
00:06:14,000 --> 00:06:17,000
but this here pre-fetching and pre-rendering,

120
00:06:17,000 --> 00:06:18,000
that's the feature

121
00:06:18,000 --> 00:06:21,000
which really makes Next.js super powerful

122
00:06:21,000 --> 00:06:25,000
because now it's easy to optimize pages for search engines,

123
00:06:25,000 --> 00:06:29,000
it's easy to show users some data right from the start

124
00:06:29,000 --> 00:06:34,000
and you can still apply everything you know about React.

125
00:06:34,000 --> 00:06:37,000
And therefore let's now apply what we learned here

126
00:06:37,000 --> 00:06:40,000
to our demo project in the next section

127
00:06:40,000 --> 00:06:43,000
before we then dig deeper into Next again