app router: support side effects on server requests (#48939)

link NEXT-920 --------- Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
vercel · May 3, 2023 · 2dc0ba4 · 2dc0ba4
1 parent 248f2de
commit 2dc0ba4
Show file tree

Hide file tree

Showing 25 changed files with 871 additions and 127 deletions.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -88,8 +88,8 @@ const babelIncludeRegexes: RegExp[] = [
 
 const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 
-const staticGenerationAsyncStorageRegex =
-  /next[\\/]dist[\\/]client[\\/]components[\\/]static-generation-async-storage/
+const asyncStoragesRegex =
+  /next[\\/]dist[\\/]client[\\/]components[\\/](static-generation-async-storage|action-async-storage)/
 
 const mainFieldsPerCompiler: Record<CompilerNameValues, string[]> = {
   [COMPILER_NAMES.server]: ['main', 'module'],
@@ -1841,10 +1841,7 @@ export default async function getBaseWebpackConfig(
                   and: [
                     codeCondition.test,
                     {
-                      not: [
-                        optOutBundlingPackageRegex,
-                        staticGenerationAsyncStorageRegex,
-                      ],
+                      not: [optOutBundlingPackageRegex, asyncStoragesRegex],
                     },
                   ],
                 },
@@ -1866,7 +1863,7 @@ export default async function getBaseWebpackConfig(
                 // Make sure that AsyncLocalStorage module instance is shared between server and client
                 // layers.
                 layer: WEBPACK_LAYERS.shared,
-                test: staticGenerationAsyncStorageRegex,
+                test: asyncStoragesRegex,
               },
             ]
           : []),
@@ -1900,7 +1897,7 @@ export default async function getBaseWebpackConfig(
                 // Alias react for switching between default set and share subset.
                 oneOf: [
                   {
-                    exclude: [staticGenerationAsyncStorageRegex],
+                    exclude: [asyncStoragesRegex],
                     issuerLayer: {
                       or: [WEBPACK_LAYERS.server, WEBPACK_LAYERS.action],
                     },
@@ -1974,7 +1971,7 @@ export default async function getBaseWebpackConfig(
                     issuerLayer: {
                       or: [WEBPACK_LAYERS.server, WEBPACK_LAYERS.action],
                     },
-                    exclude: [staticGenerationAsyncStorageRegex],
+                    exclude: [asyncStoragesRegex],
                     use: swcLoaderForServerLayer,
                   },
                   {
@@ -1987,10 +1984,7 @@ export default async function getBaseWebpackConfig(
                     issuerLayer: {
                       or: [WEBPACK_LAYERS.client, WEBPACK_LAYERS.appClient],
                     },
-                    exclude: [
-                      staticGenerationAsyncStorageRegex,
-                      codeCondition.exclude,
-                    ],
+                    exclude: [asyncStoragesRegex, codeCondition.exclude],
                     use: [
                       ...(dev && isClient
                         ? [

diff --git a/packages/next/src/client/app-call-server.ts b/packages/next/src/client/app-call-server.ts
@@ -1,21 +1,18 @@
-// @ts-ignore
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { encodeReply } from 'react-server-dom-webpack/client'
+import { getServerActionDispatcher } from './components/app-router'
 
-export async function callServer(id: string, args: any[]) {
-  const actionId = id
+export async function callServer(actionId: string, actionArgs: any[]) {
+  const actionDispatcher = getServerActionDispatcher()
 
-  // Fetching the current url with the action header.
-  // TODO: Refactor this to look up from a manifest.
-  const res = await fetch('', {
-    method: 'POST',
-    headers: { Accept: 'text/x-component', 'Next-Action': actionId },
-    body: await encodeReply(args),
-  })
-
-  if (!res.ok) {
-    throw new Error(await res.text())
+  if (!actionDispatcher) {
+    throw new Error('Invariant: missing action dispatcher.')
   }
 
-  return (await res.json())[0]
+  return new Promise((resolve, reject) => {
+    actionDispatcher({
+      actionId,
+      actionArgs,
+      resolve,
+      reject,
+    })
+  })
 }
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -24,8 +24,12 @@ import {
   ACTION_PREFETCH,
   ACTION_REFRESH,
   ACTION_RESTORE,
+  ACTION_SERVER_ACTION,
   ACTION_SERVER_PATCH,
   PrefetchKind,
+  RouterChangeByServerResponse,
+  RouterNavigate,
+  ServerActionDispatcher,
 } from './router-reducer/router-reducer-types'
 import { createHrefFromUrl } from './router-reducer/create-href-from-url'
 import {
@@ -53,6 +57,12 @@ let initialParallelRoutes: CacheNode['parallelRoutes'] = isServer
   ? null!
   : new Map()
 
+let globalServerActionDispatcher = null as ServerActionDispatcher | null
+
+export function getServerActionDispatcher() {
+  return globalServerActionDispatcher
+}
+
 export function urlToUrlWithoutFlightMarker(url: string): URL {
   const urlWithoutFlightParameters = new URL(url, location.origin)
   // TODO-APP: handle .rsc for static export case
@@ -170,7 +180,7 @@ function Router({
   /**
    * Server response that only patches the cache and tree.
    */
-  const changeByServerResponse = useCallback(
+  const changeByServerResponse: RouterChangeByServerResponse = useCallback(
     (
       previousTree: FlightRouterState,
       flightData: FlightData,
@@ -193,11 +203,8 @@ function Router({
     [dispatch]
   )
 
-  /**
-   * The app router that is exposed through `useRouter`. It's only concerned with dispatching actions to the reducer, does not hold state.
-   */
-  const appRouter = useMemo<AppRouterInstance>(() => {
-    const navigate = (
+  const navigate: RouterNavigate = useCallback(
+    (
       href: string,
       navigateType: 'push' | 'replace',
       forceOptimisticNavigation: boolean
@@ -219,8 +226,31 @@ function Router({
         },
         mutable: {},
       })
-    }
+    },
+    [dispatch]
+  )
+
+  const serverActionDispatcher: ServerActionDispatcher = useCallback(
+    (actionPayload) => {
+      React.startTransition(() => {
+        dispatch({
+          ...actionPayload,
+          type: ACTION_SERVER_ACTION,
+          mutable: {},
+          navigate,
+          changeByServerResponse,
+        })
+      })
+    },
+    [changeByServerResponse, dispatch, navigate]
+  )
+
+  globalServerActionDispatcher = serverActionDispatcher
 
+  /**
+   * The app router that is exposed through `useRouter`. It's only concerned with dispatching actions to the reducer, does not hold state.
+   */
+  const appRouter = useMemo<AppRouterInstance>(() => {
     const routerInstance: AppRouterInstance = {
       back: () => window.history.back(),
       forward: () => window.history.forward(),
@@ -297,13 +327,18 @@ function Router({
     }
 
     return routerInstance
-  }, [dispatch])
+  }, [dispatch, navigate])
 
   // Add `window.nd` for debugging purposes.
   // This is not meant for use in applications as concurrent rendering will affect the cache/tree/router.
   if (typeof window !== 'undefined') {
     // @ts-ignore this is for debugging
-    window.nd = { router: appRouter, cache, prefetchCache, tree }
+    window.nd = {
+      router: appRouter,
+      cache,
+      prefetchCache,
+      tree,
+    }
   }
 
   // When mpaNavigation flag is set do a hard navigation to the new url.

diff --git a/packages/next/src/client/components/redirect-boundary.tsx b/packages/next/src/client/components/redirect-boundary.tsx
@@ -2,7 +2,12 @@
 import React, { useEffect } from 'react'
 import { AppRouterInstance } from '../../shared/lib/app-router-context'
 import { useRouter } from './navigation'
-import { getURLFromRedirectError, isRedirectError } from './redirect'
+import {
+  RedirectType,
+  getRedirectTypeFromError,
+  getURLFromRedirectError,
+  isRedirectError,
+} from './redirect'
 
 interface RedirectBoundaryProps {
   router: AppRouterInstance
@@ -12,47 +17,55 @@ interface RedirectBoundaryProps {
 function HandleRedirect({
   redirect,
   reset,
+  redirectType,
 }: {
   redirect: string
+  redirectType: RedirectType
   reset: () => void
 }) {
   const router = useRouter()
 
   useEffect(() => {
     // @ts-ignore startTransition exists
     React.startTransition(() => {
-      router.replace(redirect, {})
+      if (redirectType === RedirectType.push) {
+        router.push(redirect, {})
+      } else {
+        router.replace(redirect, {})
+      }
       reset()
     })
-  }, [redirect, reset, router])
+  }, [redirect, redirectType, reset, router])
 
   return null
 }
 
 export class RedirectErrorBoundary extends React.Component<
   RedirectBoundaryProps,
-  { redirect: string | null }
+  { redirect: string | null; redirectType: RedirectType | null }
 > {
   constructor(props: RedirectBoundaryProps) {
     super(props)
-    this.state = { redirect: null }
+    this.state = { redirect: null, redirectType: null }
   }
 
   static getDerivedStateFromError(error: any) {
     if (isRedirectError(error)) {
       const url = getURLFromRedirectError(error)
-      return { redirect: url }
+      const redirectType = getRedirectTypeFromError(error)
+      return { redirect: url, redirectType }
     }
     // Re-throw if error is not for redirect
     throw error
   }
 
   render() {
-    const redirect = this.state.redirect
-    if (redirect !== null) {
+    const { redirect, redirectType } = this.state
+    if (redirect !== null && redirectType !== null) {
       return (
         <HandleRedirect
           redirect={redirect}
+          redirectType={redirectType}
           reset={() => this.setState({ redirect: null })}
         />
       )

diff --git a/packages/next/src/client/components/redirect.ts b/packages/next/src/client/components/redirect.ts
@@ -1,7 +1,24 @@
 const REDIRECT_ERROR_CODE = 'NEXT_REDIRECT'
 
+export enum RedirectType {
+  push = 'push',
+  replace = 'replace',
+}
+
 type RedirectError<U extends string> = Error & {
-  digest: `${typeof REDIRECT_ERROR_CODE};${U}`
+  digest: `${typeof REDIRECT_ERROR_CODE};${RedirectType};${U}`
+}
+
+export function getRedirectError(
+  url: string,
+  type: RedirectType
+): RedirectError<typeof url> {
+  // eslint-disable-next-line no-throw-literal
+  const error = new Error(REDIRECT_ERROR_CODE)
+  ;(
+    error as RedirectError<typeof url>
+  ).digest = `${REDIRECT_ERROR_CODE};${type};${url}`
+  return error as RedirectError<typeof url>
 }
 
 /**
@@ -11,11 +28,11 @@ type RedirectError<U extends string> = Error & {
  *
  * @param url the url to redirect to
  */
-export function redirect(url: string): never {
-  // eslint-disable-next-line no-throw-literal
-  const error = new Error(REDIRECT_ERROR_CODE)
-  ;(error as RedirectError<typeof url>).digest = `${REDIRECT_ERROR_CODE};${url}`
-  throw error
+export function redirect(
+  url: string,
+  type: RedirectType = RedirectType.replace
+): never {
+  throw getRedirectError(url, type)
 }
 
 /**
@@ -28,10 +45,14 @@ export function redirect(url: string): never {
 export function isRedirectError<U extends string>(
   error: any
 ): error is RedirectError<U> {
+  if (typeof error?.digest !== 'string') return false
+
+  const [errorCode, type, destination] = (error.digest as string).split(';', 3)
+
   return (
-    typeof error?.digest === 'string' &&
-    error.digest.startsWith(REDIRECT_ERROR_CODE + ';') &&
-    error.digest.length > REDIRECT_ERROR_CODE.length + 1
+    errorCode === REDIRECT_ERROR_CODE &&
+    (type === 'replace' || type === 'push') &&
+    typeof destination === 'string'
   )
 }
 
@@ -45,11 +66,20 @@ export function isRedirectError<U extends string>(
 export function getURLFromRedirectError<U extends string>(
   error: RedirectError<U>
 ): U
-export function getURLFromRedirectError(error: any): string | null
 export function getURLFromRedirectError(error: any): string | null {
   if (!isRedirectError(error)) return null
 
   // Slices off the beginning of the digest that contains the code and the
   // separating ';'.
-  return error.digest.slice(REDIRECT_ERROR_CODE.length + 1)
+  return error.digest.split(';', 3)[2]
+}
+
+export function getRedirectTypeFromError<U extends string>(
+  error: RedirectError<U>
+): RedirectType {
+  if (!isRedirectError(error)) {
+    throw new Error('Not a redirect error')
+  }
+
+  return error.digest.split(';', 3)[1] as RedirectType
 }
diff --git a/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts
@@ -140,7 +140,7 @@ export function navigateReducer(
   ) {
     const segments = pathname.split('/')
     // TODO-APP: figure out something better for index pages
-    segments.push('')
+    segments.push('__PAGE__')
 
     // Optimistic tree case.
     // If the optimistic tree is deeper than the current state leave that deeper part out of the fetch
@@ -165,7 +165,7 @@ export function navigateReducer(
     // TODO-APP: re-evaluate if we need to strip the last segment
     const optimisticFlightSegmentPath = segments
       .slice(1)
-      .map((segment) => ['children', segment === '' ? '__PAGE__' : segment])
+      .map((segment) => ['children', segment])
       .flat()
 
     // Copy existing cache nodes as far as possible and fill in `data` property with the started data fetch.