Update data-fetch and analyze-bundles examples with getInitialProps to SSG #11014

examples/analyze-bundles/pages/index.js

@@ -2,18 +2,6 @@ import React from 'react'
 import Link from 'next/link'
 
 export default class Index extends React.Component {
-  static getInitialProps ({ req }) {
-    if (req) {
-      // Runs only in the server
-      const faker = require('faker')
-      const name = faker.name.findName()
-      return { name }
-    }
-
-    // Runs only in the client
-    return { name: 'Arunoda' }
-  }
-
   render () {
     const { name } = this.props
     return (
@@ -29,3 +17,15 @@ export default class Index extends React.Component {
     )
   }
 }
+
+export async function getServerSideProps({req}) {
+  if (req) {
+      // Runs only in the server
+      const faker = require('faker')
+      const name = faker.name.findName()
+      return { props : { name } }
+    }
+
+    // Runs only in the client
+    return { name: 'Arunoda' }
+}

examples/data-fetch/README.md

@@ -42,4 +42,4 @@ now
 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 build time.

examples/data-fetch/pages/index.js

@@ -13,10 +13,10 @@ 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

examples/data-fetch/pages/preact.js

@@ -13,10 +13,10 @@ 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