diff --git a/docs/basic-features/data-fetching/get-static-props.md b/docs/basic-features/data-fetching/get-static-props.md index 63e31187777a4..0b483f5a6b994 100644 --- a/docs/basic-features/data-fetching/get-static-props.md +++ b/docs/basic-features/data-fetching/get-static-props.md @@ -72,7 +72,35 @@ As `getStaticProps` runs only on the server-side, it will never run on the clien This means that instead of fetching an **API route** from `getStaticProps` (that itself fetches data from an external source), you can write the server-side code directly in `getStaticProps`. -Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from `getStaticProps`. This produces an additional call, reducing performance. Instead, the logic for fetching the data from the CMS can be moved to `getStaticProps`. +Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from `getStaticProps`. This produces an additional call, reducing performance. Instead, the logic for fetching the data from the CMS can be shared by using a `lib/` directory. Then it can be shared with `getStaticProps`. + +```jsx +// lib/fetch-posts.js + +// The following function is shared +// with getStaticProps and API routes +// from a `lib/` directory +export async function loadPosts() { + // Call an external API endpoint to get posts + const res = await fetch('https://.../posts/') + const data = await res.json() + + return data +} + +// pages/blog.js +import { loadPosts } from '../lib/load-posts' + +// This function runs only on the server side +export async function getStaticProps() { + // Instead of fetching your `/api` route you can call the same + // function directly in `getStaticProps` + const posts = await loadPosts() + + // Props returned will be passed to the page component + return { props: { posts } } +} +``` Alternatively, if you are **not** using API routes to fetch data, then the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API _can_ be used directly in `getStaticProps` to fetch data.