Opt out of cache header if _app has custom getInitialProps (#7409)

* Opt out of cache header if _app has custom
getInitialProps to match autoExport behavior

* Fix wrong component

* Add test for cache header

examples/with-redux-persist/components/data-list.js

@@ -1,4 +1,3 @@
-
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
@@ -14,22 +13,22 @@ class DataList extends Component {
     const self = this
 
     this.setState({ isDataLoading: true })
-    window.fetch('https://jsonplaceholder.typicode.com/users')
-      .then(
-        function (response) {
-          if (response.status !== 200) {
-            console.log('Looks like there was a problem. Status Code: ' +
-          response.status)
-            loadingExampleDataFailure()
-            self.setState({ isDataLoading: false })
-            return
-          }
-          response.json().then(function (data) {
-            loadExampleData(data)
-            self.setState({ isDataLoading: false })
-          })
+    window
+      .fetch('https://jsonplaceholder.typicode.com/users')
+      .then(function (response) {
+        if (response.status !== 200) {
+          console.log(
+            'Looks like there was a problem. Status Code: ' + response.status
+          )
+          loadingExampleDataFailure()
+          self.setState({ isDataLoading: false })
+          return
         }
-      )
+        response.json().then(function (data) {
+          loadExampleData(data)
+          self.setState({ isDataLoading: false })
+        })
+      })
       .catch(function (err) {
         console.log('Fetch Error :-S', err)
         loadingExampleDataFailure()
@@ -43,14 +42,14 @@ class DataList extends Component {
 
     return (
       <div>
-        <h1>
-          API DATA:
-        </h1>
+        <h1>API DATA:</h1>
         {exampleData && !isDataLoading ? (
           <pre>
             <code>{JSON.stringify(exampleData, null, 2)}</code>
           </pre>
-        ) : (<p style={{ color: 'blue' }}>Loading...</p>) }
+        ) : (
+          <p style={{ color: 'blue' }}>Loading...</p>
+        )}
         {error && <p style={{ color: 'red' }}>Error fetching data.</p>}
       </div>
     )

examples/with-redux-persist/pages/_app.js

@@ -16,7 +16,10 @@ class MyApp extends App {
     return (
       <Container>
         <Provider store={reduxStore}>
-          <PersistGate loading={<Component {...pageProps} />} persistor={this.persistor}>
+          <PersistGate
+            loading={<Component {...pageProps} />}
+            persistor={this.persistor}
+          >
             <Component {...pageProps} />
           </PersistGate>
         </Provider>

packages/next-server/lib/utils.ts

@@ -200,8 +200,14 @@ export async function loadGetInitialProps<
   // if page component doesn't have getInitialProps
   // set cache-control header to stale-while-revalidate
   if (ctx.Component && !ctx.Component.getInitialProps) {
-    if (res && res.setHeader) {
-      res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate')
+    const customAppGetInitialProps = (Component as any).origGetInitialProps && (
+      (Component as any).origGetInitialProps !== Component.getInitialProps
+    )
+
+    if (!customAppGetInitialProps && res && res.setHeader) {
+      res.setHeader(
+        'Cache-Control', 's-maxage=86400, stale-while-revalidate',
+      )
     }
   }
 

test/integration/cache-header/pages/_app.js

@@ -0,0 +1,7 @@
+import App from 'next/app'
+
+export default class MyApp extends App {
+  static async getInitialProps () {
+    return {}
+  }
+}

test/integration/cache-header/pages/index.js

@@ -0,0 +1 @@
+export default () => <p>Hi 👋</p>

test/integration/cache-header/test/index.test.js

@@ -0,0 +1,30 @@
+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  fetchViaHTTP
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60
+
+const appDir = join(__dirname, '..')
+let appPort
+let server
+
+describe('Cache Header', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    server = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(server))
+
+  it('Does not set cache header with custom getInitialProps in _app', async () => {
+    const res = await fetchViaHTTP(appPort, '/')
+    expect(res.headers.get('Cache-Control')).not.toBe('s-maxage=86400, stale-while-revalidate')
+  })
+})