In the previous step
we added the "fallback: blocking" option, so that
if we add a new product in our CMS
the page for that new product
will be generated automatically.
More accurately, when we request
the page for the product with id "8",
and that page doesn't exist yet
then Next.js will try to generate it.
But what happens if we request an id
that doesn't actually exist, like "99"?
At the moment things don't work very well,
because we get a 500 Internal Server Error.
So, what's going on now?
Let's look at the server logs.
The first line is "FetchError"
"invalid json response body at"
the URL with "products/99".
So, because we set fallback to "blocking"
whenever we request a page
that hasn't already been generated,
Next.js will call the
getStaticProps function with that "id".
and in "getStaticProps" we call "getProduct"
which makes an HTTP request to the CMS API.
Now, this CMS endpoint usually returns
a JSON object with the product data.
But if request an "id" that doesn't exist, like 99
Then what it returns is a 404 response,
with a body that's not JSON.
It's just plain text saying "Not Found".
So when our code tries to parse the response as JSON
it fails, because it's not in JSON format.
In fact, in this code we are missing
any sort of error handling at the moment.
What we should do before trying to parse the JSON
is check that the response is "ok".
And if it's not "ok"
the best thing is probably to throw an Error.
Let's say "request failed",
and then we can include the "status" code.
Now, to test this I need to restart the server
because it's currently running in production mode.
We should be able to test this in dev mode.
Let's try reloading product 99 now.
This time we see our own error,
that at least is more informative.
But ideally what we'd like to do
is not to show an error at all.
If a product doesn't exist
we should return a 404 not found page.
And we can do that by modifying "getStaticProps".
First of all we want to "catch"
any errors that may happen
when trying to fetch the product data.
And if an error occurs
instead of returning some "props",
we can set a special flag called "notFound"
in the object returned by this function.
And this will tell Next.js
to return its standard 404 page,
as we can see straight away.
This is the appropriate page,
because this product simply doesn't exist,
while "Interval Server Error" suggested
that there's something wrong with our server.
Just to check, if we request a product
that does exist, like "1",
this still works fine.
It's only if we request a product "id"
that doesn't exist that we get a 404 page.
Ok. So this is how to return a "notFound" page
from "getStaticProps",
which is something you should think about
whenever you enable the "fallback" mode
in "getStaticPaths".
Now, unfortunately this code still isn't
handling all error conditions properly.
What happens if, rather than
the product id being incorrect,
the request fails because
the Next.js app cannot connect to the CMS API?
I'll simulate this condition
by stopping the Strapi server temporarily.
And if we try reloading the page now,
actually, this is not quite
what I wanted to show you.
What's happening now is that
it failed when calling the "/products" endpoint,
so not when fetching
a single product in getStaticProps,
but when getting all the products,
in "getStaticPaths".
And this happens because
I'm running the server in dev mode
so it will call "getStaticPaths" every time.
What I need to do is
restart the Strapi server first,
then stop the Next.js server,
rebuild the application,
and finally run it in production mode.
Only in this way we can test
what happens in this failure mode.
Now, if we request the first product,
of course we see the expected page.
But now I'm going back to the Strapi server
and stop it, so the Next.js app
can no longer connect to it.
Remember that this page
also uses Incremental Static Regeneration,
so if I keep refreshing it
after 30 seconds it will try to fetch
new data from the CMS.
And when that happens, surprise surprise!
We get a 404 not found page.
And we'll keep getting a 404
for as long as the CMS is down.
Now, this is quite a subtle bug in our app.
404 means the product doesn't exist,
but we know that it does exist,
it's just that the CMS is currently unavailable.
And, if we return 404 to a search bot for example,
it will interpret it to mean that
this page no longer exists.
So our product will be removed
from the search engine results,
which is not good for our business.
What we'll need to do is
modify our "getStaticProps" function
to only return "notFound"
when the product doesn't exist,
not for every possible error.
And we'll do that in the next video.