ProNextJS
    Loading
    lesson

    Implementing NextJS 15's Cache Features

    Jack HerringtonJack Herrington

    We're going to update our Next.js v15 app to use the new cache tag features. We'll replace the revalidate tag with the expire tag and bring in the new cache tag.

    Updating the Cache System

    First, let's change revalidate to expire. Then, we'll replace the unstable cache tag with the new cache tag. You'll notice that we don't need to do any complex cache operations like we used to in previous versions of Next.js.

    Now, let's update our date example:

    1. Remove the old date code and replace it with the new date code.
    2. Add the "use cache" and use the cacheTag with a custom name, like cache-tag-date.
    import { unstable_cacheTag as cacheTag, expireTag } from "next/cache";
import CacheTagInvalidateButton from "./cache-invalidate-button";

export default async function DateCachedTag() {
	"use cache";
	cacheTag("cached-tag-date");

	async function invalidate() {
		"use server";
		await expireTag("cached-tag-date");
	}

	const date = new Date();

	return (
		<div className="flex gap-5">
			<div>Cached Date: {date.toLocaleString()}</div>
			<CacheTagInvalidateButton invalidate={invalidate} />
		</div>
	);
}

    With these changes, we can get rid of the cachedDate function. The new "use cache" simplifies the caching process, making it less clunky and more versatile. It works with dynamic data, fetched data, and even database data.

    In the next segment, we'll connect our Next.js v15 app to a database and explore caching with database requests.

    Transcript