How can I mark a page as dynamic without using fetch or other dynamic-apis?
Answered
Indian mackerel posted this in #help-forum
Indian mackerelOP
I call a server action in my page for the data. This data is dynamic and changes based on the logged in user. How can I tell Nextjs that this page needs to be dynamic? It currently fails during the static generation section of the build proces, as APIs etc are not available. We are using app router.
Answered by Asian black bear
16 Replies
Answer
Asian black bear
Also: don't use server actions to fetch data. In 99% of the cases this is wrong.
Indian mackerelOP
Thanks, what would be the correct way?
Our app connects with a larger API and a Redis instance.
Asian black bear
Data fetching is typically done in your server components.
Indian mackerelOP
Ah hmm, still getting used to the terminology. So I would split up my page.tsx I currently have into a component, which would be a server component by default right? The current setup is page.tsx -> await <action>
Asian black bear
It can be as wasy as
export default async function Page() {
const data = await fetchFromExternalServer()
// ...
}Indian mackerelOP
export default async function ParcelCode(props: ParcelProps) {
const params = await props.params;
try {
const parcel = await getParcelData(params.parcelCode);
return <ParcelDetail parcel={parcel} />;
} catch (error) {
return <div>Error: Parcel not found.</div>;
}
}Asian black bear
Looks reasonable, maybe you're just using the wrong terminology. Is
getParcelData a function marked with 'use server'?Indian mackerelOP
yeah it is
Asian black bear
Don't do that.
Server actions are functions marked that you can call across the client/server boundary and that you call from the client.
It's syntactic sugar for a public API route.
If you call functions on the server itself you don't need the
'use server' directive.Indian mackerelOP
Ah ok
Again thanks for clearing this up 👍