Next.js Data Fetching

Different ways to fetch data in Next.js.

getServerSideProps (SSR)

Runs on every request:

```javascript export async function getServerSideProps() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json();

return { props: { posts } }; }

export default function Posts({ posts }) { return ( <div> {posts.map(post => <p key={post.id}>{post.title}</p>)} </div> ); } ```

getStaticProps (SSG)

Runs at build time:

```javascript export async function getStaticProps() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json();

return { props: { posts }, revalidate: 60 // Regenerate every 60 seconds }; } ```

getStaticPaths

For dynamic routes:

```javascript export async function getStaticPaths() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json();

const paths = posts.map(post => ({ params: { id: post.id.toString() } }));

return { paths, fallback: false }; } ```

Remember

- SSR: Fresh data every request - SSG: Fast, static pages - ISR: Regenerate periodically - Choose based on needs

> Next: Learn Next.js API routes!