Next.js Discord

Discord Forum

getServerSideProps function does not run

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Hii everyone i'm learning next.js and facing a very weired issue.. can anyone help me to debug why this getServerSideProps does not run. i have this Home component inside the pages 
import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/home.module.css";

interface IData {
  content: string;
  author: string;
  title: string;
}

export const getServerSideProps = (async () => {
  try {
    const data = await fetch("/api/blogs");
    const res = await data.json();
    console.log(res, "this is response");
    return { props: { res } };
  } catch (error) {
    console.error("Error fetching blogs:", error);
    return { props: { res: [] } }; // Return empty array or some default value
  }
}) satisfies GetServerSideProps<{
  res: IData[];
}>;

const Home = (props: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  console.log(props, "Res");
  return (
    <>
      <Head>
        <title>Home</title>
      </Head>
    </>
  );
};

export default Home;
Answered by Giant panda
gSSP doesn't run for arbitrary components, only for top-level pages.
View full answer

25 Replies

Giant panda
gSSP doesn't run for arbitrary components, only for top-level pages.
Answer
American black bearOP
@Giant panda arbitrary components - you means component should be in pages directory
??
if yes then i have Home component inside the page component
Giant panda
Show a screenshot of your project structure and where exactly Home is defined
American black bearOP
here Home is defined in pages
Giant panda
And you are saying that browsing to http://localhost:3000/Home doesn't trigger gSSP?
American black bearOP
here i'm importing home in index.tsx
import Home from "./Home"; export default function Main() { return <Home />; }
and i think this why gssp is not running
Giant panda
Because that's not how you're supposed to do it
The pages directory should only contain pages, nothing else
Components should be be outside of the pages directory
Then my claim from earlier still applies
gSSP only runs for pages
So what you intend to do is to add gSSP to your index.tsx, fetch the data, and pass it down via props to the Home component that you import from say a /components directory
American black bearOP
okay got it.
but still i don't understand my home component present in pages directory then what wrong with it
Giant panda
Because gSSP only runs if you route to a page. You are using Home as a component and not a page.
If you were to navigate to /Home in the browser as I've said it would run
But components you consume aren't supposed to be in the pages directory
American black bearOP
okay got it...you means if next.js is able to define the routes then GSSP will run otherwsie not..here Home component does not have any route that's it's not running
Giant panda
That's wrong.
Your current file Home.tsx is in the pages directory therefore Next maps it as a page to the path /Home
When you are adding the Home component to index.tsx (routable via /) it's just the component and not a page itself. There is no reason for Next to run gSSP of Home because the page you routed to is index.tsx
American black bearOP
OHHH Thank you buddy. you saved my day 😉