mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Zack TannerandGitHub
20cf4c07da
This removes the Next logo animation/dimming and replaces it with more explicit states. We also use this UI to show when caches are being warmed (when using Cache Components). When caches are being bypassed in DevTools, we also will show this in the indicator with warning text, indicating that we cannot accurately reflect what can be statically prerendered. https://github.com/user-attachments/assets/665d4f8b-8c01-4def-a60e-bc4ecdd1f879
42 lines
828 B
TypeScript
42 lines
828 B
TypeScript
import { cacheTag } from 'next/cache'
|
|
import { Suspense } from 'react'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div id="navigation-page">
|
|
Hello navigation page!
|
|
<Suspense fallback={<div>Loading</div>}>
|
|
<Component />
|
|
</Suspense>
|
|
<SlowThing />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function Component() {
|
|
const posts = await getBlogPosts()
|
|
return (
|
|
<div>
|
|
{posts.map((post) => (
|
|
<div key={post.id}>{post.content}</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function getBlogPosts() {
|
|
'use cache'
|
|
cacheTag('blog-posts')
|
|
// sleep for 2s
|
|
await new Promise((resolve) => setTimeout(resolve, 2000))
|
|
|
|
return [{ id: 'foo', content: 'bar' }]
|
|
}
|
|
|
|
async function SlowThing() {
|
|
// sleep for 2s
|
|
await new Promise((resolve) => setTimeout(resolve, 2000))
|
|
|
|
return <div>Slow Thing</div>
|
|
}
|