We set up the local Strapi server,
with some product data already pre-loaded.
And we've seen how we can call its REST API
to get the list of products.
Now, let's think about how we can fetch
this product data from our Next.js app.
Here I already have the Next.js development server
running in a terminal,
so we can switch to our Shop website in the browser,
and resume developing it
from where we left it before looking at Strapi.
Let's start by preparing the UI
to display the products.
For that I'm going to quickly add
some dummy product data here,
just so we can focus on the UI for now.
Each product will be an object
with an "id" and a "title".
Let me duplicate this line
and add a second product.
Ok. Now, let's log a message
whenever this component is rendered,
including the "products", so later on
we can check if we're fetching the right data.
And now we can add the user interface.
I'm going to keep it simple
and just use an unordered list.
Then we want a list item for each product,
so we can "map" over the "products" array,
and transform each "product" into a list item element
that shows the "product.title".
We also need a unique key for each list item,
and we can use the "product.id" for that.
Ok, so if we save
we'll see our two products listed in the page.
Now, the question is:
how do we get the real product data?
We know that we can call this API endpoint
to get the list of products,
but what's the best way to make this call
in our Next.js app?
There are basically two main options:
we can fetch the data on the server side,
or on the client side.
What I'd like to do is try out all the options
so that we can then compare them.
What I'm going to do is actually
make a few copies of this "index" page,
"index-1" will be our "Option 1",
that is to fetch the products on the server side.
This is pretty much the same approach we took
in our Blog example,
when loading the post data.
In other words, we can fetch the data
in the "getStaticProps" function.
So that's option 1.
Now, let's create another copy of this page,
for "Option 2".
And this is about
fetching the products on the client side.
By this I mean doing what you would do
in a regular React app:
make an HTTP request from the browser
when this component is mounted,
typically in an "useEffect" React hook.
So this is the choice we face:
client side vs server side.
Now, we've already seen how "getStaticProps" works.
So if you want to try and implement
this "Option 1" by yourself,
feel free to do that.
To actually make the HTTP request
we can use the Fetch API.
Now, there's little caveat here,
in that Fetch is a browser API.
When our code runs in the browser
there is a global "fetch" function available.
But the same is not true
when our code runs on the server.
In Node.js there is no global "fetch".
So normally what you would do
if you wanted to use "fetch" in Node.js
is install a package such as "node-fetch".
The good news is that
Next.js already includes this package,
and makes "fetch" available as a global function
even in server side code.
So in your "getStaticProps" you can simply
call "fetch", without importing it first.
See if you can write the code
for fetching the product data in "getStaticProps".
And in the next video I'll show you my solution.