Question
Answer and Explanation
To make a page server-rendered on demand in Next.js, you'll primarily use Server-Side Rendering (SSR) with the getServerSideProps function. This function allows you to fetch data on each request, ensuring the page is always up-to-date. Here's how you can achieve this:
1. Understanding getServerSideProps:
- getServerSideProps is a function that you export from a page component. It runs on the server on each request, allowing you to fetch data and pass it as props to your page.
2. Implementing getServerSideProps:
- Create or modify a page file (e.g., pages/my-page.js). Inside this file, define the getServerSideProps function.
3. Fetching Data:
- Within getServerSideProps, use async/await to fetch data from an API, database, or any other source. This data will be available to your page component as props.
4. Example Code:
// pages/my-page.js
import React from 'react';
function MyPage({ data }) {
return (
<div>
<h1>Server-Rendered Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export async function getServerSideProps(context) {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: { data }, // Pass data as props to the page
};
}
export default MyPage;
5. Explanation:
- The getServerSideProps function fetches data from https://api.example.com/data on each request. The fetched data is then passed as a prop named data to the MyPage component.
6. Context Object:
- The context object in getServerSideProps provides access to request parameters, headers, and other useful information. You can use it to customize data fetching based on the request.
7. Benefits of SSR on Demand:
- Always Up-to-Date: Data is fetched on each request, ensuring the page always displays the latest information.
- SEO Friendly: Search engines can easily crawl and index the content as it's rendered on the server.
- Dynamic Content: Ideal for pages that require dynamic data that changes frequently.
By using getServerSideProps, you can effectively create pages that are server-rendered on demand in Next.js, providing a dynamic and SEO-friendly experience for your users.