Add prerender indicator for app router (vercel#67306)

## Background

Currently in app router during development all pages are dynamic
rendered and streamed since we don't know if a page will be prerendered
until after the page is rendered. During build time we do a render pass
for each path and if it doesn't bail from static generation it is
considered prerendered/ISR'd.

Since it can be tricky to track all the bail outs for static generation
and doing numerous builds to track this isn't feasible we want to have
some sort of signal in development to show if it would have been
prerendered.

## New Handling

To alleviate the above pain point we are planning to bring back the
prerendered indicator from pages initially and have a config to disable
if desired. We are also going to investigate other possible indicators
potentially through headers or similar.

<details>

<summary>Preview</summary>

![CleanShot 2024-06-29 at 08 56
11@2x](https://github.com/vercel/next.js/assets/22380829/37d4d351-903d-49a2-9541-932e7d5a1e54)

![CleanShot 2024-06-29 at 08 55
46@2x](https://github.com/vercel/next.js/assets/22380829/8356f287-e0d0-4c37-aa1e-1f08639dd478)

</details>

---------

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

Author: ijjk

docs/02-app/02-api-reference/05-next-config-js/devIndicators.mdx

@@ -31,6 +31,16 @@ module.exports = {
 }
 ```
 
+There is also an indicator to show whether a page will be prerendered during a build in dev. It can be hidden per-page by clicking although if you never want it to show it can be disabled:
+
+```js filename="next.config.js"
+module.exports = {
+  devIndicators: {
+    appIsrStatus: false,
+  },
+}
+```
+
 </AppOnly>
 
 <PagesOnly>

packages/next/src/build/webpack/plugins/define-env-plugin.ts

@@ -173,6 +173,9 @@ export function getDefineEnv({
         ? 'nodejs'
         : '',
     'process.env.NEXT_MINIMAL': '',
+    'process.env.__NEXT_APP_ISR_INDICATOR': Boolean(
+      config.devIndicators.appIsrStatus
+    ),
     'process.env.__NEXT_PPR': checkIsAppPPREnabled(config.experimental.ppr),
     'process.env.__NEXT_AFTER': config.experimental.after ?? false,
     'process.env.NEXT_DEPLOYMENT_ID': config.deploymentId || false,

packages/next/src/client/app-index.tsx

@@ -37,6 +37,16 @@ window.console.error = (...args) => {
   }
 }
 
+if (process.env.NODE_ENV === 'development') {
+  const initializePrerenderIndicator =
+    require('./components/prerender-indicator')
+      .default as typeof import('./components/prerender-indicator').default
+
+  initializePrerenderIndicator((handlers) => {
+    window.next.isrIndicatorHandlers = handlers
+  })
+}
+
 /// <reference types="react-dom/experimental" />
 
 const appElement: HTMLElement | Document | null = document

packages/next/src/client/components/prerender-indicator.ts

@@ -0,0 +1,226 @@
+import type { ShowHideHandler } from '../dev/dev-build-watcher'
+
+export default function initializePrerenderIndicator(
+  toggleCallback: (handlers: ShowHideHandler) => void
+) {
+  const shadowHost = document.createElement('div')
+  shadowHost.id = '__next-prerender-indicator'
+  // Make sure container is fixed and on a high zIndex so it shows
+  shadowHost.style.position = 'fixed'
+  shadowHost.style.bottom = '20px'
+  shadowHost.style.right = '10px'
+  shadowHost.style.width = '0'
+  shadowHost.style.height = '0'
+  shadowHost.style.zIndex = '99998'
+  shadowHost.style.transition = 'all 100ms ease'
+
+  document.body.appendChild(shadowHost)
+
+  let shadowRoot
+  let prefix = ''
+
+  if (shadowHost.attachShadow) {
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+  } else {
+    // If attachShadow is undefined then the browser does not support
+    // the Shadow DOM, we need to prefix all the names so there
+    // will be no conflicts
+    shadowRoot = shadowHost
+    prefix = '__next-prerender-indicator-'
+  }
+
+  // Container
+  const container = createContainer(prefix)
+  shadowRoot.appendChild(container)
+
+  // CSS
+  const css = createCss(prefix)
+  shadowRoot.appendChild(css)
+
+  const expandEl = container.querySelector('a')
+  const closeEl: HTMLDivElement | null = container.querySelector(
+    `#${prefix}close`
+  ) as any
+
+  if (closeEl) {
+    closeEl.title = 'Click to disable indicator for one hour in this session'
+  }
+
+  // State
+  const dismissKey = '__NEXT_DISMISS_PRERENDER_INDICATOR'
+  const dismissUntil = parseInt(
+    window.localStorage.getItem(dismissKey) || '',
+    10
+  )
+  const dismissed = dismissUntil > new Date().getTime()
+
+  if (dismissed) return
+
+  let isVisible = false
+
+  function updateContainer() {
+    if (isVisible) {
+      container.classList.add(`${prefix}visible`)
+    } else {
+      container.classList.remove(`${prefix}visible`)
+    }
+  }
+  const expandedClass = `${prefix}expanded`
+  let toggleTimeout: ReturnType<typeof setTimeout>
+
+  const toggleExpand = (expand = true) => {
+    clearTimeout(toggleTimeout)
+
+    toggleTimeout = setTimeout(() => {
+      if (expand) {
+        expandEl?.classList.add(expandedClass)
+        if (closeEl) {
+          closeEl.style.display = 'flex'
+        }
+      } else {
+        expandEl?.classList.remove(expandedClass)
+        if (closeEl) {
+          closeEl.style.display = 'none'
+        }
+      }
+    }, 50)
+  }
+
+  closeEl?.addEventListener('click', () => {
+    const oneHourAway = new Date().getTime() + 1 * 60 * 60 * 1000
+    window.localStorage.setItem(dismissKey, oneHourAway + '')
+    isVisible = false
+    updateContainer()
+  })
+  closeEl?.addEventListener('mouseenter', () => toggleExpand())
+  closeEl?.addEventListener('mouseleave', () => toggleExpand(false))
+  expandEl?.addEventListener('mouseenter', () => toggleExpand())
+  expandEl?.addEventListener('mouseleave', () => toggleExpand(false))
+
+  toggleCallback({
+    show: () => {
+      isVisible = true
+      updateContainer()
+    },
+    hide: () => {
+      isVisible = false
+      updateContainer()
+    },
+  })
+}
+
+function createContainer(prefix: string) {
+  const container = document.createElement('div')
+  container.id = `${prefix}container`
+  container.innerHTML = `
+    <button id="${prefix}close" title="Hide indicator for session">
+      <span>×</span>
+    </button>
+    <a href="https://nextjs.org/docs/api-reference/next.config.js/devIndicators" target="_blank" rel="noreferrer">
+      <div id="${prefix}icon-wrapper">
+          <svg width="15" height="20" viewBox="0 0 60 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M36 3L30.74 41H8L36 3Z" fill="black"/>
+          <path d="M25 77L30.26 39H53L25 77Z" fill="black"/>
+          <path d="M13.5 33.5L53 39L47.5 46.5L7 41.25L13.5 33.5Z" fill="black"/>
+          </svg>
+          Prerendered Page
+      </div>
+    </a>
+  `
+  return container
+}
+
+function createCss(prefix: string) {
+  const css = document.createElement('style')
+  css.textContent = `
+    #${prefix}container {
+      position: absolute;
+      display: none;
+      bottom: 10px;
+      right: 15px;
+    }
+
+    #${prefix}close {
+      top: -10px;
+      right: -10px;
+      border: none;
+      width: 18px;
+      height: 18px;
+      color: #333333;
+      font-size: 16px;
+      cursor: pointer;
+      display: none;
+      position: absolute;
+      background: #ffffff;
+      border-radius: 100%;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    #${prefix}container a {
+      color: inherit;
+      text-decoration: none;
+      width: 15px;
+      height: 23px;
+      overflow: hidden;
+
+      border-radius: 3px;
+      background: #fff;
+      color: #000;
+      font: initial;
+      cursor: pointer;
+      letter-spacing: initial;
+      text-shadow: initial;
+      text-transform: initial;
+      visibility: initial;
+      font-size: 14px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+      padding: 4px 2px;
+      align-items: center;
+      box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+      display: flex;
+      transition: opacity 0.1s ease, bottom 0.1s ease, width 0.3s ease;
+      animation: ${prefix}fade-in 0.1s ease-in-out;
+    }
+
+    #${prefix}icon-wrapper {
+      width: 140px;
+      height: 20px;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      position: relative;
+    }
+
+    #${prefix}icon-wrapper svg {
+      flex-shrink: 0;
+      margin-right: 3px;
+    }
+
+    #${prefix}container a.${prefix}expanded {
+      width: 135px;
+    }
+
+    #${prefix}container.${prefix}visible {
+      display: flex;
+      bottom: 10px;
+      opacity: 1;
+    }
+
+    @keyframes ${prefix}fade-in {
+      from {
+        bottom: 0px;
+        opacity: 0;
+      }
+      to {
+        bottom: 10px;
+        opacity: 1;
+      }
+    }
+  `
+
+  return css
+}

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import { useCallback, useEffect, startTransition, useMemo } from 'react'
+import { useCallback, useEffect, startTransition, useMemo, useRef } from 'react'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import formatWebpackMessages from '../internal/helpers/format-webpack-messages'
-import { useRouter } from '../../navigation'
+import { usePathname, useRouter } from '../../navigation'
 import {
   ACTION_BEFORE_REFRESH,
   ACTION_BUILD_ERROR,
@@ -33,6 +33,7 @@ import type {
 import { extractModulesFromTurbopackMessage } from '../../../../server/dev/extract-modules-from-turbopack-message'
 import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared'
 import type { HydrationErrorState } from '../internal/helpers/hydration-error-info'
+import type { ShowHideHandler } from '../../../dev/dev-build-watcher'
 interface Dispatcher {
   onBuildOk(): void
   onBuildError(message: string): void
@@ -241,7 +242,9 @@ function processMessage(
   sendMessage: (message: string) => void,
   processTurbopackMessage: (msg: TurbopackMsgToBrowser) => void,
   router: ReturnType<typeof useRouter>,
-  dispatcher: Dispatcher
+  dispatcher: Dispatcher,
+  appIsrManifestRef: ReturnType<typeof useRef>,
+  pathnameRef: ReturnType<typeof useRef>
 ) {
   if (!('action' in obj)) {
     return
@@ -292,6 +295,29 @@ function processMessage(
   }
 
   switch (obj.action) {
+    case HMR_ACTIONS_SENT_TO_BROWSER.APP_ISR_MANIFEST: {
+      if (process.env.__NEXT_APP_ISR_INDICATOR) {
+        if (appIsrManifestRef) {
+          appIsrManifestRef.current = obj.data
+
+          const isrIndicatorHandlers: ShowHideHandler | undefined =
+            window.next?.isrIndicatorHandlers
+
+          // handle initial status on receiving manifest
+          // navigation is handled in useEffect for pathname changes
+          // as we'll receive the updated manifest before usePathname
+          // triggers for new value
+          if (isrIndicatorHandlers) {
+            if ((pathnameRef.current as string) in obj.data) {
+              isrIndicatorHandlers.show()
+            } else {
+              isrIndicatorHandlers.hide()
+            }
+          }
+        }
+      }
+      break
+    }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING: {
       startLatency = Date.now()
       console.log('[Fast Refresh] rebuilding')
@@ -522,6 +548,30 @@ export default function HotReload({
   )
 
   const router = useRouter()
+  const pathname = usePathname()
+  const appIsrManifestRef = useRef<Record<string, false | number>>({})
+  const pathnameRef = useRef(pathname)
+
+  if (process.env.__NEXT_APP_ISR_INDICATOR) {
+    // this conditional is only for dead-code elimination which
+    // isn't a runtime conditional only build-time so ignore hooks rule
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      pathnameRef.current = pathname
+      const isrIndicatorHandlers: ShowHideHandler | undefined =
+        window.next?.isrIndicatorHandlers
+
+      const appIsrManifest = appIsrManifestRef.current
+
+      if (isrIndicatorHandlers && appIsrManifest) {
+        if (pathname in appIsrManifest) {
+          isrIndicatorHandlers.show()
+        } else {
+          isrIndicatorHandlers.hide()
+        }
+      }
+    }, [pathname])
+  }
 
   useEffect(() => {
     const websocket = webSocketRef.current
@@ -535,7 +585,9 @@ export default function HotReload({
           sendMessage,
           processTurbopackMessage,
           router,
-          dispatcher
+          dispatcher,
+          appIsrManifestRef,
+          pathnameRef
         )
       } catch (err: any) {
         console.warn(
@@ -546,7 +598,14 @@ export default function HotReload({
 
     websocket.addEventListener('message', handler)
     return () => websocket.removeEventListener('message', handler)
-  }, [sendMessage, router, webSocketRef, dispatcher, processTurbopackMessage])
+  }, [
+    sendMessage,
+    router,
+    webSocketRef,
+    dispatcher,
+    processTurbopackMessage,
+    appIsrManifestRef,
+  ])
 
   return (
     <ReactDevOverlay onReactError={handleOnReactError} state={state}>

packages/next/src/client/dev/hot-middleware-client.ts

@@ -59,6 +59,7 @@ export default (mode: 'webpack' | 'turbopack') => {
       }
       case 'serverError':
       case 'devPagesManifestUpdate':
+      case 'appIsrManifest':
       case 'building':
       case 'finishBuilding': {
         return