Currently, I am diving into the official documentation for Next.js and utilizing the App router. On the data fetching patterns page, it explicitly states:
Whenever possible, we recommend fetching data on the server
To adhere to this recommendation, I created a simple function:
import 'server-only'
export async function getData() {
const res = await fetch('http://localhost:3333/<endpoint>');
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return await res.json();
}
However, the API I need to access requires a JWT token in the authorization header, which poses a challenge since I cannot access localStorage on the server-side.
As a solution, I modified my function to accept the token as an input parameter:
import 'server-only'
export async function getData(token) {
const res = await fetch('http://localhost:3333/<endpoint>', {
headers: {
Authorization: `Bearer ${token}`
}
});
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return await res.json();
}
The dilemma arises when trying to utilize this function - I would have to import it within my client component, which is an unsupported pattern. (This resulted in an error when attempted.)
If I proceed with importing this function, I will essentially be executing the data-fetching code solely on the client side, contrary to the initial suggestion of fetching data on the server wherever feasible.
This leads me to my questions:
- Is there a way to transmit the current request context (including HTTP headers) to the server-side function so that I can extract the token on the server?
- Alternatively, am I attempting to deviate from the recommended pattern? Should protected data be fetched on the client side instead of the server side?
Being relatively new to Next.js and frontend development overall, I have been grappling with this issue for some time now and am reaching out for guidance.