76 lines
1.9 KiB
Markdown
76 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
|
||
|
```
|