Open rijk opened 7 months ago
Since filing this issue, I've learned that some of my assumptions were incorrect.
cookies()
does not prevent the rest of the tree from being rerendered. This will be possible in the future with Partial Prerendering, but that's still experimental and really not ready for production yet. Point of criticism:
<Cart>
component in the nav makes all pages render dynamically. This adds ~200ms to every page load for every user (even if the fetch data is cached) compared to static, which is just unacceptable for ecommerce. This tradeoff is not communicated anywhere.Here's the build output:
✓ Generating static pages (9/9)
✓ Collecting build traces
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ ○ / 162 B 86.1 kB
├ ○ /_not-found 162 B 86.1 kB
├ ● /dynamic/[dynamic] 162 B 86.1 kB
├ ├ /dynamic/three
├ └ /dynamic/four
├ ○ /one 162 B 86.1 kB
└ ○ /two 162 B 86.1 kB
+ First Load JS shared by all 85.9 kB
├ chunks/533-a64464b27ba4c7cf.js 30.4 kB
├ chunks/7c09da68-8da926f2fb3b7d56.js 53.6 kB
└ other shared chunks (total) 1.84 kB
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses getStaticProps)
Note that everything looks good (static), and there is no mention that the pages will be "deopted" into dynamic mode during runtime. Let alone why. It would be very helpful if this would be detected and communicated here, something like:
[!] <Cart> component calls `cookies()` which will change this page to dynamic rendering
Link to the code that reproduces this issue
https://github.com/rijk/next-debug-fetch-cache
To Reproduce
CACHE_BUSTER
key in/app/constants.ts
Current vs. Expected behavior
Current behavior Navigating to e.g. One for the first time after building takes ~5s.
Expected behavior Navigating to e.g. One for the first time after building takes ms because the
fetch
is served from the build's Data Cache.Background When the tree contains a component that uses e.g.
cookies()
, the route is opted into dynamic rendering at request time. To simulate this, I added a<Cart>
component that accesses the cookies. Without this component, the whole app is fully static.Every page contains a fetch that artificially delays rendering, but can and should be handled by the Data Cache. However, when deployed on Vercel I found that it is not using the values cached at build time, but rather does a new fetch the first time you access the page. Afterwards, the fetches are served from the cache (no 5s delay after refreshing).
Sidenote I'd also expect the routes with data cache to perform more closely to full route cache. Especially least when they can be prefetched. Navigating to Home is instant, navigating to One or Two takes about 200ms and shows the loading fallback.
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, Data fetching (gS(S)P, getInitialProps)
Which stage(s) are affected? (Select all that apply)
Vercel (Deployed)
Additional context
This happens on both the normal and edge runtime.