From 62c1c37a4ce85ef212b950ff3958ef1b9b79a3fa Mon Sep 17 00:00:00 2001
From: wangcheng <wangcheng@deepblueai.com>
Date: Wed, 15 Apr 2020 12:22:50 +0800
Subject: [PATCH 1/6] fix: with-mobx

---
 examples/with-mobx/components/Clock.js | 13 ++++-------
 examples/with-mobx/components/Page.js  |  3 ++-
 examples/with-mobx/package.json        |  8 +++----
 examples/with-mobx/pages/_app.js       | 32 +++++++++++++++-----------
 examples/with-mobx/store.js            | 22 ++++++++++++++----
 5 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/examples/with-mobx/components/Clock.js b/examples/with-mobx/components/Clock.js
index c821ed3604ed0..f7c8e322c33ff 100644
--- a/examples/with-mobx/components/Clock.js
+++ b/examples/with-mobx/components/Clock.js
@@ -1,7 +1,8 @@
-export default props => {
+import {observer} from 'mobx-react';
+const Clock = observer(props => {
   return (
     <div className={props.light ? 'light' : ''}>
-      {format(new Date(props.lastUpdate))}
+      {props.timeString}
       <style jsx>{`
         div {
           padding: 15px;
@@ -17,9 +18,5 @@ export default props => {
       `}</style>
     </div>
   )
-}
-
-const format = t =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
-
-const pad = n => (n < 10 ? `0${n}` : n)
+});
+export default Clock;
diff --git a/examples/with-mobx/components/Page.js b/examples/with-mobx/components/Page.js
index 80b6bd210bc13..4afccd89f46ab 100644
--- a/examples/with-mobx/components/Page.js
+++ b/examples/with-mobx/components/Page.js
@@ -15,11 +15,12 @@ class Page extends React.Component {
   }
 
   render() {
+    console.log("render update", this.props.store.timeString);
     return (
       <div>
         <h1>{this.props.title}</h1>
         <Clock
-          lastUpdate={this.props.store.lastUpdate}
+          timeString={this.props.store.timeString}
           light={this.props.store.light}
         />
         <nav>
diff --git a/examples/with-mobx/package.json b/examples/with-mobx/package.json
index d0233c6d13952..e673b3265ad8d 100644
--- a/examples/with-mobx/package.json
+++ b/examples/with-mobx/package.json
@@ -7,11 +7,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "mobx": "^2.7.0",
-    "mobx-react": "^4.0.4",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.2.2",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "license": "ISC",
   "devDependencies": {
diff --git a/examples/with-mobx/pages/_app.js b/examples/with-mobx/pages/_app.js
index 6e43460c420e7..15d69a6cfe714 100644
--- a/examples/with-mobx/pages/_app.js
+++ b/examples/with-mobx/pages/_app.js
@@ -1,24 +1,28 @@
 import { useMemo, useEffect } from 'react'
 import { Store } from '../store'
 import { Provider } from 'mobx-react'
+import App, {Container} from 'next/app'
+let store = new Store();
 
-export default function App({ Component, pageProps }) {
-  const store = useMemo(() => {
-    return new Store()
-  }, [])
+export default class MyApp extends App {
 
-  useEffect(() => {
-    // If your page has Next.js data fetching methods returning a state for the Mobx store,
-    // then you can hydrate it here.
-    const { initialState } = pageProps
-    if (initialState) {
-      store.hydrate(initialState)
+  state = {
+    stores: {store}
+  }
+
+  static async getInitialProps ({ Component, router, ctx }) {
+    let pageProps = {};
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
     }
-  }, [store, pageProps])
+    return {pageProps}
+  }
 
-  return (
-    <Provider store={store}>
+  render () {
+    const {Component, pageProps} = this.props;
+    const stores = this.state.stores;
+    return <Provider {...stores} >
       <Component {...pageProps} />
     </Provider>
-  )
+  }
 }
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index 28093b4c90ad9..94162c27e50b2 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -1,12 +1,12 @@
-import { action, observable } from 'mobx'
+import { action, observable, computed, runInAction, reaction } from 'mobx'
 import { useStaticRendering } from 'mobx-react'
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 useStaticRendering(typeof window === 'undefined')
 
 export class Store {
-  @observable lastUpdate = 0
-  @observable light = false
+  @observable lastUpdate = 0;
+  @observable light = false;
 
   hydrate(serializedStore) {
     this.lastUpdate =
@@ -18,10 +18,22 @@ export class Store {
 
   @action start = () => {
     this.timer = setInterval(() => {
-      this.lastUpdate = Date.now()
-      this.light = true
+      runInAction(()=>{
+        this.lastUpdate = Date.now();
+        this.light = true;
+        console.log(this.lastUpdate);
+      });
     }, 1000)
   }
 
+  @computed 
+  get timeString() {
+    const pad = n => (n < 10 ? `0${n}` : n)
+    const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;
+    let timeStr = format(new Date(this.lastUpdate));
+    console.log(timeStr);
+    return timeStr;
+  }
+
   stop = () => clearInterval(this.timer)
 }

From 27d53e0fe9d658815bc73307d98a4ec4006a4ac3 Mon Sep 17 00:00:00 2001
From: wangcheng <wangcheng@deepblueai.com>
Date: Wed, 15 Apr 2020 12:32:07 +0800
Subject: [PATCH 2/6] refactor: up link

---
 examples/with-mobx/pages/_app.js | 3 +--
 examples/with-mobx/store.js      | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/with-mobx/pages/_app.js b/examples/with-mobx/pages/_app.js
index 15d69a6cfe714..601dcc2fe9c14 100644
--- a/examples/with-mobx/pages/_app.js
+++ b/examples/with-mobx/pages/_app.js
@@ -1,7 +1,6 @@
-import { useMemo, useEffect } from 'react'
 import { Store } from '../store'
 import { Provider } from 'mobx-react'
-import App, {Container} from 'next/app'
+import App from 'next/app'
 let store = new Store();
 
 export default class MyApp extends App {
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index 94162c27e50b2..1ae6ce3d1ade6 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -1,4 +1,4 @@
-import { action, observable, computed, runInAction, reaction } from 'mobx'
+import { action, observable, computed, runInAction } from 'mobx'
 import { useStaticRendering } from 'mobx-react'
 
 // eslint-disable-next-line react-hooks/rules-of-hooks

From 0b162d69def9bce0dc25379dd5f85518bcd93477 Mon Sep 17 00:00:00 2001
From: wangcheng <wangcheng@deepblueai.com>
Date: Wed, 15 Apr 2020 12:55:50 +0800
Subject: [PATCH 3/6] refactor: npm run prettier-fix

---
 examples/with-mobx/components/Clock.js |  6 +++---
 examples/with-mobx/components/Page.js  |  1 -
 examples/with-mobx/pages/_app.js       | 25 ++++++++++++-----------
 examples/with-mobx/store.js            | 28 ++++++++++++++------------
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/examples/with-mobx/components/Clock.js b/examples/with-mobx/components/Clock.js
index f7c8e322c33ff..22a443e0f48fe 100644
--- a/examples/with-mobx/components/Clock.js
+++ b/examples/with-mobx/components/Clock.js
@@ -1,4 +1,4 @@
-import {observer} from 'mobx-react';
+import { observer } from 'mobx-react'
 const Clock = observer(props => {
   return (
     <div className={props.light ? 'light' : ''}>
@@ -18,5 +18,5 @@ const Clock = observer(props => {
       `}</style>
     </div>
   )
-});
-export default Clock;
+})
+export default Clock
diff --git a/examples/with-mobx/components/Page.js b/examples/with-mobx/components/Page.js
index 4afccd89f46ab..85f71ed2a3d16 100644
--- a/examples/with-mobx/components/Page.js
+++ b/examples/with-mobx/components/Page.js
@@ -15,7 +15,6 @@ class Page extends React.Component {
   }
 
   render() {
-    console.log("render update", this.props.store.timeString);
     return (
       <div>
         <h1>{this.props.title}</h1>
diff --git a/examples/with-mobx/pages/_app.js b/examples/with-mobx/pages/_app.js
index 601dcc2fe9c14..d37ec0b9bb077 100644
--- a/examples/with-mobx/pages/_app.js
+++ b/examples/with-mobx/pages/_app.js
@@ -1,27 +1,28 @@
 import { Store } from '../store'
 import { Provider } from 'mobx-react'
 import App from 'next/app'
-let store = new Store();
+let store = new Store()
 
 export default class MyApp extends App {
-
   state = {
-    stores: {store}
+    stores: { store },
   }
 
-  static async getInitialProps ({ Component, router, ctx }) {
-    let pageProps = {};
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {}
     if (Component.getInitialProps) {
       pageProps = await Component.getInitialProps(ctx)
     }
-    return {pageProps}
+    return { pageProps }
   }
 
-  render () {
-    const {Component, pageProps} = this.props;
-    const stores = this.state.stores;
-    return <Provider {...stores} >
-      <Component {...pageProps} />
-    </Provider>
+  render() {
+    const { Component, pageProps } = this.props
+    const stores = this.state.stores
+    return (
+      <Provider {...stores}>
+        <Component {...pageProps} />
+      </Provider>
+    )
   }
 }
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index 1ae6ce3d1ade6..fd905c9520633 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -5,8 +5,8 @@ import { useStaticRendering } from 'mobx-react'
 useStaticRendering(typeof window === 'undefined')
 
 export class Store {
-  @observable lastUpdate = 0;
-  @observable light = false;
+  @observable lastUpdate = 0
+  @observable light = false
 
   hydrate(serializedStore) {
     this.lastUpdate =
@@ -18,21 +18,23 @@ export class Store {
 
   @action start = () => {
     this.timer = setInterval(() => {
-      runInAction(()=>{
-        this.lastUpdate = Date.now();
-        this.light = true;
-        console.log(this.lastUpdate);
-      });
+      runInAction(() => {
+        this.lastUpdate = Date.now()
+        this.light = true
+        console.log(this.lastUpdate)
+      })
     }, 1000)
   }
 
-  @computed 
-  get timeString() {
+  @computed get timeString() {
     const pad = n => (n < 10 ? `0${n}` : n)
-    const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;
-    let timeStr = format(new Date(this.lastUpdate));
-    console.log(timeStr);
-    return timeStr;
+    const format = t =>
+      `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(
+        t.getUTCSeconds()
+      )}`
+    let timeStr = format(new Date(this.lastUpdate))
+    console.log(timeStr)
+    return timeStr
   }
 
   stop = () => clearInterval(this.timer)

From c0cf05fdcf457a29679d74b751240d95fe5089d5 Mon Sep 17 00:00:00 2001
From: wangcheng <wangcheng@deepblueai.com>
Date: Mon, 20 Apr 2020 12:05:03 +0800
Subject: [PATCH 4/6] refactor: server side render

---
 examples/with-mobx/pages/_app.js  | 32 +++++++---------------------
 examples/with-mobx/pages/index.js |  5 +++++
 examples/with-mobx/store.js       | 35 ++++++++++++++++++++-----------
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/examples/with-mobx/pages/_app.js b/examples/with-mobx/pages/_app.js
index d37ec0b9bb077..81fdf94089317 100644
--- a/examples/with-mobx/pages/_app.js
+++ b/examples/with-mobx/pages/_app.js
@@ -1,28 +1,12 @@
-import { Store } from '../store'
+import { useStore } from '../store'
 import { Provider } from 'mobx-react'
-import App from 'next/app'
-let store = new Store()
 
-export default class MyApp extends App {
-  state = {
-    stores: { store },
-  }
+export default function App({ Component, pageProps }) {
+  const store = useStore(pageProps.initialState)
 
-  static async getInitialProps({ Component, router, ctx }) {
-    let pageProps = {}
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx)
-    }
-    return { pageProps }
-  }
-
-  render() {
-    const { Component, pageProps } = this.props
-    const stores = this.state.stores
-    return (
-      <Provider {...stores}>
-        <Component {...pageProps} />
-      </Provider>
-    )
-  }
+  return (
+    <Provider store={store}>
+      <Component {...pageProps} />
+    </Provider>
+  )
 }
diff --git a/examples/with-mobx/pages/index.js b/examples/with-mobx/pages/index.js
index 95c2063569583..bb11e22873a01 100644
--- a/examples/with-mobx/pages/index.js
+++ b/examples/with-mobx/pages/index.js
@@ -3,3 +3,8 @@ import Page from '../components/Page'
 export default function Index() {
   return <Page title="Index Page" linkTo="/other" />
 }
+
+export function getServerSideProps() {
+  // config lastUpdate
+  return { props: { initialState: JSON.stringify({ lastUpdate: new Date() }) } }
+}
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index fd905c9520633..8403163b6b3e7 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -1,27 +1,18 @@
 import { action, observable, computed, runInAction } from 'mobx'
 import { useStaticRendering } from 'mobx-react'
-
+import { useMemo } from 'react'
 // eslint-disable-next-line react-hooks/rules-of-hooks
 useStaticRendering(typeof window === 'undefined')
 
-export class Store {
+class Store {
   @observable lastUpdate = 0
   @observable light = false
 
-  hydrate(serializedStore) {
-    this.lastUpdate =
-      serializedStore.lastUpdate != null
-        ? serializedStore.lastUpdate
-        : Date.now()
-    this.light = !!serializedStore.light
-  }
-
   @action start = () => {
     this.timer = setInterval(() => {
       runInAction(() => {
         this.lastUpdate = Date.now()
         this.light = true
-        console.log(this.lastUpdate)
       })
     }, 1000)
   }
@@ -33,9 +24,29 @@ export class Store {
         t.getUTCSeconds()
       )}`
     let timeStr = format(new Date(this.lastUpdate))
-    console.log(timeStr)
     return timeStr
   }
 
   stop = () => clearInterval(this.timer)
+
+  hydrate = serializedStore => {
+    if (serializedStore === undefined || serializedStore === null) return
+    this.lastUpdate =
+      serializedStore.lastUpdate != null
+        ? serializedStore.lastUpdate
+        : Date.now()
+    this.light = !!serializedStore.light
+  }
+}
+const store = new Store()
+
+export function initializeStore(snapshot = null) {
+  const _store = store || new Store()
+  _store.hydrate(JSON.parse(snapshot))
+  return _store
+}
+
+export function useStore(initialState) {
+  const store = useMemo(() => initializeStore(initialState), [initialState])
+  return store
 }

From f40188ac88667bb67f68c38530b742bcdd281e52 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@zeit.co>
Date: Mon, 20 Apr 2020 11:58:34 -0500
Subject: [PATCH 5/6] Updated store implementation and pages

---
 examples/with-mobx/pages/_app.js  |  2 +-
 examples/with-mobx/pages/index.js |  5 -----
 examples/with-mobx/pages/ssg.js   | 11 ++++++++++
 examples/with-mobx/pages/ssr.js   | 12 +++++++++++
 examples/with-mobx/store.js       | 34 +++++++++++++++++++------------
 5 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 examples/with-mobx/pages/ssg.js
 create mode 100644 examples/with-mobx/pages/ssr.js

diff --git a/examples/with-mobx/pages/_app.js b/examples/with-mobx/pages/_app.js
index 81fdf94089317..e75b81d85556a 100644
--- a/examples/with-mobx/pages/_app.js
+++ b/examples/with-mobx/pages/_app.js
@@ -1,5 +1,5 @@
-import { useStore } from '../store'
 import { Provider } from 'mobx-react'
+import { useStore } from '../store'
 
 export default function App({ Component, pageProps }) {
   const store = useStore(pageProps.initialState)
diff --git a/examples/with-mobx/pages/index.js b/examples/with-mobx/pages/index.js
index bb11e22873a01..95c2063569583 100644
--- a/examples/with-mobx/pages/index.js
+++ b/examples/with-mobx/pages/index.js
@@ -3,8 +3,3 @@ import Page from '../components/Page'
 export default function Index() {
   return <Page title="Index Page" linkTo="/other" />
 }
-
-export function getServerSideProps() {
-  // config lastUpdate
-  return { props: { initialState: JSON.stringify({ lastUpdate: new Date() }) } }
-}
diff --git a/examples/with-mobx/pages/ssg.js b/examples/with-mobx/pages/ssg.js
new file mode 100644
index 0000000000000..496dac3e7063f
--- /dev/null
+++ b/examples/with-mobx/pages/ssg.js
@@ -0,0 +1,11 @@
+import Page from '../components/Page'
+
+export default function SSG() {
+  return <Page title="Index Page" linkTo="/other" />
+}
+
+// If you build and start the app, the date returned here will have the same
+// value for all requests, as this method gets executed at build time.
+export function getStaticProps() {
+  return { props: { initialState: { lastUpdate: Date.now() } } }
+}
diff --git a/examples/with-mobx/pages/ssr.js b/examples/with-mobx/pages/ssr.js
new file mode 100644
index 0000000000000..f414935aa0b25
--- /dev/null
+++ b/examples/with-mobx/pages/ssr.js
@@ -0,0 +1,12 @@
+import Page from '../components/Page'
+
+export default function SSR() {
+  return <Page title="Index Page" linkTo="/other" />
+}
+
+// The date returned here will be different for every request that hits the page,
+// that is because the page becomes a serverless function instead of being statically
+// exported when you use `getServerSideProps` or `getInitialProps`
+export function getServerSideProps() {
+  return { props: { initialState: { lastUpdate: Date.now() } } }
+}
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index 8403163b6b3e7..5d171ce951d77 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -4,6 +4,8 @@ import { useMemo } from 'react'
 // eslint-disable-next-line react-hooks/rules-of-hooks
 useStaticRendering(typeof window === 'undefined')
 
+let store
+
 class Store {
   @observable lastUpdate = 0
   @observable light = false
@@ -23,26 +25,32 @@ class Store {
       `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(
         t.getUTCSeconds()
       )}`
-    let timeStr = format(new Date(this.lastUpdate))
-    return timeStr
+    return format(new Date(this.lastUpdate))
   }
 
   stop = () => clearInterval(this.timer)
 
-  hydrate = serializedStore => {
-    if (serializedStore === undefined || serializedStore === null) return
-    this.lastUpdate =
-      serializedStore.lastUpdate != null
-        ? serializedStore.lastUpdate
-        : Date.now()
-    this.light = !!serializedStore.light
+  hydrate = data => {
+    if (!data) return
+
+    this.lastUpdate = data.lastUpdate !== null ? data.lastUpdate : Date.now()
+    this.light = !!data.light
   }
 }
-const store = new Store()
 
-export function initializeStore(snapshot = null) {
-  const _store = store || new Store()
-  _store.hydrate(JSON.parse(snapshot))
+export function initializeStore(initialData = null) {
+  const _store = store ?? new Store()
+
+  // If your page has Next.js data fetching methods that use a Mobx store, it will
+  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
+  if (initialData) {
+    _store.hydrate(initialData)
+  }
+  // For SSG and SSR always create a new store
+  if (typeof window === 'undefined') return _store
+  // Create the store once in the client
+  if (!store) store = _store
+
   return _store
 }
 

From 437a1f0d2b04b16c1ce2c717fe4c993879d22d34 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@zeit.co>
Date: Mon, 20 Apr 2020 12:34:12 -0500
Subject: [PATCH 6/6] Updated readme

---
 examples/with-mobx/README.md | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md
index 40deb5119692c..f1db2f1ca65c6 100644
--- a/examples/with-mobx/README.md
+++ b/examples/with-mobx/README.md
@@ -1,24 +1,14 @@
 # MobX example
 
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach.
 
 In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
 
-![](http://i.imgur.com/JCxtWSj.gif)
+To illustrate SSG and SSR, go to `/ssg` and `/ssr`, those pages are using Next.js data fetching methods to get the date in the server and return it as props to the page, and then the browser will hydrate the store and continue updating the date.
 
-The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
-
-This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. Decorator support is activated by adding a `.babelrc` file at the root of the project:
+The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js`.
 
-```json
-{
-  "presets": ["next/babel"],
-  "plugins": [
-    ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
-  ]
-}
-```
+The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree.
 
 ## Deploy your own
 
@@ -58,7 +48,3 @@ yarn dev
 ```
 
 Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-### Rehydrating with server data
-
-Be aware that data that was used on the server (and provided via one of Next.js data fetching methods) will be stringified in order to rehydrate the client with it. That means, if you create a store that is, say, an `ObservableMap` and give it as prop to a page, then the server will render appropriately. But stringifying it for the client will turn the `ObservableMap` to an ordinary JavaScript object (which does not have `Map`-style methods and is not an observable). So it is better to create the store as a normal object and turn it into a `Observable` in the `render()` method. This way both sides have an `Observable` to work with.