Change README component from class to functional component

README.md

@@ -73,35 +73,27 @@ const Index = () => (
 // components/MyFragment.js
 import React from 'react';
 
-export default class MyFragment extends React.Component {
-  render() {
-    return (
-      <section>
-        <h1>A fragment that can have its own TTL</h1>
-
-        <div>{this.props.greeting /* access to the props as usual */}</div>
-        <div>{this.props.dataFromAnAPI}</div>
-      </section>
-    );
-  }
+export default function MyFragment(props) {
+  return (
+    <section>
+      <h1>A fragment that can have its own TTL</h1>
+
+      <div>{props.greeting /* access to the props as usual */}</div>
+      <div>{props.dataFromAnAPI}</div>
+    </section>
+  )
+}
+
+export async function getStaticProps() {
+  const res = await fetch(/* any api */)
+  const data = await res.json()
 
-  static async getInitialProps({ props, req, res }) {
-    return new Promise(resolve => {
-      if (res) {
-        // Set a TTL for this fragment
-        res.set('Cache-Control', 's-maxage=60, max-age=30');
-      }
-
-      // Simulate a delay (call to a remote service such as a web API)
-      setTimeout(
-        () =>
-          resolve({
-            ...props, // Props coming from index.js, passed through the internal URL
-            dataFromAnAPI: 'Hello there'
-          }),
-        2000
-      );
-    });
+  return {
+    props: {
+      greeting: 'Hello there',
+      dataFromAnAPI: data
+    },
+    revalidate: 60,
   }
 }
 ```