Lesson 1: getStaticProps
getStaticProps is a method used to fetch data at build time. This is ideal for pages where the content doesn’t change frequently, ensuring high performance and scalability.
How It Works:
- Use getStaticProps in any page component.
- Fetch data during the build process.
- Example:
const data = await fetch(‘https://api.example.com/data’).then(res => res.json()); return {
props: { data },
};
}
export default function Page({ data }) { return <div>{JSON.stringify(data)}</div>;
}
Advantages:
- Improved performance with pre-rendered pages.
- Content is served as static HTML.
Limitations:
- Pages require rebuilding to update data.
Lesson 2: getServerSideProps
getServerSideProps is a method used to fetch data on each request. It’s suitable for dynamic content that changes frequently or user-specific data.
How It Works:
- Use getServerSideProps in your page component.
- Fetch data on every request to the server.
- Example:
const data = await fetch(‘https://api.example.com/data’).then(res => res.json()); return {
props: { data },
};
}
export default function Page({ data }) { return <div>{JSON.stringify(data)}</div>;
}
Advantages:
- Always serves the latest data.
- Ideal for personalized or time-sensitive content.
Limitations:
- Slower performance compared to static methods.
Lesson 3: getStaticPaths
getStaticPaths works alongside getStaticProps to generate dynamic routes for static pages. It’s used when pre-rendering pages with dynamic parameters.
How It Works:
- Define paths at build time.
- Use getStaticPaths to return a list of route parameters.
- Example:
const data = await fetch(‘https://api.example.com/posts’).then(res => res.json()); const paths = data.map(post => ({ params: { id: post.id.toString() } }));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const post = await fetch(`https://api.example.com/posts/${params.id}`).then(res => res.json()); return { props: { post } };
}
export default function Post({ post }) { return <div>{post.title}</div>;
}
Options for ******** fallback :
- false : Only generate specified paths. Requests for undefined paths return a 404.
- true : Generate new paths on the fly and cache them.
- blocking : New paths are generated during request but delay the response until complete.
Advantages:
- Supports dynamic routing with pre-rendered pages.
- Flexible with fallback options.
Limitations:
Requires careful handling of undefined routes if fallback is used.