-
Notifications
You must be signed in to change notification settings - Fork 27.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
use
doesn't work in async
Server Component
#44778
Comments
First thing, i don't think Secondly in your code you return directly the use, which i don't think is a good pattern ? import {use} from 'react';
export default function Index() {
const status = use(
fetch('https://dog.ceo/api/breeds/image/random').then(
(response) => response.status
)
);
return status;
} And if you have multiple async operations, just call use multiple times : import {use} from 'react';
export default function Index() {
const status = use(
fetch('https://dog.ceo/api/breeds/image/random').then(
(response) => response.status
)
);
const result2 = use(async () => { /*... do something async here */ });
return status;
} |
Hey, thanks for your reply!
As mentioned in my issue I understand that in an async component you'd typically use
That doesn't make a difference. |
I believe what @Fredkiss3 was pointing out is that In your case, your shared library code would actually be the fetch call itself, exclusive of the keywords used to handle promises. To make this example clearer, extract the fetch call to a separate invokable function which returns a promise. // api.js
export function getApiStatus() {
return fetch('https://dog.ceo/api/breeds/image/random').then(
(response) => response.status
)
} Now you can easily share that code between the client and server using a pattern similar to the examples below. // Client component
'use client';
import { use } from 'react';
import { getApiStatus } from 'api.js'
function MyClientComponent() {
const responseStatus = use(getApiStatus())
return <div>API Status: {responseStatus}</div>
} // Server component
import { getApiStatus } from 'api.js'
async function MyServerComponent() {
const responseStatus = await getApiStatus()
return <div>API Status: {responseStatus}</div>
} I hope this makes the intent of these APIs clearer. |
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://github.com/amannn/nextjs-bug-use-server
To Reproduce
npm run dev
Describe the Bug
If I make use of use in an async component, this throws:
Expected Behavior
I understand that in an async component you'd typically use
async
/await
. However for reusable library code that can be executed either on the server or the client side, it would be very helpful ifuse
can be called in server code as well.Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: