Merge branch 'canary' into enable/chunking

docs/advanced-features/automatic-static-optimization.md

@@ -10,7 +10,7 @@ This feature allows Next.js to emit hybrid applications that contain **both serv
 
 > Statically generated pages are still reactive: Next.js will hydrate your application client-side to give it full interactivity.
 
-One of the main benefits this feature is that optimized pages require no server-side computation, and can be instantly streamed to the end-user from multiple CDN locations. The result is an _ultra fast_ loading experience for your users.
+One of the main benefits of this feature is that optimized pages require no server-side computation, and can be instantly streamed to the end-user from multiple CDN locations. The result is an _ultra fast_ loading experience for your users.
 
 ## How it works
 

docs/advanced-features/static-html-export.md

@@ -15,9 +15,9 @@ description: Export your Next.js app to static HTML, and run it standalone witho
 
 The exported app supports almost every feature of Next.js, including dynamic routes, prefetching, preloading and dynamic imports.
 
-The way `next export` works is by prerendering all pages to HTML; it does so based on a mapping mapping called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md).
+The way `next export` works is by prerendering all pages to HTML; it does so based on a mapping called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md).
 
-> If your pages don't have `getInitialProps` you may not need `next export` at all, `next build` is already enough thanks to [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
+> If your pages don't have `getInitialProps` you may not need `next export` at all; `next build` is already enough thanks to [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
 
 ## How to use it
 
@@ -53,6 +53,6 @@ You can read about deploying your Next.js application in the [deployment section
 
 ## Caveats
 
-- With `next export`, we build a HTML version of your app. At export time we will run the [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md) in your pages. The `req` and `res` fields of the [`context`](/docs/api-reference/data-fetching/getInitialProps.md#context-object) object will be empty objects during export as there is no server running
-- You won't be able to render HTML dynamically when static exporting, as we pre-build the HTML files. You application can be a hybrid of [Static Generation](/docs/basic-features/pages.md#static-generation) and [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) when you don't use `next export`, you can learn more about it in the [pages section](/docs/basic-features/pages.md).
-- [API Routes](/docs/api-routes/introduction.md) are not supported by this method because they can't be prerendered to HTML
+- With `next export`, we build an HTML version of your app. At export time we will run the [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md) in your pages. The `req` and `res` fields of the [`context`](/docs/api-reference/data-fetching/getInitialProps.md#context-object) object will be empty objects during export as there is no server running.
+- You won't be able to render HTML dynamically when static exporting, as we pre-build the HTML files. Your application can be a hybrid of [Static Generation](/docs/basic-features/pages.md#static-generation) and [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) when you don't use `next export`. You can learn more about it in the [pages section](/docs/basic-features/pages.md).
+- [API Routes](/docs/api-routes/introduction.md) are not supported by this method because they can't be prerendered to HTML.

packages/next/client/index.js

@@ -119,6 +119,7 @@ class Container extends React.Component {
           // client-side hydration. Your app should _never_ use this property.
           // It may change at any time without notice.
           _h: 1,
+          shallow: true,
         }
       )
     }

test/integration/export-serverless/next.config.js

@@ -29,6 +29,7 @@ module.exports = phase => {
           query: { text: 'this file has an extension' },
         },
         '/query': { page: '/query', query: { a: 'blue' } },
+        '/query-update': { page: '/query-update', query: { a: 'blue' } },
         // API route
         '/blog/nextjs/comment/test': { page: '/blog/[post]/comment/[id]' },
       }

test/integration/export-serverless/pages/query-update.js

@@ -0,0 +1,7 @@
+import { useRouter } from 'next/router'
+
+const Page = () => <div id="query">{JSON.stringify(useRouter().query)}</div>
+
+Page.getInitialProps = () => ({ hello: 'world' })
+
+export default Page

test/integration/export-serverless/test/browser.js

@@ -183,11 +183,10 @@ export default function(context) {
     })
 
     it('should update query after mount', async () => {
-      const browser = await webdriver(context.port, '/query?hello=1')
-
-      await waitFor(1000)
-      const text = await browser.eval('document.body.innerHTML')
-      expect(text).toMatch(/hello/)
+      const browser = await webdriver(context.port, '/query-update?hello=world')
+      await waitFor(2000)
+      const query = await browser.elementByCss('#query').text()
+      expect(JSON.parse(query)).toEqual({ hello: 'world', a: 'blue' })
       await browser.close()
     })
 

test/integration/export/next.config.js

@@ -34,6 +34,7 @@ module.exports = phase => {
           query: { text: 'this file has an extension' },
         },
         '/query': { page: '/query', query: { a: 'blue' } },
+        '/query-update': { page: '/query-update', query: { a: 'blue' } },
         // API route
         '/blog/nextjs/comment/test': { page: '/blog/[post]/comment/[id]' },
       }

test/integration/export/pages/query-update.js

@@ -0,0 +1,7 @@
+import { useRouter } from 'next/router'
+
+const Page = () => <div id="query">{JSON.stringify(useRouter().query)}</div>
+
+Page.getInitialProps = () => ({ hello: 'world' })
+
+export default Page

test/integration/export/test/browser.js

@@ -183,11 +183,10 @@ export default function(context) {
     })
 
     it('should update query after mount', async () => {
-      const browser = await webdriver(context.port, '/query?hello=1')
-
-      await waitFor(1000)
-      const text = await browser.eval('document.body.innerHTML')
-      expect(text).toMatch(/hello/)
+      const browser = await webdriver(context.port, '/query-update?hello=world')
+      await waitFor(2000)
+      const query = await browser.elementByCss('#query').text()
+      expect(JSON.parse(query)).toEqual({ hello: 'world', a: 'blue' })
       await browser.close()
     })
 

test/integration/prerender/pages/something.js

@@ -20,7 +20,7 @@ export default ({ world, time, params, random }) => {
     <>
       <p>hello: {world}</p>
       <span>time: {time}</span>
-      <div>{random}</div>
+      <div id="random">{random}</div>
       <div id="params">{JSON.stringify(params)}</div>
       <div id="query">{JSON.stringify(useRouter().query)}</div>
       <Link href="/">

test/integration/prerender/test/index.test.js

@@ -340,6 +340,23 @@ const runTests = (dev = false) => {
         await fs.writeFile(indexPage, origContent)
       }
     })
+
+    it('should not re-call getStaticProps when updating query', async () => {
+      const browser = await webdriver(appPort, '/something?hello=world')
+      await waitFor(2000)
+
+      const query = await browser.elementByCss('#query').text()
+      expect(JSON.parse(query)).toEqual({ hello: 'world' })
+
+      const {
+        props: {
+          pageProps: { random: initialRandom },
+        },
+      } = await browser.eval('window.__NEXT_DATA__')
+
+      const curRandom = await browser.elementByCss('#random').text()
+      expect(curRandom).toBe(initialRandom + '')
+    })
   } else {
     it('should should use correct caching headers for a no-revalidate page', async () => {
       const initialRes = await fetchViaHTTP(appPort, '/something')