All language subtitles for 015 Using Markdown Data For Rendering Posts_Downloadly.ir_en

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.