e3465615e4
* Added the docs from Notion * Updated the links from notion to relative links * Added a routes manifest to the docs * Removed the <br> after examples toggle * Use the name of the section instead of Introduction * Fixed spelling errors * Optimize the content for Algolia * Add a paragraph for `pageProps` * Add welcome section * Transpile -> Compile * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Test extra room between * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update manifest.json * Update getting-started.md * Update getting-started.md * Add concepts section * Update pages.md * Update pages.md * Add data fetching section * Update pages.md * See how a card looks like * Undo card changes * Added related section to getting-started * Fixed wrong markdown syntax in the withRouter page * Moved the server-side-and-client-side section * Updated next-cli reference * updated getInitialProps section * Minor fixes * Added more Related sections * Add html to the related section in getting-started * Use small for the card * Use cards for all related sections * Added src directory docs * Added src directory to the manifest * Add note about API routes in next export * Add initial data fetching docs (private until new methods are released) * Fix typos * Improve wording * Update getting-started.md * Update getting-started.md * Move advanced concepts to advanced section * Hide server-side vs client-side * Move AMP support * Move typescript into one page * Add routing concepts page * Remove introduction page * Update section on different route types * Update routing.md * Update routing.md * Update routing.md * Update routing.md * Combine router injection pages * Update pages.md * Update routing.md * Update using-link.md * Update using-link.md * Update typescript.md * Move the API Routes typescript to basic features * Added links to the typescript section * Updated links to useRouter and withRouter * Add singleLevel prop to manifest * Added single page for router docs * Updated description * Updated the routes in the manifest * Add data fetching section * Update data-fetching.md * Update data-fetching.md * Update dynamic-routes.md * Update manifest.json * Only use the single router API page * Moved the concepts pages * Updated links * Removed extra space * Updated title for Router API * Added a description with frontmatter * Add open prop to the manifest * Added datafetching section to API Reference * Updated links to the getInitialProps reference * Moved some sections to API * Added next/head to API reference * Added next/link to the API Reference * Removed the populating-head section * Updated links to the new next/link API * Added link from dynamic-routes to next/link docs * use a paragraph * Added next/router API * Added next/amp * Updated the docs for next/amp * Moved the AMP support folder * Updated title * Content updates * Added more links to the data fetching section * Added links from the API to introductions * changing the router API * Updates to the router API * Updated the routing section * life improvements * Added shallow routing section * Small fix * Removed old routing sections * Updated link to shallow routing * Removed unrequired page * Removed /pages * Update data-fetching.md * Add initial deployments section * Update manifest.json * Update introduction.md * Update deployment doc * Add static export section updates * link ssg/ssr * Update deployment.md * Add syntax highlighting Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
75 lines
1.9 KiB
Markdown
75 lines
1.9 KiB
Markdown
# Data Fetching
|
|
|
|
As outlined in the `pages` documentation Next.js has 2 render modes:
|
|
|
|
- Static Generation
|
|
- Server-Side Rendering
|
|
|
|
Next.js provides methods to do data fetching for both modes. These methods are agnostic to your data solution.
|
|
Meaning you can use any data solution, from fetching rest APIs to GraphQL.
|
|
|
|
Both of modes have different trade-offs and use different methods of data fetching.
|
|
|
|
## Static Generation
|
|
|
|
[Read more about how Static Generation works]().
|
|
|
|
By default Next.js renders pages to static HTML at build time.
|
|
|
|
However sometimes you might want to fetch some data from an external source while preserving the static generation behavior.
|
|
|
|
Next.js provides the `getStaticProps` method to do exactly that, fetch data and render to static HTML.
|
|
|
|
```jsx
|
|
import fetch from 'isomorphic-unfetch'
|
|
|
|
// Called at build time and renders the page to static HTML.
|
|
export async function getStaticProps() {
|
|
const res = await fetch('https://api.github.com/repos/zeit/next.js')
|
|
const json = await res.json()
|
|
|
|
return {
|
|
props: {
|
|
stars: json.stargazers_count,
|
|
},
|
|
}
|
|
}
|
|
|
|
function HomePage({ stars }) {
|
|
return <div>Next stars: {stars}</div>
|
|
}
|
|
|
|
export default HomePage
|
|
```
|
|
|
|
## Server-Side Rendering
|
|
|
|
[Read more about how Server-Side Rendering works]().
|
|
|
|
To opt-in to Server-Side Rendering, making every request render HTML on-demand you use the `getServerProps` method.
|
|
|
|
It allows you to fetch data before rendering starts when a request comes in.
|
|
|
|
Taking the same example as Static Generation, but opted into rendering the page when a request comes in.
|
|
|
|
```jsx
|
|
import fetch from 'isomorphic-unfetch'
|
|
|
|
// Called when a request comes in.
|
|
export async function getServerProps() {
|
|
const res = await fetch('https://api.github.com/repos/zeit/next.js')
|
|
const json = await res.json()
|
|
|
|
return {
|
|
props: {
|
|
stars: json.stargazers_count,
|
|
},
|
|
}
|
|
}
|
|
|
|
function HomePage({ stars }) {
|
|
return <div>Next stars: {stars}</div>
|
|
}
|
|
|
|
export default HomePage
|
|
```
|