Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,439 --> 00:00:06,399
let's go through some of the benefits of
2
00:00:03,840 --> 00:00:09,040
next js
3
00:00:06,399 --> 00:00:11,519
now here is a diagram of a few reasons
4
00:00:09,040 --> 00:00:13,920
that i think makes next year's really
5
00:00:11,519 --> 00:00:16,240
popular now there are many more that
6
00:00:13,920 --> 00:00:18,480
aren't listed here but let's go through
7
00:00:16,240 --> 00:00:21,439
these ones one by one
8
00:00:18,480 --> 00:00:23,680
so first let's take a look at different
9
00:00:21,439 --> 00:00:25,439
rendering techniques and go through them
10
00:00:23,680 --> 00:00:28,480
one by one
11
00:00:25,439 --> 00:00:30,800
with next.js you can choose how you want
12
00:00:28,480 --> 00:00:33,360
to render content on the page
13
00:00:30,800 --> 00:00:35,920
in react like i mentioned before you
14
00:00:33,360 --> 00:00:36,800
will always render content on the client
15
00:00:35,920 --> 00:00:39,440
side
16
00:00:36,800 --> 00:00:42,399
using client-side rendering and nothing
17
00:00:39,440 --> 00:00:44,399
happens on the server but in next yes
18
00:00:42,399 --> 00:00:46,960
you can choose to render your content on
19
00:00:44,399 --> 00:00:49,200
the server and decide based on the
20
00:00:46,960 --> 00:00:50,640
different techniques listed here
21
00:00:49,200 --> 00:00:51,680
so let's go through some of these
22
00:00:50,640 --> 00:00:54,879
techniques
23
00:00:51,680 --> 00:00:57,520
the first one is static side generation
24
00:00:54,879 --> 00:01:00,559
second server side rendering and third
25
00:00:57,520 --> 00:01:03,600
incremental side regeneration now i know
26
00:01:00,559 --> 00:01:06,720
i know these are really big names but
27
00:01:03,600 --> 00:01:09,119
let me explain quickly and i promise you
28
00:01:06,720 --> 00:01:12,640
by the end of this course you will know
29
00:01:09,119 --> 00:01:14,640
exactly what each technique does when to
30
00:01:12,640 --> 00:01:17,600
use them what are some of the pros and
31
00:01:14,640 --> 00:01:20,240
cons of each technique and you would be
32
00:01:17,600 --> 00:01:23,200
able to make that decision for yourself
33
00:01:20,240 --> 00:01:26,400
when you are building a next application
34
00:01:23,200 --> 00:01:29,119
now each technique you can decide to do
35
00:01:26,400 --> 00:01:31,600
per page so you can opt in for static
36
00:01:29,119 --> 00:01:34,479
site generation on one whereas server
37
00:01:31,600 --> 00:01:36,640
side on the other we will learn all
38
00:01:34,479 --> 00:01:38,880
about it later in the course as we build
39
00:01:36,640 --> 00:01:42,000
our coffee connoisseur and netflix
40
00:01:38,880 --> 00:01:44,079
application now first let's take a look
41
00:01:42,000 --> 00:01:45,759
at static site generation
42
00:01:44,079 --> 00:01:46,799
now if you have a lot of marketing
43
00:01:45,759 --> 00:01:49,360
content
44
00:01:46,799 --> 00:01:51,439
blog posts then you would want to use
45
00:01:49,360 --> 00:01:53,520
static site generation
46
00:01:51,439 --> 00:01:56,320
in static site generation
47
00:01:53,520 --> 00:01:58,399
what happens is all your content gets
48
00:01:56,320 --> 00:02:01,360
pre-built on the server
49
00:01:58,399 --> 00:02:03,920
and then the server is going to pass
50
00:02:01,360 --> 00:02:07,040
that content to the client
51
00:02:03,920 --> 00:02:08,720
and all this content is pre-built
52
00:02:07,040 --> 00:02:12,239
and it is cached
53
00:02:08,720 --> 00:02:15,440
so your client is basically fetching
54
00:02:12,239 --> 00:02:18,239
that cached content over and over so you
55
00:02:15,440 --> 00:02:19,520
get a huge performance boost because of
56
00:02:18,239 --> 00:02:23,120
that reason
57
00:02:19,520 --> 00:02:26,000
a good example is a list of products
58
00:02:23,120 --> 00:02:28,160
or a list of blog posts and our
59
00:02:26,000 --> 00:02:30,560
application coffee connoisseur that we
60
00:02:28,160 --> 00:02:32,640
will be building also uses static side
61
00:02:30,560 --> 00:02:34,800
generation there as well
62
00:02:32,640 --> 00:02:36,400
for rendering a list of static coffee
63
00:02:34,800 --> 00:02:39,680
stores
64
00:02:36,400 --> 00:02:42,560
the second is server side rendering now
65
00:02:39,680 --> 00:02:46,080
we can generate the site on the server
66
00:02:42,560 --> 00:02:47,920
if you want fresh data on page refresh
67
00:02:46,080 --> 00:02:50,720
that is server side rendering you are
68
00:02:47,920 --> 00:02:53,440
rendering content on the server
69
00:02:50,720 --> 00:02:55,040
but each time as you refresh the page
70
00:02:53,440 --> 00:02:57,280
you are rendering that content and
71
00:02:55,040 --> 00:02:59,360
refreshing that data again now you would
72
00:02:57,280 --> 00:03:02,319
want to service that render your content
73
00:02:59,360 --> 00:03:05,120
for applications like a dynamic news
74
00:03:02,319 --> 00:03:07,840
feed on netflix and we will be using
75
00:03:05,120 --> 00:03:10,720
server side rendering in netflix
76
00:03:07,840 --> 00:03:11,840
we will be generating our content on the
77
00:03:10,720 --> 00:03:13,599
server
78
00:03:11,840 --> 00:03:15,360
and lastly
79
00:03:13,599 --> 00:03:18,720
my favorite one
80
00:03:15,360 --> 00:03:21,519
is incremental site regeneration
81
00:03:18,720 --> 00:03:24,640
this is the best of both worlds
82
00:03:21,519 --> 00:03:26,480
you get static site generation along
83
00:03:24,640 --> 00:03:28,879
with server side rendering in
84
00:03:26,480 --> 00:03:32,000
incremental site regeneration
85
00:03:28,879 --> 00:03:34,640
you are able to generate the page
86
00:03:32,000 --> 00:03:38,480
in advance as part of the build process
87
00:03:34,640 --> 00:03:41,120
right but you are also able to refetch
88
00:03:38,480 --> 00:03:43,200
new data like how you would in server
89
00:03:41,120 --> 00:03:44,560
side rendering in incremental site
90
00:03:43,200 --> 00:03:47,200
regeneration
91
00:03:44,560 --> 00:03:50,480
and you can also render content on the
92
00:03:47,200 --> 00:03:53,040
server in create react app as well
93
00:03:50,480 --> 00:03:54,400
but it will take a lot more effort for
94
00:03:53,040 --> 00:03:56,319
you to do this
95
00:03:54,400 --> 00:03:57,519
you will first need to learn how you can
96
00:03:56,319 --> 00:03:59,680
do that
97
00:03:57,519 --> 00:04:02,159
build that domain expertise
98
00:03:59,680 --> 00:04:05,120
architect your applications keeping that
99
00:04:02,159 --> 00:04:07,599
in mind and implement it over and over
100
00:04:05,120 --> 00:04:10,959
for all your react applications
101
00:04:07,599 --> 00:04:12,159
but here nextgs just takes care of it
102
00:04:10,959 --> 00:04:14,000
for you
103
00:04:12,159 --> 00:04:16,479
it provides us with all these different
104
00:04:14,000 --> 00:04:19,120
rendering techniques which is a huge
105
00:04:16,479 --> 00:04:21,199
differentiator between create react app
106
00:04:19,120 --> 00:04:22,880
and next as
107
00:04:21,199 --> 00:04:25,440
in order to use these techniques in
108
00:04:22,880 --> 00:04:28,560
create react app you would need a lot
109
00:04:25,440 --> 00:04:31,280
more setup and a lot of configuration
110
00:04:28,560 --> 00:04:32,720
so you can already see how nextgs is so
111
00:04:31,280 --> 00:04:35,440
powerful
112
00:04:32,720 --> 00:04:39,240
now next let's take a look at the second
113
00:04:35,440 --> 00:04:39,240
one which is performance
7995
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.