diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md
index bbbd445a5fba318..272091d25d99443 100644
--- a/examples/data-fetch/README.md
+++ b/examples/data-fetch/README.md
@@ -3,7 +3,7 @@
 Next.js was conceived to make it easy to create universal apps. That's why fetching data
 on the server and the client when necessary is so easy with Next.
 
-Using `getInitialProps` fetches data on the server for SSR and then on the client when the component is re-mounted (not on the first paint).
+Using `getStaticProps` fetches data at built time from a page, Next.js will pre-render this page at build time.
 
 ## Deploy your own
 
diff --git a/examples/data-fetch/package.json b/examples/data-fetch/package.json
index ce6b96d2187181f..55d94b79a3ea614 100644
--- a/examples/data-fetch/package.json
+++ b/examples/data-fetch/package.json
@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
+    "node-fetch": "^2.6.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },
diff --git a/examples/data-fetch/pages/index.js b/examples/data-fetch/pages/index.js
index b9aee6825d7dbaa..a6d2c2b2edba0e8 100644
--- a/examples/data-fetch/pages/index.js
+++ b/examples/data-fetch/pages/index.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import Link from 'next/link'
-import fetch from 'isomorphic-unfetch'
+import fetch from 'node-fetch'
 
-function Index(props) {
+function Index({ stars }) {
   return (
     <div>
-      <p>Next.js has {props.stars} ⭐️</p>
+      <p>Next.js has {stars} ⭐️</p>
       <Link href="/preact">
         <a>How about preact?</a>
       </Link>
@@ -13,10 +13,14 @@ function Index(props) {
   )
 }
 
-Index.getInitialProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/zeit/next.js')
   const json = await res.json() // better use it inside try .. catch
-  return { stars: json.stargazers_count }
+  return {
+    props: {
+      stars: json.stargazers_count,
+    },
+  }
 }
 
 export default Index
diff --git a/examples/data-fetch/pages/preact.js b/examples/data-fetch/pages/preact.js
index 1a9d707863297f0..9c4df30454e8bee 100644
--- a/examples/data-fetch/pages/preact.js
+++ b/examples/data-fetch/pages/preact.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import Link from 'next/link'
-import fetch from 'isomorphic-unfetch'
+import fetch from 'node-fetch'
 
-function Preact(props) {
+function Preact({ stars }) {
   return (
     <div>
-      <p>Preact has {props.stars} ⭐</p>
+      <p>Preact has {stars} ⭐</p>
       <Link href="/">
         <a>I bet Next.js has more stars (?)</a>
       </Link>
@@ -13,10 +13,14 @@ function Preact(props) {
   )
 }
 
-Preact.getInitialProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/developit/preact')
   const json = await res.json() // better use it inside try .. catch
-  return { stars: json.stargazers_count }
+  return {
+    props: {
+      stars: json.stargazers_count,
+    },
+  }
 }
 
 export default Preact