2026/6/27-

This is not necessarily bad, and it can work well for content-driven websites like newspapers and blogs. But it does make the experience "feel like a website". It's not snappy. Compare this to how client-driven apps do navigations:

1. You click a link.

2. Instantly, you see a shell of the next page (with some data still loading).

3. Then the server responds, and the next page fully reveals.

aumy.icon そうですわね。でも元のwebsite like behaviorがかなり悪いかというとそうでもなくて、standard websiteはMPAつまりserver side navigationしてるからwebブラウザのローディングがネイティブに発火しててclickというuser actionに対するfeedbackが即座に出ているのが偉いという話じゃないですか〜

To try these new behaviors, enable the Cache Components flag:

Over the last year, we've been simplifying Next.js back to its roots: dynamic by default, with no hidden or implicit caching. This flag enables those new behaviors, and it will become a default in a future major version of Next.js.

aumy.icon 草。

Now, when a route awaits some data on the server, you will be presented with a choice between a few options:

aumy.icon 例えばこういうの

code:ts

import { readFile } from "node:fs/promises";

export default async function Home() {

const file = await readFile("../AGENTS.md", "utf-8");

return (

<div>

ウェイウェイ

<pre>

<code>

{file}

</code>

</pre>

</div>

);

}

https://scrapbox.io/files/6a3f6eec2ba3627f4ed51777.png

aumy.icon これ面白すぎる！！！！

code:block.md

Apply the Block "Allow blocking route" fix to the Next.js Insight raised in this project.

Steps:

1. The failing code is in the error block below — it may be a data-access call, a hook call, a metadata or viewport export, or a component. The fix applies to that exact code; don't touch unrelated files.

2. Read the rule docs at https://nextjs.org/docs/messages/blocking-prerender-dynamic for the full Insight explanation, then read the fix section at https://nextjs.org/docs/messages/blocking-prerender-dynamic#allow-blocking-route. Pick the pattern under "### Patterns" that matches the failing code, then read "### Gotchas" before editing — they list constraints that are easy to miss. Use the canonical imports and code shape from the page; don't improvise variations.

3. Apply the chosen pattern to the code identified in step 1.

## Error Type

Blocking Route

## Error Message

Route "/": Next.js encountered uncached data during prerendering.

fetch(...) or connection() accessed outside of <Suspense> prevents the route from being prerendered, blocking the page load and leading to a slower user experience.

Ways to fix this:

- stream Provide a placeholder with <Suspense fallback={...}> around the data access

https://nextjs.org/docs/messages/blocking-prerender-dynamic#wrap-in-or-move-into-suspense

- cache Cache the data access with "use cache" (does not apply to connection())

https://nextjs.org/docs/messages/blocking-prerender-dynamic#cache-the-component-or-data

- block Set export const instant = false to silence this warning and allow a blocking route

https://nextjs.org/docs/messages/blocking-prerender-dynamic#allow-blocking-route

Next.js version: 16.3.0-preview.5 (Turbopack)

To make a navigation instant, you "turn" an asynchronous operation into something that can be available instantly:

aumy.icon 明示的に非同期を有効にすることでinstant navigationになる

<Suspense> を使うことでstreamする

Streaming SSR

つまりデータに依存しない部分を先に返してsuspenseの中は後から送付する

"use cache" ディレクティブ（use cache）でキャッシュする

However, sometimes you might want to make a certain navigation server-bound. For example, a blog might choose to never show a loading shell for posts. For those cases, you can tell Next.js that you want this navigation to Block:

aumy.icon 明示的にblockしたい場合 export const instant = false; する

https://scrapbox.io/files/6a3f74bf2ba3627f4ed5234a.png

aumy.icon クソ便利やんお前

昨日引っかかって…

aumy.icon Playwrightでinstantにnavigationできることを検証できる

direct visit