\n\nThis document is for Next.js versions 9.3 and up. If you’re using older versions of Next.js, refer to our previous documentation.
\n
In the Pages documentation, we’ve explained that Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. In this page, we’ll talk in depths about data fetching strategies for each case. We recommend you to read through the Pages documentation first if you haven’t done so.
\nWe’ll talk about the three unique Next.js functions you can use to fetch data for pre-rendering:
\ngetStaticProps (Static Generation): Fetch data at build time.getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data.getServerSideProps (Server-side Rendering): Fetch data on each request.In addition, we’ll talk briefly about how to do fetch data on the client side.
\ngetStaticProps (Static Generation)If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
export async function getStaticProps(context) {\n return {\n props: {}, // will be passed to the page component as props\n }\n}\nThe context parameter is an object containing the following keys:
params contains the route parameters for pages using dynamic routes. For example, if the page name is [id].js , then params will look like { id: ... }. To learn more, take a look at the Dynamic Routing documentation. You should use this together with getStaticPaths, which we’ll explain later.preview is true if the page is in the preview mode and false otherwise. See the Preview Mode documentation.previewData contains the preview data set by setPreviewData. See the Preview Mode documentation.Here’s an example which uses getStaticProps to fetch a list of blog posts from a CMS (content management system). This example is also in the Pages documentation.
// posts will be populated at build time by getStaticProps()\nfunction Blog({ posts }) {\n return (\n <ul>\n {posts.map(post => (\n <li>{post.title}</li>\n ))}\n </ul>\n )\n}\n\n// This function gets called at build time on server-side.\n// It won't be called on client-side, so you can even do\n// direct database queries. See the \"Technical details\" section.\nexport async function getStaticProps() {\n // Call an external API endpoint to get posts.\n // You can use any data fetching library\n const res = await fetch('https://.../posts')\n const posts = await res.json()\n\n // By returning { props: posts }, the Blog component\n // will receive `posts` as a prop at build time\n return {\n props: {\n posts,\n },\n }\n}\n\nexport default Blog\ngetStaticProps?You should use getStaticProps if:
getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.GetStaticPropsFor TypeScript, you can use the GetStaticProps type from next:
import { GetStaticProps } from 'next'\n\nexport const getStaticProps: GetStaticProps = async context => {\n // ...\n}\nprocess.cwd()Files can be read directly from the filesystem in getStaticProps.
In order to do so you have to get the full path to a file.
\nSince Next.js compiles your code into a separate directory you can't use __dirname as the path it will return will be different from the pages directory.
Instead you can use process.cwd() which gives you the directory where Next.js is being executed.
import fs from 'fs'\nimport path from 'path'\n\n// posts will be populated at build time by getStaticProps()\nfunction Blog({ posts }) {\n return (\n <ul>\n {posts.map(post => (\n <li>\n <h3>{post.filename}</h3>\n <p>{post.content}</p>\n </li>\n ))}\n </ul>\n )\n}\n\n// This function gets called at build time on server-side.\n// It won't be called on client-side, so you can even do\n// direct database queries. See the \"Technical details\" section.\nexport async function getStaticProps() {\n const postsDirectory = path.join(process.cwd(), 'posts')\n const filenames = fs.readdirSync(postsDirectory)\n\n const posts = filenames.map(filename => {\n const filePath = path.join(postsDirectory, filename)\n const fileContents = fs.readFileSync(filePath, 'utf8')\n\n // Generally you would parse/transform the contents\n // For example you can transform markdown to HTML here\n\n return {\n filename,\n content: fileContents,\n }\n })\n // By returning { props: posts }, the Blog component\n // will receive `posts` as a prop at build time\n return {\n props: {\n posts,\n },\n }\n}\n\nexport default Blog\nBecause getStaticProps runs at build time, it does not receive data that’s only available during request time, such as query parameters or HTTP headers as it generates static HTML.
Note that getStaticProps runs only on the server-side. It will never be run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers. You should not fetch an API route from getStaticProps — instead, you can write the server-side code directly in getStaticProps.
When a page with getStaticProps is pre-rendered at build time, in addition to the page HTML file, Next.js generates a JSON file holding the result of running getStaticProps.
This JSON file will be used in client-side routing through next/link (documentation) or next/router (documentation). When you navigate to a page that’s pre-rendered using getStaticProps, Next.js fetches this JSON file (pre-computed at build time) and uses it as the props for the page component. This means that client-side page transitions will not call getStaticProps as only the exported JSON is used.
getStaticProps can only be exported from a page. You can’t export it from non-page files.
One of the reasons for this restriction is that React needs to have all the required data before the page is rendered.
\nAlso, you must use export async function getStaticProps() {} — it will not work if you add getStaticProps as a property of the page component.
In development (next dev), getStaticProps will be called on every request.
In some cases, you might want to temporarily bypass Static Generation and render the page at request time instead of build time. For example, you might be using a headless CMS and want to preview drafts before they're published.
\nThis use case is supported by Next.js by the feature called Preview Mode. Learn more on the Preview Mode documentation.
\ngetStaticPaths (Static Generation)If a page has dynamic routes (documentation) and uses getStaticProps it needs to define a list of paths that have to be rendered to HTML at build time.
If you export an async function called getStaticPaths from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
export async function getStaticPaths() {\n return {\n paths: [\n { params: { ... } } // See the \"paths\" section below\n ],\n fallback: true or false // See the \"fallback\" section below\n };\n}\npaths key (required)The paths key determines which paths will be pre-rendered. For example, suppose that you have a page that uses dynamic routes named pages/posts/[id].js. If you export getStaticPaths from this page and return the following for paths:
return {\n paths: [\n { params: { id: '1' } },\n { params: { id: '2' } }\n ],\n fallback: ...\n}\nThen Next.js will statically generate posts/1 and posts/2 at build time using the page component in pages/posts/[id].js.
Note that the value for each params must match the parameters used in the page name:
pages/posts/[postId]/[commentId], then params should contain postId and commentId.pages/[...slug], then params should contain slug which is an array. For example, if this array is ['foo', 'bar'], then Next.js will statically generate the page at /foo/bar.fallback key (required)The object returned by getStaticPaths must contain a boolean fallback key.
fallback: falseIf fallback is false, then any paths not returned by getStaticPaths will result in a 404 page. You can do this if you have a small number of paths to pre-render - so they are all statically generated during build time. It’s also useful when the new pages are not added often. If you add more items to the data source and need to render the new pages, you’d need to run the build again.
Here’s an example which pre-renders one blog post per page called pages/posts/[id].js. The list of blog posts will be fetched from a CMS and returned by getStaticPaths . Then, for each page, it fetches the post data from a CMS using getStaticProps. This example is also in the Pages documentation.
// pages/posts/[id].js\n\nfunction Post({ post }) {\n // Render post...\n}\n\n// This function gets called at build time\nexport async function getStaticPaths() {\n // Call an external API endpoint to get posts\n const res = await fetch('https://.../posts')\n const posts = await res.json()\n\n // Get the paths we want to pre-render based on posts\n const paths = posts.map(post => ({\n params: { id: post.id },\n }))\n\n // We'll pre-render only these paths at build time.\n // { fallback: false } means other routes should 404.\n return { paths, fallback: false }\n}\n\n// This also gets called at build time\nexport async function getStaticProps({ params }) {\n // params contains the post `id`.\n // If the route is like /posts/1, then params.id is 1\n const res = await fetch(`https://.../posts/${params.id}`)\n const post = await res.json()\n\n // Pass post data to the page via props\n return { props: { post } }\n}\n\nexport default Post\nfallback: trueIf fallback is true, then the behavior of getStaticProps changes:
getStaticPaths will be rendered to HTML at build time.getStaticProps.In the “fallback” version of a page:
\nrouter.isFallback will be true.Here’s an example that uses isFallback:
// pages/posts/[id].js\nimport { useRouter } from 'next/router'\n\nfunction Post({ post }) {\n const router = useRouter()\n\n // If the page is not yet generated, this will be displayed\n // initially until getStaticProps() finishes running\n if (router.isFallback) {\n return <div>Loading...</div>\n }\n\n // Render post...\n}\n\n// This function gets called at build time\nexport async function getStaticPaths() {\n return {\n // Only `/posts/1` and `/posts/2` are generated at build time\n paths: [{ params: { id: '1' } }, { params: { id: '2' } }],\n // Enable statically generating additional pages\n // For example: `/posts/3`\n fallback: true,\n }\n}\n\n// This also gets called at build time\nexport async function getStaticProps({ params }) {\n // params contains the post `id`.\n // If the route is like /posts/1, then params.id is 1\n const res = await fetch(`https://.../posts/${params.id}`)\n const post = await res.json()\n\n // Pass post data to the page via props\n return { props: { post } }\n}\n\nexport default Post\nfallback: true useful?fallback: true is useful if your app has a very large number of static pages that depend on data (think: a very large e-commerce site). You want to pre-render all product pages, but then your builds would take forever.
Instead, you may statically generate a small subset of pages and use fallback: true for the rest. When someone requests a page that’s not generated yet, the user will see the page with a loading indicator. Shortly after, getStaticProps finishes and the page will be rendered with the requested data. From now on, everyone who requests the same page will get the statically pre-rendered page.
This ensures that users always have a fast experience while preserving fast builds and the benefits of Static Generation.
\ngetStaticPaths?You should use getStaticPaths if you’re statically pre-rendering pages that use dynamic routes.
GetStaticPathsFor TypeScript, you can use the GetStaticPaths type from next:
import { GetStaticPaths } from 'next'\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n // ...\n}\ngetStaticPropsWhen you use getStaticProps on a page with dynamic route parameters, you must use getStaticPaths.
You cannot use getStaticPaths with getServerSideProps.
getStaticPaths only runs at build time on server-side.
getStaticPaths can only be exported from a page. You can’t export it from non-page files.
Also, you must use export async function getStaticPaths() {} — it will not work if you add getStaticPaths as a property of the page component.
In development (next dev), getStaticPaths will be called on every request.
getServerSideProps (Server-side Rendering)If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
export async function getServerSideProps(context) {\n return {\n props: {}, // will be passed to the page component as props\n }\n}\nThe context parameter is an object containing the following keys:
params: If this page uses a dynamic route, params contains the route parameters. If the page name is [id].js , then params will look like { id: ... }. To learn more, take a look at the Dynamic Routing documentation.req: The HTTP IncomingMessage object.res: The HTTP response object.query: The query string.preview: preview is true if the page is in the preview mode and false otherwise. See the Preview Mode documentation.previewData: The preview data set by setPreviewData. See the Preview Mode documentation.Here’s an example which uses getServerSideProps to fetch data at request time and pre-renders it. This example is also in the Pages documentation.
function Page({ data }) {\n // Render data...\n}\n\n// This gets called on every request\nexport async function getServerSideProps() {\n // Fetch data from external API\n const res = await fetch(`https://.../data`)\n const data = await res.json()\n\n // Pass data to the page via props\n return { props: { data } }\n}\n\nexport default Page\ngetServerSideProps?You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.
If you don’t need to pre-render the data, then you should consider fetching data on the client side. Click here to learn more.
\nGetServerSidePropsFor TypeScript, you can use the GetServerSideProps type from next:
import { GetServerSideProps } from 'next'\n\nexport const getServerSideProps: GetServerSideProps = async context => {\n // ...\n}\ngetServerSideProps only runs on server-side and never runs on the browser. If a page uses getServerSideProps , then:
getServerSideProps runs at the request time, and this page will be pre-rendered with the returned props.next/link (documentation) or next/router (documentation), Next.js sends an API request to the server, which runs getServerSideProps. It’ll return JSON that contains the result of running getServerSideProps, and the JSON will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have getServerSideProps defined.getServerSideProps can only be exported from a page. You can’t export it from non-page files.
Also, you must use export async function getServerSideProps() {} — it will not work if you add getServerSideProps as a property of the page component.
If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the client side. An example of this is user-specific data. Here’s how it works:
\nThis approach works well for user dashboard pages, for example. Because a dashboard is a private, user-specific page, SEO is not relevant and the page doesn’t need to be pre-rendered. The data is frequently updated, which requires request-time data fetching.
\nThe team behind Next.js has created a React hook for data fetching called SWR. We highly recommend it if you’re fetching data on the client side. It handles caching, revalidation, focus tracking, refetching on interval, and more. And you can use it like so:
\nimport useSWR from 'swr'\n\nfunction Profile() {\n const { data, error } = useSWR('/api/user', fetch)\n\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>hello {data.name}!</div>\n}\nCheck out the SWR documentation to learn more.
\nWe recommend you to read the following sections next:
\n\n\n"},"__N_SSG":true}