To recap, we want to fetch the product data
from our CMS, and display it in our HomePage.
And we want to compare two main options:
fetching the data on the client side,
or doing it on the server side.
Let's start with the server side approach,
that we called option 1,
so we created this "index-1" page.
We mentioned that this is similar to
what we did in our Blog example,
that is we want to pass the "products"
as a prop to our HomePage component.
And then create that special Next.js function,
called "getStaticProps",
that is executed on the server side.
Here we want to return an object with the "props",
containing our "products" data.
And I'm also going to log a message
every time this function is called,
just because this will help us
understand how things work.
Ok, if we save now,
and reload the page,
it looks the same as before
because we're still using this dummy data,
but it is using "getStaticProps".
Now, rather than using this hard-coded data
we want to call the backend API.
We know that this is the URL to get the products,
so let's copy that.
And in getStaticProps we can use "fetch"
to make an HTTP request for that URL.
"fetch" returns a "response" object,
but asynchronously, so we need to "await" it.
And since we know that
the response body is in JSON format,
we can call the "json()" method on the "response",
which is also asynchronous so remember to use "await",
and this return the parsed JSON data,
that in our case is an array of "products".
We're already returning the "products"
inside the "props" below,
so let's save these changes,
and if we reload the page
so it will call "getStaticProps" again,
we can now see six products in the list,
and you can tell that they're the ones
returned by the CMS.
So far so good.
Now, it's always a good idea to extract
the data fetching logic
into a separate module,
just like we did in our Blog example.
So what I'm going to do is go and create
a separate "lib" folder,
again just like in our Blog app.
Here we can create a module
called say "products",
where we'll keep any functions to do with
fetching product data.
Let's create a function called "getProducts",
that we want to be exported and "async".
And here we can basically move
the code we just wrote in "getStaticProps",
to fetch the products from the API.
But from this function we also want to
return the "products".
This way in the HomePage we can
simply call the new "getProducts" function,
that of course we also need to import.
And that should be that.
Let's try reloading the page
to make sure it still works.
Ok. Now, in our console message
we can see all the product data.
Note that each product object
has lots of properties,
because that's what Strapi returns.
But we don't really need all those properties.
In fact right now we're only displaying the "title".
Let's go and simplify that data a little bit,
just to avoid passing around large objects
for no good reason.
Let's write a helper function,
let's call it "stripProduct".
This will take a "product" object
with all the properties returned by the CMS,
and will return a new object
with only the properties we need.
So for now we want the "id"
that's always useful,
and then the "product.title".
Ok. Now that we have this function,
we can use it to transform the "products".
by calling "map" on the array
and passing "stripProduct" as the function to apply.
Ok, let's see what difference this makes.
If we look at the product data again,
you can see that each object only has
"id" and "title" as we wanted.
So that's the data that is passed
from "getStaticProps" to the React component,
as we can see in the server logs as well.
Good. So this is our implementation
for fetching the data on the server side,
in "getStaticProps".
In the next video we'll look at "Option 2",
that is fetching data on the client side.