new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Next.js App Router · all subjects

data-fetching-caching/streaming

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Streaming breaks pages into chunks

Streaming breaks a page into smaller chunks and progressively sends those chunks from the server to the client. This improves initial load time and user experience by not blocking the entire route from rendering until all data is fetched.

Two ways to use streaming

There are two ways to use streaming in a Next.js application: wrapping a page with a loading.js file, or wrapping a component with <Suspense>.

Bots and crawlers receive fully rendered pages

Bots and crawlers are served differently from browsers. Next.js waits for data fetching to finish and sends the fully rendered page instead of streaming it progressively.

Suspense allows granular streaming

<Suspense> allows more granular control over what parts of the page to stream. Content outside the <Suspense> boundary is sent to the client immediately, while dynamic content inside the boundary is streamed in.

Suspense fallback example

Example showing a page with a header sent immediately and blog posts wrapped in <Suspense fallback={<BlogListSkeleton />}> to stream the list in. The header content outside the Suspense boundary is shown first, then the skeleton is displayed while BlogList loads.

Meaningful loading states

An instant loading state is fallback UI shown immediately after navigation. For best user experience, design loading states that are meaningful and help users understand the app is responding. Use skeletons, spinners, or meaningful parts of future screens like cover photos or titles.

Give your agent this brain