Merge branch 'canary' into fix-dedupe-head

.circleci/config.yml

@@ -7,7 +7,7 @@ version: 2.1
 aliases:
   - &store_test_results
     store_test_results:
-      path: ~/repo/test_results.xml
+      path: ~/repo/test
   - &persist_to_workspace
     persist_to_workspace:
       root: ~/repo
@@ -63,9 +63,9 @@ commands:
       - run:
           name: Run All Tests
           command: |
-            node run-tests.js $(
+            node run-tests.js --timings $(
               circleci tests glob "test/**/*.test.*" | \
-              circleci tests split
+              circleci tests split --split-by=timings
             )
           environment:
             NEXT_TELEMETRY_DISABLED: '1'
@@ -138,7 +138,7 @@ jobs:
       - yarn_react_integration
       - *persist_to_workspace
   test:
-    parallelism: 3
+    parallelism: 4
     executor: node
     steps:
       - *attach_workspace

examples/progressive-render/README.md

@@ -39,11 +39,18 @@ now
 
 ## The idea behind the example
 
-Sometimes you want to **not** server render some parts of your application. That can be third party components without server render capabilities, components that depends on `window` and other browser only APIs or just because that content isn't important enough for the user (eg. below the fold content).
+Sometimes you want to **not** server render some parts of your application.
 
-In that case you can wrap the component in `react-no-ssr` which will only render the component client-side.
+For example:
+
+1. Third party components without server render capabilities
+2. Components that depend on `window` or other browser only APIs
+3. Content isn't important enough for the user (eg. below the fold content)
+
+To handle these cases, you can conditionally render your component using the `useEffect` hook.
 
 This example features:
 
+- A custom hook called `useMounted`, implementing this behavior
 - An app with a component that must only be rendered in the client
 - A loading component that will be displayed before rendering the client-only component

examples/progressive-render/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "next": "latest",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-no-ssr": "1.1.0"
+    "react-dom": "^16.7.0"
   }
 }

examples/progressive-render/pages/index.js

@@ -1,28 +1,38 @@
-import React from 'react'
-import NoSSR from 'react-no-ssr'
+import React, { useEffect, useState } from 'react'
 import Loading from '../components/Loading'
 
-export default () => (
-  <main>
-    <section>
-      <h1>This section is server-side rendered.</h1>
-    </section>
+function useMounted() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  return mounted
+}
 
-    <NoSSR onSSR={<Loading />}>
+export default function HomePage() {
+  const isMounted = useMounted()
+  return (
+    <main>
       <section>
-        <h2>
-          This section is <em>only</em> client-side rendered.
-        </h2>
+        <h1>This section is server-side rendered.</h1>
       </section>
-    </NoSSR>
 
-    <style jsx>{`
-      section {
-        align-items: center;
-        display: flex;
-        height: 50vh;
-        justify-content: center;
-      }
-    `}</style>
-  </main>
-)
+      {isMounted ? (
+        <section>
+          <h2>
+            This section is <em>only</em> client-side rendered.
+          </h2>
+        </section>
+      ) : (
+        <Loading />
+      )}
+
+      <style jsx>{`
+        section {
+          align-items: center;
+          display: flex;
+          height: 50vh;
+          justify-content: center;
+        }
+      `}</style>
+    </main>
+  )
+}