From e5bcfdc5718052c3637f91feef30713378eba06c Mon Sep 17 00:00:00 2001 From: Luis Alvarez D Date: Sat, 2 May 2020 00:01:07 -0500 Subject: [PATCH] [Docs] Move example links (#12326) --- docs/advanced-features/preview-mode.md | 20 +++++++++++--------- docs/basic-features/data-fetching.md | 23 +++++++++++++---------- docs/basic-features/pages.md | 23 +++++++++++++---------- 3 files changed, 37 insertions(+), 29 deletions(-) diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md index 096aed9827..caaf266ffe 100644 --- a/docs/advanced-features/preview-mode.md +++ b/docs/advanced-features/preview-mode.md @@ -6,6 +6,17 @@ description: Next.js has the preview mode for statically generated pages. You ca > This document is for Next.js versions 9.3 and up. If you’re using older versions of Next.js, refer to our [previous documentation](https://nextjs.org/docs/tag/v9.2.2/basic-features/pages). +
+ Examples + +
+ In the [Pages documentation](/docs/basic-features/pages.md) and the [Data Fetching documentation](/docs/basic-features/data-fetching.md), we talked about how to pre-render a page at build time (**Static Generation**) using `getStaticProps` and `getStaticPaths`. Static Generation is useful when your pages fetch data from a headless CMS. However, it’s not ideal when you’re writing a draft on your headless CMS and want to **preview** the draft immediately on your page. You’d want Next.js to render these pages at **request time** instead of build time and fetch the draft content instead of the published content. You’d want Next.js to bypass Static Generation only for this specific case. @@ -149,15 +160,6 @@ That’s it! If you access the preview API route (with `secret` and `slug`) from https:///api/preview?secret=&slug= ``` -## More Examples - -Take a look at the following examples to learn more: - -- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/)) -- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/)) -- [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/)) -- [Prismic Example](https://github.com/zeit/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.now.sh/)) - ## More Details ### Clear the preview mode cookies diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index 68501eb58f..29869e576f 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -6,6 +6,19 @@ description: 'Next.js has 2 pre-rendering modes: Static Generation and Server-si > This document is for Next.js versions 9.3 and up. If you’re using older versions of Next.js, refer to our [previous documentation](https://nextjs.org/docs/tag/v9.2.2/basic-features/data-fetching). +
+ Examples + +
+ In the [Pages documentation](/docs/basic-features/pages.md), 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](/docs/basic-features/pages.md) first if you haven’t done so. We’ll talk about the three unique Next.js functions you can use to fetch data for pre-rendering: @@ -483,16 +496,6 @@ function Profile() { [Check out the SWR documentation to learn more](https://swr.now.sh/). -## More Examples - -Take a look at the following examples to learn more: - -- [Blog Starter using markdown files](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.now.sh/)) -- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/)) -- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/)) -- [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/)) -- [Prismic Example](https://github.com/zeit/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.now.sh/)) - ## Learn more We recommend you to read the following sections next: diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md index d2b699b8ba..f66a9da1c7 100644 --- a/docs/basic-features/pages.md +++ b/docs/basic-features/pages.md @@ -45,6 +45,19 @@ Finally, you can always use **Client-side Rendering** along with Static Generati ## Static Generation (Recommended) +
+ Examples + +
+ If a page uses **Static Generation**, the page HTML is generated at **build time**. That means in production, the page HTML is generated when you run `next build` . This HTML will then be reused on each request. It can be cached by a CDN. In Next.js, you can statically generate pages **with or without data**. Let's take a look at each case. @@ -242,16 +255,6 @@ We've discussed two forms of pre-rendering for Next.js. - **Static Generation (Recommended):** The HTML is generated at **build time** and will be reused on each request. To make a page use Static Generation, either export the page component, or export `getStaticProps` (and `getStaticPaths` if necessary). It's great for pages that can be pre-rendered ahead of a user's request. You can also use it with Client-side Rendering to bring in additional data. - **Server-side Rendering:** The HTML is generated on **each request**. To make a page use Server-side Rendering, export `getServerSideProps`. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary. -## More Examples - -Take a look at the following examples to learn more: - -- [Blog Starter using markdown files](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.now.sh/)) -- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/)) -- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/)) -- [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/)) -- [Prismic Example](https://github.com/zeit/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.now.sh/)) - ## Learn more We recommend you to read the following sections next: