Next.js Discord

Discord Forum

How can I invoke getServerSideProps in the page.tsx which located in app/

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Next.js version: 14.0.4, App router

Question description:
I have a navbar on which I want display user login status, and I avoid embeding the client logic which invoking useEffect() and so on within the navbar, hence I have serval solutions and corresponding problem as follew:
1.
SOLUTIONS:
I prepare for invoking getServerSideProps() in each page and pass the data which retrieved in getServerSideProps to the page component.
PROBLEM:
a error risen within the root page which located in the app directory directly, the error is: "getServerSideProps" is not supported in app/.
I don't know how to fix it, Could you help me?

2.
SOLUTIONS:
I prepare for invoking redirect() in the root page, and in the dest page I will invoke getServerSideProps() to get data
PROBLEMS:
I want to know is there any best practice?

I am a newbie in Next.js, Please help, Thank you very much.

21 Replies

@Collared Plover Hi there, are you using app router?
American black bearOP
Thank you for your reply, Yes, I used app router.
@American black bear Thank you for your reply, Yes, I used app router.
Collared Plover
getServerSideProps doesn't function within the app router; instead, you must create a function within a server component to fetch data and pass it as a prop to client components.
@Collared Plover getServerSideProps doesn't function within the app router; instead, you must create a function within a server component to fetch data and pass it as a prop to client components.
American black bearOP
The navbar is invoked within RootLayout, hence how can I get the login status in Navbar? I avoid embeding client logic in the navbar.
@American black bear The navbar is invoked within RootLayout, hence how can I get the login status in Navbar? I avoid embeding client logic in the navbar.
Collared Plover
To address the error "getServerSideProps" is not supported in "app/", you can create a server component with a function responsible for fetching data. Export this data to your client component, which, in this case, could be your navbar component. Alternatively, if applicable, you can pass this data directly into your navbar component.
@Collared Plover To address the error "getServerSideProps" is not supported in "app/", you can create a server component with a function responsible for fetching data. Export this data to your client component, which, in this case, could be your navbar component. Alternatively, if applicable, you can pass this data directly into your navbar component.
American black bearOP
Thank you for your reply, Thank very much.
I am sorry that I am not very clearly the processing, can u do me a favor and kindly give me a simple example, I will study the code in more detail, please.
@Collared Plover Sure, 2 min
American black bearOP
Thank you!!!!
@American black bear Thank you!!!!
Collared Plover
Take this code as an example:
"use server"

export async function fetchData():{
  try {
    // Fetch data from your API route or database
    const { result, error } = await fetchData();

    if (error || !result) {
      // If there's an error or no result, throw an error to activate the error boundary
      throw new Error("Failed to fetch data");
    }

    // Return the projects data
    return result; // Assuming `result` is an array of projects data
  } catch (error) {
    // Catch any errors and log them
    console.error("Error fetching blogs:", error);

    // Return an empty object if there's an error
    return [];
  }
}
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const loginStatus = await fetchData()
  return (
    <html lang="en">
      <body
        className={`bg-light2 dark:bg-[#121212] w-full min-h-screen ${montserrat.className}`}>
        <ThemeClient>
          <Navbar loginStatus={loginstatus}/> {"This is a navbar component"}
          {children}
          <Footer />
        </ThemeClient>
      </body>
    </html>
  );
}
export default function Navbar({loginStatus}){
  return(
    <div>{loginStatus}</div>
  )
}
@Collared Plover Study: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
American black bearOP
Thank you, I am reading the documents now.
@Collared Plover Study: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
American black bearOP
Sorry, I am trouble you again, In your solution, the function fetchData can not receive a request parameter, hence I can not calculate the user's log in status.is there any misunderstanding about it?
@American black bear Sorry, I am trouble you again, In your solution, the function fetchData can not receive a request parameter, hence I can not calculate the user's log in status.is there any misunderstanding about it?
Collared Plover
The function I suggested was simply to demonstrate how to implement the passing down to the client component. I have no idea what you have in your own function.
@Collared Plover The function I suggested was simply to demonstrate how to implement the passing down to the client component. I have no idea what you have in your own function.
American black bearOP
Yes, Thank you for your reply, I will study it and try to find a solution base your code.
@Collared Plover Share this code
American black bearOP
I read the docuement you provided and I found that I can invoke cookies() to get some properties when I used server actions.
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies
@Collared Plover Share this code
American black bearOP
I am going outside to airport to pick my parents up, If any questions please post me here. I am very glad to meet you and Thank you for your help.