Switch from defer to async (#10143)

vercel · Jan 17, 2020 · 08f241f · 08f241f
1 parent 53d5bd8
commit 08f241f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -570,7 +570,7 @@ export class NextScript extends Component<OriginProps> {
 
       return (
         <script
-          defer
+          async
           key={bundle.file}
           src={`${assetPrefix}/_next/${encodeURI(
             bundle.file
@@ -611,7 +611,7 @@ export class NextScript extends Component<OriginProps> {
             file
           )}${_devOnlyInvalidateCacheQueryString}`}
           nonce={this.props.nonce}
-          defer
+          async
           crossOrigin={this.props.crossOrigin || process.crossOrigin}
           {...modernProps}
         />
@@ -720,7 +720,7 @@ export class NextScript extends Component<OriginProps> {
 
     const pageScript = [
       <script
-        defer
+        async
         data-next-page={page}
         key={page}
         src={
@@ -734,7 +734,7 @@ export class NextScript extends Component<OriginProps> {
       />,
       process.env.__NEXT_MODERN_BUILD && (
         <script
-          defer
+          async
           data-next-page={page}
           key={`${page}-modern`}
           src={
@@ -753,7 +753,7 @@ export class NextScript extends Component<OriginProps> {
 
     const appScript = [
       <script
-        defer
+        async
         data-next-page="/_app"
         src={
           assetPrefix +
@@ -767,7 +767,7 @@ export class NextScript extends Component<OriginProps> {
       />,
       process.env.__NEXT_MODERN_BUILD && (
         <script
-          defer
+          async
           data-next-page="/_app"
           src={
             assetPrefix +

diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
@@ -678,21 +678,21 @@ describe('Production Usage', () => {
     }
   })
 
-  it('should have defer on all script tags', async () => {
+  it('should have async on all script tags', async () => {
     const html = await renderViaHTTP(appPort, '/')
     const $ = cheerio.load(html)
     let missing = false
 
     for (const script of $('script').toArray()) {
-      // application/json doesn't need defer
+      // application/json doesn't need async
       if (
         script.attribs.type === 'application/json' ||
         script.attribs.src.includes('polyfills')
       ) {
         continue
       }
 
-      if (script.attribs.async === '' || script.attribs.defer !== '') {
+      if (script.attribs.defer === '' || script.attribs.async !== '') {
         missing = true
       }
     }