Comments (7)
Hi @samcx I have created a video to explain
RSC.CDN.GH65335.mp4
from next.js.
same problem
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
from next.js.
@dankain This is what I get on the latest canary (after doing these exact steps).
- Load in
next start
- Client-side navigate to category 1
- Navigate to
/category/2
Can you confirm if you are seeing the same on the latest canary? →
from next.js.
Yes I have tried on the latest canary and it is the same. You need to go to category 1 and then category 2. Above I just see the navigation to category 2. If you go to both categories you will see there are 2 different rsc requests for the same product data
from next.js.
This is causing issues for me as well, the random rsc string in the end always results in CF CDN cache MISS
from next.js.
I'm trying to understand why the rsc has is different when it is always returning identical data?
In this case the Next-Router-State-Tree and Next-Url will be set on where you are coming from and do not necessarily have an impact on the data need for the page we are going to. The Vary header will again have an impact on the CDN
For some context, the ?_rsc
hash is mean to mirror the Vary
header. It was added because there are CDNs that don't honor the Vary header (example). If these headers don't change, the query parameter will be the same, signaling that given the same request headers, the response will be the same.
The reason the Vary
header exists is because these headers actually can change the response from the server. For example:
- interception routes rely on the
Next-URL
header to decide if the request should respond differently (and return RSC data for the intercepting component). - partial rendering relies on the
next-router-state-tree
header from the client to decide if the server should respond with the shared layout data, or only the page data, to avoid over-fetching and improve performance.
This is obviously not a solution to the issue you're describing, but I wanted to provide some color as to why app router is doing this. If those responses are cached, and the RSC data for a page returns a tree that corresponds with the request from a different page, things will start behaving incorrectly. For example, see:
from next.js.
Thanks @ztanner , that helps with the context. Partial rendering is a great concept, but if it means I can't use a CDN effectively then that is an issue.
The problem with the next-router-state-tree
is it is only something that the server can understand. The state trees for each of my categories and products are all different, only the server knows that they each have the same layout, therefore the transition from category 1 to product 1 or category 2 to product 1 would need identical data, even with partial rendering. Would it be possible to have the same vary header and RSC hash when the data is the same? It would require the client to understand the layouts?
If this is not possible do you have a suggestion on how to deploy next for a global site? Our site is hosted in Europe, but has southern hemisphere customers. Do I now need to somehow push the page building, HTML cache and data cache to an edge location?
from next.js.
Related Issues (20)
- Opentelemetry - Spans for static resources and API pages not part of page load trace
- Enabling `experimental.reactCompiler` causes hydration error when using styled-jsx
- Module not found: Can't resolve '@node-rs/argon2-wasm32-wasi'
- __turbopack_resolve_absolute_path__ is not a function
- window.history.pushState does not work with transitions HOT 2
- ES Modules may not assign module.exports or exports.*, Use ESM export syntax
- Parallel Route Modal closed using router.push cannot open again until hard refresh HOT 1
- "res.status(200).json() is not a function" is this a bug? HOT 2
- next JS 13.0.6 HOT 1
- Component Reinitialization Issue with `loading.tsx` and `revalidateTag` HOT 1
- CSS module of client component is injected to DOM before global css in layout regardless of import order
- Docs: Pages and layouts section not opening (again) HOT 1
- MSW Turbopack fails to import HOT 2
- ReferenceError: window is not defined... in client component? HOT 6
- Next 14 is not working properly in docker on windows with bun, but normal at local terminal HOT 4
- Sourcemaps are not loaded in index pages with a dynamic route level deeper than one
- SVG with icons not updating after change HOT 6
- [backport request] Backport fix of an already-fixed bug of next-swc HOT 5
- FileList is not defined on client component HOT 2
- Memory Leak with Image Optimization in Next.js Docker Environment
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.