App Router (server component) static rendering create Vercel ISR functions (no fetch) why?
Unanswered
Alligator mississippiensis posted this in #help-forum
Alligator mississippiensisOP
I have a page in the new app directory, the page contain only JSX
no function, no fetch, just JSX a simple <div>test</div>
why on vercel, the deployment create ISR functions?
I have done something similar in the page router, it doesn't generate ISR function and it only generate static assets. It generate only HTML file.
no function, no fetch, just JSX a simple <div>test</div>
why on vercel, the deployment create ISR functions?
I have done something similar in the page router, it doesn't generate ISR function and it only generate static assets. It generate only HTML file.
16 Replies
Interesting observation, I assume this is mainly due to the fact that the part that is being cached is a server component instead of the whole HTML file
with
/pages dir components are rendered as one independent route while in /app dir, you have nested routes and each route segment represents a function to render out those componentsmaking it act more like a function rather than a static html asset
Alligator mississippiensisOP
The app router is still new to me. I understand the /app dir, we have nested routes and each route segment represents a function. But why if the route segment is fully static like <div>test</div>, why not generate a static html asset even in /app dir.
We can generate a function only if the segment is dynamic
We can generate a function only if the segment is dynamic
if the segment is static, it generate the html asset
well, HTML can't be partial. It still needs to know who is their parent and where does the children goes...
even if the HTML asset is static it would atleast still look like this
function() {
return <div>test</div>
}Alligator mississippiensisOP
I also check the .next output file, it also generate a whole HTML in app router
Alligator mississippiensisOP
app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}The output is correct:
Route (app) Size First Load JS
─ ○ / 141 B 78.5 kB
+ First Load JS shared by all 78.4 kB
Route (app) Size First Load JS
─ ○ / 141 B 78.5 kB
+ First Load JS shared by all 78.4 kB
â—‹ (Static) automatically rendered as static HTML (uses no initial props)
hmm
maybe its just the vercel dev log not yet polished for app dir
may i know why this bothers you?
Alligator mississippiensisOP
I'm just curious, I thought I've understood the new app router. But, it seems I don't understand and somehow lost with the different cache layer