Comments (9)
Hi,
fetch
in non-browser environments, necessarily requires an absolute URL to work.
You are setting yourself up for errors and problems, read more here: https://nextjs-faq.com/fetch-api-in-rsc
from next.js.
Isn't there like a HydrationBoundary component in that package?
Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well
from next.js.
Isn't there like a HydrationBoundary component in that package?
Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well
Yeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz
What I want to know is the solution for this problem. Is this issue related to react query? Thanks
The solution is on the docs for that package
from next.js.
Isn't there like a HydrationBoundary component in that package?
Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very wellYeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz
What I want to know is the solution for this problem. Is this issue related to react query? ThanksThe solution is on the docs for that package
Sounds good.
What is the solution if we don't use react-query and just fetch data in useEffect or anywhere in client side?
Then this won't be a problem. The callback of useEffect is not run during SSR, only on the client.
from next.js.
Hi,
fetch
in non-browser environments, necessarily requires an absolute URL to work.You are setting yourself up for errors and problems, read more here: https://nextjs-faq.com/fetch-api-in-rsc
So what will be the soluton?
I am calling the api on the client
component. It's fine on the localhost. But in build, it throws error. I even use absolute url but the problem is:
- It fails on vercel build without
absolute url
- Without build, how can I have the
absolute url
?
from next.js.
Isn't there like a HydrationBoundary component in that package?
Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very well
Yeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz
What I want to know is the solution for this problem. Is this issue related to react query? Thanks
from next.js.
Isn't there like a HydrationBoundary component in that package?
Get the data you need, directly from source, and pass it to the hydration boundary as shown, then consume it with the hooks the package provides.
I think you are fundamentally misunderstanding something here. As you point out, in the vanilla case, there cannot be anyone handling the api request during build time, because the server is being built at that time as well.
Locally, the fetch cache is tricking you, because it stores the development time result. Try removing .next and rebuilding locally, it'll fail too.
What's more, within a server side context, how can fetch know, relative to what to make the request. In the browser it can make some assumptions about the baseURL, from some document properties, but on the server, at the end of the day, it is just a Node.js script running.
Alternatively, you could disable the query on SSR? but that's like, not good... it has been some months since I used that package too, so I am a bit rusty, but reading the docs, it does sound like they accommodate this use case very wellYeah, as I posted the example above: #66330 (comment) , it shows error on both environment. You can check the code that I shared on stackblitz
What I want to know is the solution for this problem. Is this issue related to react query? ThanksThe solution is on the docs for that package
Sounds good.
What is the solution if we don't use react-query and just fetch data in useEffect or anywhere in client side?
from next.js.
Closing this as guidance has been provided above to use the absolute URL versus the relative URL when making a fetch
from client components.
from next.js.
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
from next.js.
Related Issues (20)
- Default hostname for "next start" differs from documentation
- Docs: Migration from vite shows app router docs HOT 1
- How to use generated "Route" type (from "typedRoutes") with dynamic routes
- Enabling Draft Mode Not Working in Next.js 14.2.5
- Re-exported modules from index.ts are not tree shaken
- v14 npm run lint (eslint+typescript) Not implemented correctly HOT 3
- `app/icon.tsx` and `npm run dev` with `output: "export"` HOT 2
- Next.js App Directory: Link Component Crashes on First Load with Storyblok Integration
- Docs: learn -> improving-accessibility, missing something about accessiblity HOT 1
- postcss.config.js not work with type module
- Use intercepting and parallel route with root level not working HOT 1
- Next.js downloads from fonts.googleapis.com during build HOT 1
- Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node HOT 1
- Can't use Intercepting and Parallel routes in root level HOT 1
- Error: You cannot use both an required and optional catch-all route
- Error: You cannot use both an required and optional catch-all route
- Incorrect caching
- Docs: Missing custom Partytown configuration for `Script` with `strategy="worker"`
- Endless issues of Error: Cannot find module '....\.next\server\vendor-chunks\lib\worker.js'
- Conditional building pages with export: output is not supported
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.