From a52e63404a2ee2504c67e5a4d225081dab098b55 Mon Sep 17 00:00:00 2001
From: David Janda <djanda97@gmail.com>
Date: Sat, 4 Apr 2020 03:44:48 -0700
Subject: [PATCH 1/2] Replaced getInitialProps with SSG

---
 .../pages/about.js                            | 31 ++++++++++-
 .../pages/contact.js                          |  1 -
 .../pages/index.js                            | 53 ++++++++++---------
 3 files changed, 58 insertions(+), 27 deletions(-)
 delete mode 100644 examples/with-webpack-bundle-size-analyzer/pages/contact.js

diff --git a/examples/with-webpack-bundle-size-analyzer/pages/about.js b/examples/with-webpack-bundle-size-analyzer/pages/about.js
index 5fd65c2baf2cb..ac414767fbfbe 100644
--- a/examples/with-webpack-bundle-size-analyzer/pages/about.js
+++ b/examples/with-webpack-bundle-size-analyzer/pages/about.js
@@ -1 +1,30 @@
-export default () => <div>About us</div>
+import Link from 'next/link'
+
+const About = ({ name }) => {
+  return (
+    <div>
+      <h1>About Page</h1>
+      <p>Welcome, {name}.</p>
+      <p>
+        This page is using getStaticProps, so the name will always be {name}{' '}
+        even if you reload the page.
+      </p>
+      <div>
+        <Link href="/">
+          <a>Home Page</a>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export async function getStaticProps() {
+  // Runs only in the client
+  return {
+    props: {
+      name: 'Arunoda',
+    },
+  }
+}
+
+export default About
diff --git a/examples/with-webpack-bundle-size-analyzer/pages/contact.js b/examples/with-webpack-bundle-size-analyzer/pages/contact.js
deleted file mode 100644
index b0fdbcd7a4967..0000000000000
--- a/examples/with-webpack-bundle-size-analyzer/pages/contact.js
+++ /dev/null
@@ -1 +0,0 @@
-export default () => <div>This is the contact page.</div>
diff --git a/examples/with-webpack-bundle-size-analyzer/pages/index.js b/examples/with-webpack-bundle-size-analyzer/pages/index.js
index c5e13c7e8f9cc..05b7e656e3ed8 100644
--- a/examples/with-webpack-bundle-size-analyzer/pages/index.js
+++ b/examples/with-webpack-bundle-size-analyzer/pages/index.js
@@ -1,31 +1,34 @@
-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 (
+const Index = ({ name }) => {
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <p>Welcome, {name}.</p>
+      <p>
+        This page is using getServerSideProps, so the name will be different
+        every time the page is rendered.
+      </p>
       <div>
-        <h1>Home Page</h1>
-        <p>Welcome, {name}</p>
-        <div>
-          <Link href="/about">
-            <a>About Page</a>
-          </Link>
-        </div>
+        <Link href="/about">
+          <a>About Page</a>
+        </Link>
       </div>
-    )
+    </div>
+  )
+}
+
+export async function getServerSideProps({ req }) {
+  if (req) {
+    // Runs only in the server
+    const faker = require('faker')
+    const name = faker.name.findName()
+    return {
+      props: {
+        name,
+      },
+    }
   }
 }
+
+export default Index

From 91e46e12dc31ecc604b30c761327ff576026d5fc Mon Sep 17 00:00:00 2001
From: David Janda <djanda97@gmail.com>
Date: Mon, 6 Apr 2020 17:26:17 -0700
Subject: [PATCH 2/2] Moved faker to a top level import and re-added contact.js

---
 .../pages/about.js                              |  5 +++--
 .../pages/contact.js                            |  1 +
 .../pages/index.js                              | 17 +++++++----------
 3 files changed, 11 insertions(+), 12 deletions(-)
 create mode 100644 examples/with-webpack-bundle-size-analyzer/pages/contact.js

diff --git a/examples/with-webpack-bundle-size-analyzer/pages/about.js b/examples/with-webpack-bundle-size-analyzer/pages/about.js
index ac414767fbfbe..76a9fb7cdc294 100644
--- a/examples/with-webpack-bundle-size-analyzer/pages/about.js
+++ b/examples/with-webpack-bundle-size-analyzer/pages/about.js
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import faker from 'faker'
 
 const About = ({ name }) => {
   return (
@@ -19,10 +20,10 @@ const About = ({ name }) => {
 }
 
 export async function getStaticProps() {
-  // Runs only in the client
+  const name = faker.name.findName()
   return {
     props: {
-      name: 'Arunoda',
+      name,
     },
   }
 }
diff --git a/examples/with-webpack-bundle-size-analyzer/pages/contact.js b/examples/with-webpack-bundle-size-analyzer/pages/contact.js
new file mode 100644
index 0000000000000..b0fdbcd7a4967
--- /dev/null
+++ b/examples/with-webpack-bundle-size-analyzer/pages/contact.js
@@ -0,0 +1 @@
+export default () => <div>This is the contact page.</div>
diff --git a/examples/with-webpack-bundle-size-analyzer/pages/index.js b/examples/with-webpack-bundle-size-analyzer/pages/index.js
index 05b7e656e3ed8..f29d9fb4bf12c 100644
--- a/examples/with-webpack-bundle-size-analyzer/pages/index.js
+++ b/examples/with-webpack-bundle-size-analyzer/pages/index.js
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import faker from 'faker'
 
 const Index = ({ name }) => {
   return (
@@ -18,16 +19,12 @@ const Index = ({ name }) => {
   )
 }
 
-export async function getServerSideProps({ req }) {
-  if (req) {
-    // Runs only in the server
-    const faker = require('faker')
-    const name = faker.name.findName()
-    return {
-      props: {
-        name,
-      },
-    }
+export async function getServerSideProps() {
+  const name = faker.name.findName()
+  return {
+    props: {
+      name,
+    },
   }
 }