getServerSideProps() doesn't run.
Answered
Asian paper wasp posted this in #help-forum
Asian paper waspOP
I added console.log() functions to understand what is happening but nothing logs to the console, neither it throws an error.
import getTopicPage from "@/app/lib/getTopicPage";
type Props = {
params: {
topic: string;
pageNumber: string;
};
};
export default function TopicPage(props: any) {
return <div>{props.data}</div>;
}
export async function getServerSideProps(props: Props) {
const { topic, pageNumber } = props.params;
console.log(topic, pageNumber);
const data = await getTopicPage(topic, pageNumber);
console.log(data);
return { props: { data } };
}
Answered by Hong
The App Router no longer uses 'getServerSideProps' as it is now a React server component.
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app
5 Replies
Asian paper waspOP
Maybe /character/1 doesn't trigger the page?
The App Router no longer uses 'getServerSideProps' as it is now a React server component.
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app
Answer
You can convert the page to async function by adding the async keyword. And
await getTopicPage
directly. It is server side.About the dynamic routes:
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Asian paper waspOP
I thought is was client side even though I knew this method. Thank you @Hong