diff --git a/docs/api-reference/data-fetching/get-server-side-props.md b/docs/api-reference/data-fetching/get-server-side-props.md index 582b04db9e7b1..10b469ae28217 100644 --- a/docs/api-reference/data-fetching/get-server-side-props.md +++ b/docs/api-reference/data-fetching/get-server-side-props.md @@ -2,7 +2,7 @@ description: API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js. --- -# `getServerSideProps` +# getServerSideProps
Version History @@ -41,7 +41,7 @@ The `context` parameter is an object containing the following keys: - `locales` contains all supported locales (if enabled). - `defaultLocale` contains the configured default locale (if enabled). -## `getServerSideProps` return values +## getServerSideProps return values The `getServerSideProps` function should return an object with the following **optional** properties: @@ -102,7 +102,7 @@ export async function getServerSideProps(context) { } ``` -### `getServerSideProps` with TypeScript +### getServerSideProps with TypeScript For TypeScript, you can use the `GetServerSideProps` type from `next`: diff --git a/docs/api-reference/data-fetching/get-static-paths.md b/docs/api-reference/data-fetching/get-static-paths.md index d185922fae93d..fe5de2933a2b8 100644 --- a/docs/api-reference/data-fetching/get-static-paths.md +++ b/docs/api-reference/data-fetching/get-static-paths.md @@ -2,7 +2,7 @@ description: API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`. --- -# `getStaticPaths` +# getStaticPaths
Version History @@ -27,7 +27,7 @@ export async function getStaticPaths() { } ``` -## `getStaticPaths` return values +## getStaticPaths return values The `getStaticPaths` function should return an object with the following **required** properties: @@ -199,7 +199,7 @@ export async function getStaticProps({ params }) { export default Post ``` -## `getStaticProps` with TypeScript +## getStaticProps with TypeScript For TypeScript, you can use the `GetStaticPaths` type from `next`: diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md index 2ab5ddb9f2625..23c0e70900981 100644 --- a/docs/api-reference/data-fetching/get-static-props.md +++ b/docs/api-reference/data-fetching/get-static-props.md @@ -2,7 +2,7 @@ description: API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js. --- -# `getStaticProps` +# getStaticProps
Version History @@ -39,7 +39,7 @@ The `context` parameter is an object containing the following keys: - `locales` contains all supported locales (if enabled). - `defaultLocale` contains the configured default locale (if enabled). -## `getStaticProps` return values +## getStaticProps return values The `getStaticProps` function should return an object with the following **optional** properties: @@ -192,7 +192,7 @@ export async function getStaticProps() { export default Blog ``` -## `getStaticProps` with TypeScript +## getStaticProps with TypeScript You can use the `GetStaticProps` type from `next` to type the function: diff --git a/docs/basic-features/data-fetching/get-server-side-props.md b/docs/basic-features/data-fetching/get-server-side-props.md index 2e28a45cbb89d..6caea00e656c1 100644 --- a/docs/basic-features/data-fetching/get-server-side-props.md +++ b/docs/basic-features/data-fetching/get-server-side-props.md @@ -2,7 +2,7 @@ description: Fetch data on each request with `getServerSideProps`. --- -# `getServerSideProps` +# getServerSideProps If you export a function called `getServerSideProps` (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`. @@ -14,7 +14,7 @@ export async function getServerSideProps(context) { } ``` -## When does `getServerSideProps` run +## When does getServerSideProps run `getServerSideProps` only runs on server-side and never runs on the browser. If a page uses `getServerSideProps`, then: @@ -37,7 +37,7 @@ You should use `getServerSideProps` only if you need to pre-render a page whose If you do not need to pre-render the data, then you should consider fetching data on the [client side](#fetching-data-on-the-client-side). -### `getServerSideProps` or API Routes +### getServerSideProps or API Routes It can be tempting to reach for an [API Route](/docs/api-routes/introduction.md) when you want to fetch data from the server, then call that API route from `getServerSideProps`. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both `getServerSideProps` and API Routes running on the server. @@ -52,7 +52,7 @@ If your page contains frequently updating data, and you don’t need to pre-rend This 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. -## Using `getServerSideProps` to fetch data at request time +## Using getServerSideProps to fetch data at request time The following example shows how to fetch data at request time and pre-render the result. diff --git a/docs/basic-features/data-fetching/get-static-paths.md b/docs/basic-features/data-fetching/get-static-paths.md index 9ba7a450928f9..e83f195a348da 100644 --- a/docs/basic-features/data-fetching/get-static-paths.md +++ b/docs/basic-features/data-fetching/get-static-paths.md @@ -2,7 +2,7 @@ description: Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. --- -# `getStaticPaths` +# getStaticPaths If a page has [Dynamic Routes](/docs/routing/dynamic-routes.md) and uses `getStaticProps`, it needs to define a list of paths to be statically generated. @@ -23,7 +23,7 @@ Note that`getStaticProps` **must** be used with `getStaticPaths`, and that you * The [`getStaticPaths` API reference](/docs/api-reference/data-fetching/get-static-paths.md) covers all parameters and props that can be used with `getStaticPaths`. -## When should I use `getStaticPaths`? +## When should I use getStaticPaths? You should use `getStaticPaths` if you’re statically pre-rendering pages that use dynamic routes and: @@ -33,11 +33,11 @@ You should use `getStaticPaths` if you’re statically pre-rendering pages that - The data can be publicly cached (not user-specific) - The page must be pre-rendered (for SEO) and be very fast — `getStaticProps` generates `HTML` and `JSON` files, both of which can be cached by a CDN for performance -## When does `getStaticPaths` run +## When does getStaticPaths run `getStaticPaths` only runs at build time on server-side. If you're using [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md), `getStaticPaths` can also be run on-demand _in the background_, but still only on the server-side. -## Where can I use `getStaticPaths` +## Where can I use getStaticPaths `getStaticPaths` can only be exported from a **page**. You **cannot** export it from non-page files. diff --git a/docs/basic-features/data-fetching/get-static-props.md b/docs/basic-features/data-fetching/get-static-props.md index adb8427fab01c..1e5319e34c21f 100644 --- a/docs/basic-features/data-fetching/get-static-props.md +++ b/docs/basic-features/data-fetching/get-static-props.md @@ -2,7 +2,7 @@ description: Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. --- -# `getStaticProps` +# getStaticProps If you export a function called `getStaticProps` (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by `getStaticProps`. @@ -14,7 +14,7 @@ export async function getStaticProps(context) { } ``` -## When should I use `getStaticProps`? +## When should I use getStaticProps? You should use `getStaticProps` if: @@ -25,7 +25,7 @@ You should use `getStaticProps` if: Because `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`. When combined with [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md) however, it will run in the background while the stale page is being revalidated, and the fresh page served to the browser. -## Using `getStaticProps` to fetch data from a CMS +## Using getStaticProps to fetch data from a CMS The following example shows how you can fetch a list of blog posts from a CMS. @@ -84,7 +84,7 @@ This JSON file will be used in client-side routing through [`next/link`](/docs/a When using Incremental Static Generation `getStaticProps` will be executed out of band to generate the JSON needed for client-side navigation. You may see this in the form of multiple requests being made for the same page, however, this is intended and has no impact on end-user performance -## Where can I use `getStaticProps` +## Where can I use getStaticProps `getStaticProps` can only be exported from a **page**. You **cannot** export it from non-page files.