Check out a free preview of the full Build an AI-Powered Fullstack Next.js App, v3 course

The "Revalidation" Lesson is part of the full, Build an AI-Powered Fullstack Next.js App, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott discussed the issues with revalidating data on subsequent routes. Since client and server data are not linked, client-side routes requiring updated data from the server must be revalidated.

Preview
Close

Transcript from the "Revalidation" Lesson

[00:00:00]
>> Now that you've observed the problem of not being able to properly update the page once some data was created, we can quickly fix that problem and move on to creating the editor. So, it's actually just a one line change. It's quite simple to fix, but I just wanted it to exaggerate how much of a problem it is so you can think about it.

[00:00:27]
Really, the only thing we need to do is, anywhere server side really, but specifically in this route, because that's where we're making the change. We just need to tell Next.js. Well, first, you have to understand how Next.js caches data, and what it does with data. Whenever a page like this page here gets data, especially if it's using something like fetch, it's gonna be cached, right?

[00:00:51]
And that's the problem, it's still data, right? We can tell Next.js we want to revalidate that cache, as in clean it and go get it again whenever we make changes. So that's all we have to do. So we can go into our posts and right before we respond, we can say, hey, by the way, can you revalidate this path for me?

[00:01:12]
So you can import revalidate path from next cache, and you can just give it a route. In this case, the route that we wanna revalidate is journal.
>> I know there's something called like use optimistic coming along as an alternative to like revalidate about this last night. Is that something you've spoken to the next folks about?

[00:01:31]
Is that still too premature to really discuss or think about?
>> Yeah, the thing about use optimistic is mostly for server actions that you want to optimistically show updates for. So we're not using server action, so I wouldn't use it. And then it's a hook that you have to use on client side.

[00:01:46]
So, in my opinion, I'm like, why even do the server action if you already have to make a client component to show the user optimistic update? I get it, at that point, the only thing you're saving is the fact that you don't have to make the API route yourself.

[00:02:02]
But it's still making a request over the wire. It's still doing everything else. So you're trading the work from setting up the API route, and instead set up all the things to make sure you can get the data and do validation. So, I don't know if it's worth it, in my opinion.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now