Now that we got the getAllPosts
and getFeaturedPosts functions, let's use them.
For example, on the starting page
so that there we can get rid of that DUMMY_POSTS array
and instead we load posts from our own data source.
And when it comes to fetching data for a page,
we also learned how that works.
We wanna use getStaticProps or getServerSideProps.
In reality, of course, we don't need either of the two.
We could also use useEffect inside of our component
and send an HTTP request to some API.
But that means that the pre-rendered page
won't contain any content,
which isn't great for search engines
and in this specific website here,
we would also have a problem.
We have no API.
Our posts are fetched from the file system.
And we can therefore do that in any code
that runs on the server side
and has access to that file system
but we can't do it from inside our components.
Those don't have access to the file system
and there, we also can't send a request to any API
that grants that access
because we have no such API here.
We could build an API route
but why would we do that?
Then we would be able to fetch data
without having it pre-rendered
and we would still have the search engine disadvantage.
Therefore, it definitely makes most sense here
to add the separate getStaticProps function here.
In here, we wanna get all the featured posts
and that's super simple
because in that lib folder in which we just worked,
in that file there, we export a getFeaturedPosts function,
which does just that.
So here in getStaticProps,
we can get our featuredPosts
by calling getFeaturedPosts.
And you just need to make sure
that you add a import,
importing getFeaturedPosts from that lib folder
and the posts-util file.
If you do that, you've got the featuredPosts here
and then you learned earlier in the course
that in getStaticProps,
we should return an object with a props key
where we then can pass any props of our choice
to the component.
Now, here I guess it makes sense
to set a posts prop, which holds those loaded featuredPosts.
And that's already all we have to do in getStaticProps here.
Nothing else is required for this use case.
Now, we could also be using getServerSideProps
to always fetch all the featuredPosts
when a request reaches this page
but that doesn't make sense here I would say.
It will just slow down this page a lot
because we have to go through all the files
and go through all the posts for every request
without gaining much.
Our posts will probably not change every second.
After all, we have to change our Markdown file
to update them.
So they are fairly stable.
Most posts will probably never change.
So getStaticProps makes sense.
Now, we could add the revalidate key here
to make it clear that getStaticProps
should not just be executed once during the build process
as you learned but also at least once every 100 seconds
or every 60 seconds or whatever you want
for a new incoming request.
This would ensure that if our data changed
after deployment, we still regenerate our posts
and we therefore reflect that latest data
without rebuilding and redeploying.
We could do that but again,
our posts will probably not change that much.
So if you wanna set revalidate
to have that built-in rebuilding step,
you wanna definitely set it to a long duration,
maybe 10 minutes or even longer, like half an hour
and here I will not set it at all,
which means getStaticProps
will only be executed once outside of development,
during development it will be executed for every request
but outside of development,
it will only be executed when we build the application
for production and never thereafter.
And I would say this is absolutely fine here
for this scenario.
Okay, so now with that, we have getStaticProps,
we set the posts prop,
which holds the featuredPosts
and that means that in HomePage,
we should accept props
and then pass props.posts as a value
to the posts prop on FeaturedPosts.
If you now save all of that
and we go back to the starting page,
there we should see one featured post now
and now here, the data is actually coming
from our Markdown file.
So if I change something there like the date
from 15th to 16th,
then since we're in development
and getStaticProps runs for every request,
when we'll see that if I reload,
this switched to 16th as well.
So this data is coming from the Markdown file.
And now we can do something similar
in the All Posts page.
Of course, feel free to try this on your own first.
Here is your chance to pause the video
and try it on your own first.
After a short pause, we'll implement it together.
Were you successful?
Let's implement it together on that All Posts page.
There it's very similar to the starting page.
So here in posts, index.js,
we don't wanna use the DUMMY_POSTS any more,
we wanna get rid of that.
Instead, we wanna fetch posts from our actual data source.
And again, for this, I'll use getStaticProps.
So I'll export a function getStaticProps
to fetch my posts here.
Again, getServerSideProps makes no sense for me
because we don't want to fetch all the posts
for every request.
That would not be that great for performance.
Instead, doing it once during the build process
should be enough.
If we ever update our files thereafter
and we wanna reflect those changes,
we just have to rebuild and redeploy
but we're probably not doing that multiple times every day.
And if we ever add a new post,
since it's part of the overall project folder,
we will need to redeploy anyways.
So that also won't be a problem.
Hence here again I will just call getAllPosts
and make sure to add that import
to the getAllPosts function here.
And this then gives us all the posts
and we then just return an object
with the props key, which holds the props object
where we can set posts to allPosts.
Again, we could add revalidate
but for the reasons explained before,
I'll not do it here
because if we add a new post,
we'll have to redeploy anyways
since it's part of the overall project folder
and if we change an existing post,
we can also redeploy.
We're probably not doing that all the time.
Hence now here in the AllPostsPage,
we get our props now
and we now use props.posts,
since I used posts here as a value for posts
on AllPosts and yes, that is a lot of posts, I know.
But now with that, if we save this,
and reload the All Posts page,
we only got one post left here
and that is that one single post
for which we added a Markdown file.
Let's now work on the single post page
and let's fetch the actual post data
from the Markdown file here as well
and let's make sure that everything is output correctly.