[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