Update examples to ssg

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 on the server for SSG.
 
 ## Deploy your own
 

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

examples/ssr-caching/pages/blog.js

@@ -1,19 +1,16 @@
 import React from 'react'
 
-export default class extends React.Component {
-  static getInitialProps({ query: { id } }) {
-    return { id }
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>My {this.props.id} blog post</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    )
-  }
+export function getServerSideProps({ query: { id } }) {
+  return { props: { id } }
+}
+export default function(props) {
+  return (
+    <div>
+      <h1>My {props.id} blog post</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  )
 }