docs: add missing links and imports to cacheLife and cacheTag for prerender-missing-suspense error (#79247)

devjiwonchoi · web-flow · commit 6258af666b1a · 2025-05-15T21:28:50.000+02:00
One of the important resources for this message is `cacheLife` and
`cacheTag`, but the links were missing, and the snippet omitted imports,
which newcomers won't know how to import unless looking up.
diff --git a/errors/next-prerender-missing-suspense.mdx b/errors/next-prerender-missing-suspense.mdx
@@ -34,6 +34,9 @@ export default async function Page() {
 After:
 
 ```jsx filename="app/page.js"
+import { unstable_cacheTag as cacheTag } from 'next/cache'
+import { unstable_cacheLife as cacheLife } from 'next/cache'
+
 async function getRecentArticles() {
   "use cache"
   // This cache can be revalidated by webhook or server action
@@ -212,13 +215,15 @@ Alternatively you can add a Suspense boundary above the component that is access
 
 ### Short-lived Caches
 
-`"use cache"` allows you to describe a `cacheLife()` that might be too short to be practical to prerender. The utility of doing this is that it can still describe a non-zero caching time for the client router cache to reuse the cache entry in the browser and it can also be useful for protecting upstream APIs while experiencing high request traffic.
+`"use cache"` allows you to describe a [`cacheLife()`](/docs/app/api-reference/functions/cacheLife) that might be too short to be practical to prerender. The utility of doing this is that it can still describe a non-zero caching time for the client router cache to reuse the cache entry in the browser and it can also be useful for protecting upstream APIs while experiencing high request traffic.
 
 If you expected the `"use cache"` entry to be prerenderable try describing a slightly longer `cacheLife()`.
 
 Before:
 
 ```jsx filename="app/page.js"
+import { unstable_cacheLife as cacheLife } from 'next/cache'
+
 async function getDashboard() {
   "use cache"
   // This cache will revalidate after 1 second. It is so short
@@ -237,6 +242,8 @@ export default async function Page() {
 After:
 
 ```jsx filename="app/page.js"
+import { unstable_cacheLife as cacheLife } from 'next/cache'
+
 async function getDashboard() {
   "use cache"
   // This cache will revalidate after 1 minute. It's long enough that
@@ -260,3 +267,5 @@ Alternatively you can add a Suspense boundary above the component that is access
 - [`cookies` function](/docs/app/api-reference/functions/cookies)
 - [`draftMode` function](/docs/app/api-reference/functions/draft-mode)
 - [`connection` function](/docs/app/api-reference/functions/connection)
+- [`cacheLife` function](/docs/app/api-reference/functions/cacheLife)
+- [`cacheTag` function](/docs/app/api-reference/functions/cacheTag)
