Exercise: Caching Deep Dive

Let's get our hands dirty with Next.js caching strategies! In this exercise, we'll set up a mock API and observe how Next.js handles data caching. The goal is to understand how caching works and how to purge the cache when the data changes.

Steps:

1. Sign up for a Mockapi account (it's free, don't worry!)
2. Create a new endpoint called products
3. Add some cool products to your endpoint (go wild!)
4. Grab that endpoint URL
5. Replace the URL in the code below with yours
6. In the MockAPI dashboard, generate a bunch of products
7. Check out how the number of products in your app matches
8. Now, try changing the number of products again... Wait, what? It's not updating?

What's going on?

Welcome to the world of caching! In Next.js 16, data fetched from APIs is cached by default. It's like your app is saying, "I've seen this before, I'll just use what I remember."

To see the new data, we need to tell Next.js to forget what it knows and look again. That's where the 'Purge Cache' button comes in. Give it a click and watch the magic happen!

Acceptance Criteria:

1. Create a MockAPI account and set up a endpoint

Play around with the demo and see how it affects your app's behavior!