Original subtitles

let's go through some of the benefits of

next js

now here is a diagram of a few reasons

that i think makes next year's really

popular now there are many more that

aren't listed here but let's go through

these ones one by one

so first let's take a look at different

rendering techniques and go through them

one by one

with next.js you can choose how you want

to render content on the page

in react like i mentioned before you

will always render content on the client

side

using client-side rendering and nothing

happens on the server but in next yes

you can choose to render your content on

the server and decide based on the

different techniques listed here

so let's go through some of these

techniques

the first one is static side generation

second server side rendering and third

incremental side regeneration now i know

i know these are really big names but

let me explain quickly and i promise you

by the end of this course you will know

exactly what each technique does when to

use them what are some of the pros and

cons of each technique and you would be

able to make that decision for yourself

when you are building a next application

now each technique you can decide to do

per page so you can opt in for static

site generation on one whereas server

side on the other we will learn all

about it later in the course as we build

our coffee connoisseur and netflix

application now first let's take a look

at static site generation

now if you have a lot of marketing

content

blog posts then you would want to use

static site generation

in static site generation

what happens is all your content gets

pre-built on the server

and then the server is going to pass

that content to the client

and all this content is pre-built

and it is cached

so your client is basically fetching

that cached content over and over so you

get a huge performance boost because of

that reason

a good example is a list of products

or a list of blog posts and our

application coffee connoisseur that we

will be building also uses static side

generation there as well

for rendering a list of static coffee

stores

the second is server side rendering now

we can generate the site on the server

if you want fresh data on page refresh

that is server side rendering you are

rendering content on the server

but each time as you refresh the page

you are rendering that content and

refreshing that data again now you would

want to service that render your content

for applications like a dynamic news

feed on netflix and we will be using

server side rendering in netflix

we will be generating our content on the

server

and lastly

my favorite one

is incremental site regeneration

this is the best of both worlds

you get static site generation along

with server side rendering in

incremental site regeneration

you are able to generate the page

in advance as part of the build process

right but you are also able to refetch

new data like how you would in server

side rendering in incremental site

regeneration

and you can also render content on the

server in create react app as well

but it will take a lot more effort for

you to do this

you will first need to learn how you can

do that

build that domain expertise

architect your applications keeping that

in mind and implement it over and over

for all your react applications

but here nextgs just takes care of it

for you

it provides us with all these different

rendering techniques which is a huge

differentiator between create react app

and next as

in order to use these techniques in

create react app you would need a lot

more setup and a lot of configuration

so you can already see how nextgs is so

powerful

now next let's take a look at the second

one which is performance