Q43: How is SWR used for client-side data fetching alongside SSG in Pages Router?
A common pattern combines SSG for initial skeleton HTML with SWR (useSWR) on the client for live data revalidation. Initial static data can be passed to SWR as fallbackData inside getStaticProps.
Combining SSG with Client SWR Revalidation
import useSWR from 'swr';
export async function getStaticProps() {
const initialData = await fetchStockData();
return { props: { initialData } };
}
export default function Stock({ initialData }) {
const { data } = useSWR('/api/stock', fetcher, { fallbackData: initialData });
return <div>Current Price: {data.price}</div>;
}💡 Pre-renders initialData statically at build time, while useSWR polls for live client-side updates.
Key Takeaways
- Combines static page pre-rendering with dynamic client-side hydration.
- Pass initial props to SWR's
fallbackDataoption.
Knowledge Check
What role does fallbackData play when passing getStaticProps data into the useSWR hook?