mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Zack TannerandGitHub
6dff88531a
### What When statically generating a page, Next.js will attempt to render the application tree twice, resulting in unexpected calls to upstream APIs and also slowing down the application during build as it needs to make 2 passes for the same data. ### Why Next.js currently calls React's `renderToReadableStream` API in two spots: once for the HTML render, and again for the Flight render. This is because we want to generate a `.rsc` output for statically generated pages, so that on navigation, we don't need to call the server to retrieve the flight payload. ### How Rather than calling `renderToReadableStream` twice, this refactors the approach to instead only perform it once. This introduces a new type to describe the response from calls to `createFromFetch`: `RSCPayload`, including a set of utils to access the relevant payload data, as it can change depending on calling context. - During the initial SSR response & when statically generating the flight payload, this will be an object containing the top-level props that are used to render `<AppRouter />` - For dynamic pages, this will only return the diffed component tree, which is computed by `walkTreeWithFlightRouterState` traversing the provided `next-router-state-tree` (from the client) to determine where to start rendering (**this is unchanged from today**) - For server actions, this will return the action result, in addition to the same payload as above (**this is also unchanged**) Fixes #58736 Fixes #43254 Fixes #60562 Closes NDX-17
14 lines
314 B
TypeScript
14 lines
314 B
TypeScript
export const revalidate = 1
|
|
|
|
export default async function Home() {
|
|
console.log('home page rendered')
|
|
const randomNumber = await fetch(
|
|
'https://next-data-api-endpoint.vercel.app/api/random'
|
|
).then((res) => res.text())
|
|
return (
|
|
<div>
|
|
<p id="random-number">{randomNumber}</p>
|
|
</div>
|
|
)
|
|
}
|