@@ -25,8 +25,6 @@ description: Enable Server-Side Rendering in a page and do initial data populati
`getInitialProps` is an [`async`](https://vercel.com/blog/async-and-await) function that can be added to any page as a [`static method`](https://javascript.info/static-properties-methods). Take a look at the following example:
@@ -52,9 +52,6 @@ The `context` parameter is an object containing the following keys:
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](/docs/basic-features/pages.md).
```jsx
// You can use any data fetching library
importfetchfrom'node-fetch'
// posts will be populated at build time by getStaticProps()
functionBlog({posts}){
return(
...
...
@@ -71,6 +68,7 @@ function Blog({ posts }) {
// direct database queries. See the "Technical details" section.
exportasyncfunctiongetStaticProps(){
// Call an external API endpoint to get posts.
// You can use any data fetching library
constres=awaitfetch('https://.../posts')
constposts=awaitres.json()
...
...
@@ -250,7 +248,6 @@ Here’s an example which pre-renders one blog post per page called `pages/posts
```jsx
// pages/posts/[id].js
importfetchfrom'node-fetch'
functionPost({post}){
// Render post...
...
...
@@ -308,7 +305,6 @@ Here’s an example that uses `isFallback`:
To fetch this data on pre-render, Next.js allows you to `export` an `async` function called `getStaticProps` from the same file. This function gets called at build time and lets you pass fetched data to the page's `props` on pre-render.
```jsx
// You can use any data fetching library
importfetchfrom'node-fetch'
functionBlog({posts}){
// Render posts...
}
...
...
@@ -148,8 +145,6 @@ Later, you might add the second post with `id: 2`. Then you'd want to pre-render
So your page **paths** that are pre-rendered depend on external data**.** To handle this, Next.js lets you `export` an `async` function called `getStaticPaths` from a dynamic page (`pages/posts/[id].js` in this case). This function gets called at build time and lets you specify which paths you want to pre-render.
```jsx
importfetchfrom'node-fetch'
// This function gets called at build time
exportasyncfunctiongetStaticPaths(){
// Call an external API endpoint to get posts
...
...
@@ -168,8 +163,6 @@ export async function getStaticPaths() {
Also in `pages/posts/[id].js`, you need to export `getStaticProps` so that you can fetch the data about the post with this `id` and use it to pre-render the page:
```jsx
importfetchfrom'node-fetch'
functionPost({post}){
// Render post...
}
...
...
@@ -225,8 +218,6 @@ To use Server-side Rendering for a page, you need to `export` an `async` functio
For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can write `getServerSideProps` which fetches this data and passes it to `Page` like below: