first commit

test/integration/prerender-preview/pages/api/preview.js

@@ -0,0 +1,18 @@
+export default (req, res) => {
+  if (req.query.tooBig) {
+    try {
+      res.setPreviewData(new Array(2000).fill('a').join(''))
+    } catch (err) {
+      return res.status(500).end('too big')
+    }
+  } else {
+    res.setPreviewData(req.query, {
+      ...(req.query.cookieMaxAge
+        ? { maxAge: req.query.cookieMaxAge }
+        : undefined),
+      ...(req.query.cookiePath ? { path: req.query.cookiePath } : undefined),
+    })
+  }
+
+  res.status(200).end()
+}

test/integration/prerender-preview/pages/api/read.js

@@ -0,0 +1,7 @@
+export default (req, res) => {
+  const { preview, previewData } = req
+  res.json({
+    preview,
+    previewData,
+  })
+}

test/integration/prerender-preview/pages/api/reset.js

@@ -0,0 +1,10 @@
+export default (req, res) => {
+  res.clearPreviewData(
+    req.query.cookiePath
+      ? {
+          path: req.query.cookiePath,
+        }
+      : undefined
+  )
+  res.status(200).end()
+}

test/integration/prerender-preview/pages/index.js

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+export function getStaticProps({ preview, previewData }) {
+  return {
+    props: {
+      hasProps: true,
+      random: Math.random(),
+      preview: !!preview,
+      previewData: previewData || null,
+    },
+  }
+}
+
+export default function ({ hasProps, preview, previewData, random }) {
+  const router = useRouter()
+  const [reloaded, setReloaded] = useState(false)
+
+  return (
+    <>
+      <pre id="props-pre">
+        {hasProps
+          ? JSON.stringify(preview) + ' and ' + JSON.stringify(previewData)
+          : 'Has No Props'}
+      </pre>
+      <pre id="ssg-random">{random}</pre>
+      {reloaded ? <pre id="ssg-reloaded">Reloaded</pre> : null}
+      <button
+        id="reload-props"
+        onClick={async () => {
+          await router.replace(router.asPath)
+          setReloaded(true)
+        }}
+      >
+        Reload static props
+      </button>
+      <p id="router">{JSON.stringify({ isPreview: router.isPreview })}</p>
+    </>
+  )
+}

test/integration/prerender-preview/pages/to-index.js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export function getStaticProps() {
+  return { props: {} }
+}
+
+export default function () {
+  return (
+    <main>
+      <Link href="/" id="to-index">
+        To Index
+      </Link>
+    </main>
+  )
+}

test/integration/prerender-preview/test/index.test.ts

@@ -0,0 +1,403 @@
+/* eslint-env jest */
+
+import cheerio from 'cheerio'
+import cookie from 'cookie'
+import fs from 'fs-extra'
+import {
+  fetchViaHTTP,
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import qs from 'querystring'
+
+const appDir = join(__dirname, '..')
+
+async function getBuildId() {
+  return fs.readFile(join(appDir, '.next', 'BUILD_ID'), 'utf8')
+}
+
+function getData(html) {
+  const $ = cheerio.load(html)
+  const nextData = $('#__NEXT_DATA__')
+  const preEl = $('#props-pre')
+  const routerData = JSON.parse($('#router').text())
+  return {
+    nextData: JSON.parse(nextData.html()),
+    pre: preEl.text(),
+    routerData,
+  }
+}
+
+function runTests(startServer = nextStart) {
+  it('should compile successfully', async () => {
+    await fs.remove(join(appDir, '.next'))
+    const { code, stdout } = await nextBuild(appDir, [], {
+      stdout: true,
+    })
+    expect(code).toBe(0)
+    expect(stdout).toMatch(/Compiled successfully/)
+  })
+
+  let appPort, app
+  it('should start production application', async () => {
+    appPort = await findPort()
+    app = await startServer(appDir, appPort)
+  })
+
+  it('should return prerendered page on first request', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    const { nextData, pre, routerData } = getData(html)
+    expect(nextData).toMatchObject({ isFallback: false })
+    expect(nextData.isPreview).toBeUndefined()
+    expect(pre).toBe('false and null')
+    expect(routerData.isPreview).toBe(false)
+  })
+
+  it('should return prerendered page on second request', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    const { nextData, pre, routerData } = getData(html)
+    expect(nextData).toMatchObject({ isFallback: false })
+    expect(nextData.isPreview).toBeUndefined()
+    expect(pre).toBe('false and null')
+    expect(routerData.isPreview).toBe(false)
+  })
+
+  it('should throw error when setting too large of preview data', async () => {
+    const res = await fetchViaHTTP(appPort, '/api/preview?tooBig=true')
+    expect(res.status).toBe(500)
+    expect(await res.text()).toBe('too big')
+  })
+
+  let previewCookieString
+  it('should enable preview mode', async () => {
+    const res = await fetchViaHTTP(appPort, '/api/preview', { lets: 'goooo' })
+    expect(res.status).toBe(200)
+
+    const originalCookies = res.headers.get('set-cookie').split(',')
+    const cookies = originalCookies.map((cookieRaw) => cookie.parse(cookieRaw))
+
+    expect(originalCookies.every((c) => c.includes('; Secure;'))).toBe(true)
+
+    expect(cookies.length).toBe(2)
+    expect(cookies[0]).toMatchObject({ Path: '/', SameSite: 'None' })
+    expect(cookies[0]).toHaveProperty('__prerender_bypass')
+    expect(cookies[0]).not.toHaveProperty('Max-Age')
+    expect(cookies[1]).toMatchObject({ Path: '/', SameSite: 'None' })
+    expect(cookies[1]).toHaveProperty('__next_preview_data')
+    expect(cookies[1]).not.toHaveProperty('Max-Age')
+
+    previewCookieString =
+      cookie.serialize('__prerender_bypass', cookies[0].__prerender_bypass) +
+      '; ' +
+      cookie.serialize('__next_preview_data', cookies[1].__next_preview_data)
+  })
+
+  it('should expire cookies with a maxAge', async () => {
+    const expiry = '60'
+    const res = await fetchViaHTTP(appPort, '/api/preview', {
+      cookieMaxAge: expiry,
+    })
+    expect(res.status).toBe(200)
+
+    const originalCookies = res.headers.get('set-cookie').split(',')
+    const cookies = originalCookies.map((cookieRaw) => cookie.parse(cookieRaw))
+
+    expect(originalCookies.every((c) => c.includes('; Secure;'))).toBe(true)
+
+    expect(cookies.length).toBe(2)
+    expect(cookies[0]).toMatchObject({ Path: '/', SameSite: 'None' })
+    expect(cookies[0]).toHaveProperty('__prerender_bypass')
+    expect(cookies[0]['Max-Age']).toBe(expiry)
+    expect(cookies[1]).toMatchObject({ Path: '/', SameSite: 'None' })
+    expect(cookies[1]).toHaveProperty('__next_preview_data')
+    expect(cookies[1]['Max-Age']).toBe(expiry)
+  })
+  it('should set custom path cookies', async () => {
+    const path = '/path'
+    const res = await fetchViaHTTP(appPort, '/api/preview', {
+      cookiePath: path,
+    })
+    expect(res.status).toBe(200)
+
+    const originalCookies = res.headers.get('set-cookie').split(',')
+    const cookies = originalCookies.map((cookieRaw) => cookie.parse(cookieRaw))
+
+    expect(originalCookies.every((c) => c.includes('; Secure;'))).toBe(true)
+
+    expect(cookies.length).toBe(2)
+    expect(cookies[0]).toMatchObject({ Path: path, SameSite: 'None' })
+    expect(cookies[0]).toHaveProperty('__prerender_bypass')
+    expect(cookies[0]['Path']).toBe(path)
+    expect(cookies[0]).toMatchObject({ Path: path, SameSite: 'None' })
+    expect(cookies[1]).toHaveProperty('__next_preview_data')
+    expect(cookies[1]['Path']).toBe(path)
+  })
+  it('should not return fallback page on preview request', async () => {
+    const res = await fetchViaHTTP(
+      appPort,
+      '/',
+      {},
+      { headers: { Cookie: previewCookieString } }
+    )
+    const html = await res.text()
+
+    const { nextData, pre, routerData } = getData(html)
+    expect(res.headers.get('cache-control')).toBe(
+      'private, no-cache, no-store, max-age=0, must-revalidate'
+    )
+    expect(nextData).toMatchObject({ isFallback: false, isPreview: true })
+    expect(pre).toBe('true and {"lets":"goooo"}')
+    expect(routerData.isPreview).toBe(true)
+  })
+
+  it('should return correct caching headers for data preview request', async () => {
+    const res = await fetchViaHTTP(
+      appPort,
+      `/_next/data/${encodeURI(await getBuildId())}/index.json`,
+      {},
+      { headers: { Cookie: previewCookieString } }
+    )
+    const json = await res.json()
+
+    expect(res.headers.get('cache-control')).toBe(
+      'private, no-cache, no-store, max-age=0, must-revalidate'
+    )
+    expect(json).toMatchObject({
+      pageProps: {
+        preview: true,
+        previewData: { lets: 'goooo' },
+      },
+    })
+  })
+
+  it('should return cookies to be expired on reset request', async () => {
+    const res = await fetchViaHTTP(
+      appPort,
+      '/api/reset',
+      {},
+      { headers: { Cookie: previewCookieString } }
+    )
+    expect(res.status).toBe(200)
+
+    const cookies = res.headers
+      .get('set-cookie')
+      .replace(/(=(?!Lax)\w{3}),/g, '$1')
+      .split(',')
+      .map((cookieRaw) => cookie.parse(cookieRaw))
+
+    expect(cookies.length).toBe(2)
+    expect(cookies[0]).toMatchObject({
+      Path: '/',
+      SameSite: 'None',
+      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
+    })
+    expect(cookies[0]).toHaveProperty('__prerender_bypass')
+    expect(cookies[0]).not.toHaveProperty('Max-Age')
+    expect(cookies[1]).toMatchObject({
+      Path: '/',
+      SameSite: 'None',
+      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
+    })
+    expect(cookies[1]).toHaveProperty('__next_preview_data')
+    expect(cookies[1]).not.toHaveProperty('Max-Age')
+  })
+
+  it('should return cookies to be expired on reset request with path specified', async () => {
+    const res = await fetchViaHTTP(
+      appPort,
+      '/api/reset',
+      { cookiePath: '/blog' },
+      { headers: { Cookie: previewCookieString } }
+    )
+    expect(res.status).toBe(200)
+
+    const cookies = res.headers
+      .get('set-cookie')
+      .replace(/(=(?!Lax)\w{3}),/g, '$1')
+      .split(',')
+      .map((cookieRaw) => cookie.parse(cookieRaw))
+
+    expect(cookies.length).toBe(2)
+    expect(cookies[0]).toMatchObject({
+      Path: '/blog',
+      SameSite: 'None',
+      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
+    })
+    expect(cookies[0]).toHaveProperty('__prerender_bypass')
+    expect(cookies[0]).not.toHaveProperty('Max-Age')
+    expect(cookies[1]).toMatchObject({
+      Path: '/blog',
+      SameSite: 'None',
+      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
+    })
+    expect(cookies[1]).toHaveProperty('__next_preview_data')
+    expect(cookies[1]).not.toHaveProperty('Max-Age')
+  })
+
+  it('should pass undefined to API routes when not in preview', async () => {
+    const res = await fetchViaHTTP(appPort, `/api/read`)
+    const json = await res.json()
+
+    expect(json).toMatchObject({})
+  })
+  it('should pass the preview data to API routes', async () => {
+    const res = await fetchViaHTTP(
+      appPort,
+      '/api/read',
+      {},
+      { headers: { Cookie: previewCookieString } }
+    )
+    const json = await res.json()
+
+    expect(json).toMatchObject({
+      preview: true,
+      previewData: { lets: 'goooo' },
+    })
+  })
+
+  afterAll(async () => {
+    await killApp(app)
+  })
+}
+
+describe('Prerender Preview Mode', () => {
+  ;(process.env.TURBOPACK_BUILD ? describe.skip : describe)(
+    'development mode',
+    () => {
+      let appPort, app
+      it('should start development application', async () => {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+      })
+
+      let previewCookieString
+      it('should enable preview mode', async () => {
+        const res = await fetchViaHTTP(appPort, '/api/preview', {
+          lets: 'goooo',
+        })
+        expect(res.status).toBe(200)
+
+        const cookies = res.headers
+          .get('set-cookie')
+          .split(',')
+          .map((cookieRaw) => cookie.parse(cookieRaw))
+
+        expect(cookies.length).toBe(2)
+        previewCookieString =
+          cookie.serialize(
+            '__prerender_bypass',
+            cookies[0].__prerender_bypass
+          ) +
+          '; ' +
+          cookie.serialize(
+            '__next_preview_data',
+            cookies[1].__next_preview_data
+          )
+      })
+
+      it('should return cookies to be expired after dev server reboot', async () => {
+        await killApp(app)
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+
+        const res = await fetchViaHTTP(
+          appPort,
+          '/',
+          {},
+          { headers: { Cookie: previewCookieString } }
+        )
+        expect(res.status).toBe(200)
+
+        const body = await res.text()
+        // "err":{"name":"TypeError","message":"Cannot read property 'previewModeId' of undefined"
+        expect(body).not.toContain('"err"')
+        expect(body).not.toContain('TypeError')
+        expect(body).not.toContain('previewModeId')
+
+        const cookies = res.headers
+          .get('set-cookie')
+          .replace(/(=(?!Lax)\w{3}),/g, '$1')
+          .split(',')
+          .map((cookieRaw) => cookie.parse(cookieRaw))
+
+        expect(cookies.length).toBe(2)
+      })
+
+      /** @type {import('next-webdriver').Chain} */
+      let browser
+      it('should start the client-side browser', async () => {
+        browser = await webdriver(
+          appPort,
+          '/api/preview?' + qs.stringify({ client: 'mode' })
+        )
+      })
+
+      it('should fetch preview data on SSR', async () => {
+        await browser.get(`http://localhost:${appPort}/`)
+        await browser.waitForElementByCss('#props-pre')
+        // expect(await browser.elementById('props-pre').text()).toBe('Has No Props')
+        // await new Promise(resolve => setTimeout(resolve, 2000))
+        expect(await browser.elementById('props-pre').text()).toBe(
+          'true and {"client":"mode"}'
+        )
+      })
+
+      it('should fetch preview data on CST', async () => {
+        await browser.get(`http://localhost:${appPort}/to-index`)
+        await browser.waitForElementByCss('#to-index')
+        await browser.eval('window.itdidnotrefresh = "hello"')
+        await browser.elementById('to-index').click()
+        await browser.waitForElementByCss('#props-pre')
+        expect(await browser.eval('window.itdidnotrefresh')).toBe('hello')
+        expect(await browser.elementById('props-pre').text()).toBe(
+          'true and {"client":"mode"}'
+        )
+      })
+
+      it('should fetch prerendered data', async () => {
+        await browser.get(`http://localhost:${appPort}/api/reset`)
+
+        await browser.get(`http://localhost:${appPort}/`)
+        await browser.waitForElementByCss('#props-pre')
+        expect(await browser.elementById('props-pre').text()).toBe(
+          'false and null'
+        )
+      })
+
+      it('should fetch live static props with preview active', async () => {
+        await browser.get(`http://localhost:${appPort}/`)
+
+        await browser.waitForElementByCss('#ssg-random')
+        const initialRandom = await browser.elementById('ssg-random').text()
+
+        // reload static props with router.replace
+        await browser.elementById('reload-props').click()
+
+        // wait for route change to complete and set updated state
+        await browser.waitForElementByCss('#ssg-reloaded')
+
+        // assert that the random number from static props has changed (thus, was re-evaluated)
+        expect(await browser.elementById('ssg-random').text()).not.toBe(
+          initialRandom
+        )
+      })
+
+      afterAll(async () => {
+        await browser.close()
+        await killApp(app)
+      })
+    }
+  )
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      runTests()
+    }
+  )
+})