All language subtitles for 029 Module Summary_Downloadly.ir_en

[Maximilian Schwarzm�ller] Now this was a long module

with a lot of key concepts.

In general, this module was about

how Next.js pre-renders pages for us

so that if we view at a page source

we have some data in that page source,

some data which is there right from the start

and which is there for all the visible

to search engine crawlers

which is a key difference

to standard React apps without service side rendering.

Now you did learn

that out of the box Next.js pre-renders your pages.

It does that automatically

but you can also force it to do so by adding getStaticProps

because you add this function

whenever you also wanna pre-fetch data for your component.

So if your page component doesn't need any data

of course you never add getStaticProps typically

because it doesn't add anything to the page then

but if your page does needs data like the list

of products here, then you add getStaticProps

So that during the build process, this data is pre-fetched

and available for the page when it's pre-rendered

so that the pre-rendered page contains pre-fetched data.

Since geStaticProps executes

during the build process

you can execute node js code in there

which wouldn't run in the browser.

For example you can get access

to the file system and read data from files.

Since data can get outdated

after the pages were pre-generated,

you can also add the revalidate key here

in the object you return from inside getStaticProps

to tell Next.js

that this page should be regenerated again and again

even after the page was built and deployed

at most every x seconds here at most once every 10 seconds.

Therefore getStaticProps is great

for ensuring that you are pre-rendering pages with data.

If you have dynamic pages with a dynamic parameter

then you also need to let Next.js know how many instances

of that page should be pre-rendered

because it could be an infinite amount in theory.

You do that with getStaticPaths

and you need to add this when using

getStaticProps on such a dynamic page.

Otherwise we'll get an error

because Next.js doesn't know how many pages to prepare.

GetStaticPaths returns an object with a paths' key

which holds an array of param objects in the end

where you basically just make Next.js aware

of all the parameter values

for this dynamic page that should be used

for pre-rendering a page.

And you can also reach out to a file system

or database or whatever you need to do here

and when you do that Next.js will pre-generate

all the paths so all the instances of that page

for the paths you tell it to pre-render.

It will then call getStaticProps

for every page instance that it creates,

you can access the params there as you learned

and then you can fetch and prepare the data there just

as it's needed, return that to the component function,

and then last but not least Next.js will execute

this component function in the build process

or on the server to pre-render this page as well

with the appropriate data.

Sometimes you don't wanna pre-build during the build process

and even when using revalidate

the data might not be updated enough.

Instead you really might want to run logic

for every incoming request either because you need access

to the request or because the data changes all the time.

In such cases, you can use getServerSideProps.

It's an alternative and unlike getStaticProps,

this really runs on the server and only on the server,

not during the build process.

Here you can get access to the request and response objects

to the real node request and response objects

and you still return props to component,

which is then pre-rendered

but pre-rendered on the fly on the Server

You can also do that for dynamic pages

and here you don't need getStaticPaths

because this now really does only execute

when it's needed not in advance.

However sometimes that's all not what you are looking for.

Sometimes you really need to fetch data

from inside the client or you wanna to combine pre-rendering

with client site data fetching.

And that's what we saw in the last lectures.

You can also still write regular React code,

regular React JavaScript code for fetching data

in your component function

and this code will then not be executed on the server

even though the page will still be pre-rendered

but this code will be skipped

since its inside of useEffect typically

instead you'll just get some Snapshot of your page

which is then returned

and that code really only runs in the client.

So when a visitor visits the page

here you can also consider using the useSWR hook

since that can make writing that code a bit easier

and since that is a feature rich custom hook built

by the Next.js team which for example

also automatically re-fetches data if you will lose

and regain focus in your browser tab.

So that can also be nice.

And as you saw you can even still combine that

with preparing and pre-fetching data.

And therefore this was a long module

but data fetching and pre-rendering of pages

with pre-fetched data is another key aspect off Next.js.

The file-based routing was nice and already a great feature

but this here pre-fetching and pre-rendering,

that's the feature

which really makes Next.js super powerful

because now it's easy to optimize pages for search engines,

it's easy to show users some data right from the start

and you can still apply everything you know about React.

And therefore let's now apply what we learned here

to our demo project in the next section

before we then dig deeper into Next again