#How do I do the equivalent of getStaticProps in app router?

11 messages · Page 1 of 1 (latest)

mild comet
#

I've been able to use generateStaticParams to create routes at build time, how do I populate my pages with data at build time and create a partly static site?

molten meteorBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tribal vigil
#

You've to fetch data in server component, pass to client component

# 
// app/posts/[id]/page.tsx

// Function to fetch data
async function getPostData(id: string) {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    cache: 'force-cache', // Ensures data is fetched at build time
  });

  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function PostPage({ params }: { params: { id: string } }) {
  const data = await getPostData(params.id);

  return (
   // Optionally pass to client component
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

// Static parameters generation for static paths
export async function generateStaticParams() {
  // Fetch and return the static paths
  return [
    { id: '1' },
    { id: '2' },
    { id: '3' },
  ];
}
tribal vigil
#

@mild comet resolved?

mild comet
#

haven't tried it yet

#

but makes sense to me

plush sandal
#

whether its static or not generally depends on whether you import the headers or cookies functions on the page and what the cache on your fetch call is. Next will try to make things static as much as possible but switches to dynamic if the page requires request-specific data (from headers or cookies) or needs some data from a fetch that isnt cached

tribal vigil
tardy mapleBOT
# tribal vigil ```ts // app/posts/[id]/page.tsx // Function to fetch data async function getPo...
Mark an answer as the solution

To mark the message as solution:

  1. Hover over the message you want to mark as the solution.
  2. Right click the message Click the three dots that appear on the right side.
  3. You'll see a menu which should have the option of Apps. Hover Over it.
  4. Click on the Mark as Answer option.
    Note: If you don't see the Mark as Answer option or Apps option, restart/update your discord app!
Requested by Anay-208