Add client only example page

vercel#8620 (comment)
HaNdTriX · Sep 4, 2019 · b989366 · b989366
1 parent 6c2f5c4
commit b989366
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 0 deletions.
diff --git a/examples/with-apollo/components/Header.js b/examples/with-apollo/components/Header.js
@@ -6,6 +6,11 @@ const Header = ({ router: { pathname } }) => (
     <Link href='/'>
       <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
     </Link>
+    <Link href='/client-only'>
+      <a className={pathname === '/client-only' ? 'is-active' : ''}>
+        Client-Only
+      </a>
+    </Link>
     <Link href='/about'>
       <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
     </Link>

diff --git a/examples/with-apollo/components/InfoBox.js b/examples/with-apollo/components/InfoBox.js
@@ -0,0 +1,17 @@
+const InfoBox = ({ children }) => (
+  <div className='info'>
+    <style jsx>{`
+      .info {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-top: 1px solid #ececec;
+        border-bottom: 1px solid #ececec;
+      }
+    `}</style>
+    {children}
+  </div>
+)
+
+export default InfoBox
diff --git a/examples/with-apollo/pages/client-only.js b/examples/with-apollo/pages/client-only.js
@@ -0,0 +1,31 @@
+import App from '../components/App'
+import InfoBox from '../components/InfoBox'
+import Header from '../components/Header'
+import Submit from '../components/Submit'
+import PostList from '../components/PostList'
+import { withApollo } from '../lib/apollo'
+
+const ClientOnlyPage = props => (
+  <App>
+    <Header />
+    <InfoBox>
+      ℹ️ This example shows how to disable apollos query fetching on the server.
+      If you <a href='/client-only'>reload</a> this page, you will see a loader
+      since Apollo didn't fetch any data on the server. This allows{' '}
+      <a
+        href='https://nextjs.org/blog/next-9#automatic-static-optimization'
+        target='_blank'
+      >
+        automatic static optimization
+      </a>
+      .
+    </InfoBox>
+    <Submit />
+    <PostList />
+  </App>
+)
+
+export default withApollo(ClientOnlyPage, {
+  // Disable apollo ssr fetching in favor of automatic static optimization
+  ssr: false
+})
diff --git a/examples/with-apollo/pages/index.js b/examples/with-apollo/pages/index.js
@@ -1,4 +1,5 @@
 import App from '../components/App'
+import InfoBox from '../components/InfoBox'
 import Header from '../components/Header'
 import Submit from '../components/Submit'
 import PostList from '../components/PostList'
@@ -7,6 +8,18 @@ import { withApollo } from '../lib/apollo'
 const IndexPage = props => (
   <App>
     <Header />
+    <InfoBox>
+      ℹ️ This example shows how to fetch all initial apollo queries on the
+      server. If you <a href='/'>reload</a> this page you won't see a loader
+      since Apollo fetched all needed data on the server. This prevents{' '}
+      <a
+        href='https://nextjs.org/blog/next-9#automatic-static-optimization'
+        target='_blank'
+      >
+        automatic static optimization
+      </a>{' '}
+      in favor of full Server-Side-Rendering.
+    </InfoBox>
     <Submit />
     <PostList />
   </App>