Lesson 1: Static Site Generation (SSG)
Static Site Generation is a rendering method that generates HTML pages at build time. These pages are then served as static files, ensuring high performance and scalability.
How It Works:
- Use the getStaticProps function to fetch data during build time.
- Example:
export async function getStaticProps() {
const data = await fetch(‘https://api.example.com/data’).then((res) => res.json()); return {
props: { data },
};
}
const data = await fetch(‘https://api.example.com/data’).then((res) => res.json()); return {
props: { data },
};
}
- Suitable for pages with content that doesn’t change often.
Advantages:
- Better performance with pre-rendered static files.
- Improved SEO due to ready-to-serve HTML.
Lesson 2: Server-Side Rendering (SSR)
Server-Side Rendering generates the HTML page dynamically on each request. This is useful for pages with frequently changing content or user-specific data.
How It Works:
- Use the getServerSideProps function to fetch data on each request.
- Example:
export async function getServerSideProps(context) {
const data = await fetch(‘https://api.example.com/data’).then((res) => res.json()); return {
props: { data },
};
}
const data = await fetch(‘https://api.example.com/data’).then((res) => res.json()); return {
props: { data },
};
}
- The function runs on the server and ensures the page is rendered with up-to-date data.
Advantages:
- Real-time data rendering.
- Suitable for personalized content.
Lesson 3: Incremental Static Regeneration (ISR)
ISR allows you to update static content without rebuilding the entire application. This is ideal for apps that need the performance of SSG with occasional data updates.
How It Works:
- Use revalidate in getStaticProps to specify the update interval.
- Example :
export async function getStaticProps() {
const data = await fetch(‘https://api.example.com/data’).then((res) => res.json()); return {
props: { data },
revalidate: 10, // Update every 10 seconds
};
}
const data = await fetch(‘https://api.example.com/data’).then((res) => res.json()); return {
props: { data },
revalidate: 10, // Update every 10 seconds
};
}
- The updated page is served seamlessly after the specified interval.
Advantages:
- Combines the speed of static sites with dynamic updates.
- Reduces server load compared to SSR.
Leave a Reply