Skip to content

Commit

Permalink
Add prefetch to new router (#39866)
Browse files Browse the repository at this point in the history 
Follow-up to #37551
Implements prefetching for the new router.

There are multiple behaviors related to prefetching so I've split them out for each case. The list below each case is what's prefetched:

Reference:
- Checkmark checked → it's implemented.
- RSC Payload → Rendered server components.
- Router state → Patch for the router history state.
- Preloads for client component entry → This will be handled in a follow-up PR.
- No `loading.js` static case → Will be handled in a follow-up PR.

---

- `prefetch={true}` (default, same as current router, links in viewport are prefetched)
    - [x]  Static all the way down the component tree
        - [x] RSC payload
        - [x] Router state
        - [ ] preloads for the client component entry
    - [x]  Not static all the way down the component tree
        - [x]  With `loading.js`
            - [x] RSC payload up until the loading below the common layout
            - [x] router state
            - [ ] preloads for the client component entry
        - [x]  No `loading.js` (This case can be static files to make sure it’s fast)
            - [x] router state
            - [ ] preloads for the client component entry
- `prefetch={false}`
    - [x]  always do an optimistic navigation. We already have this implemented where it tries to figure out the router state based on the provided url. That result might be wrong but the router will automatically figure out that

---

In the first implementation there is a distinction between `hard` and `soft` navigation. With the addition of prefetching you no longer have to add a `soft` prop to `next/link` in order to leverage the `soft` case. 

A heuristic has been added that automatically prefers `soft` navigation except when navigating between mismatching dynamic parameters.

An example:
- `app/[userOrTeam]/dashboard/page.js` and `app/[userOrTeam]/dashboard/settings/page.js`
  - `/tim/dashboard` → `/tim/dashboard/settings` = Soft navigation 
  - `/tim/dashboard` → `/vercel/dashboard` = Hard navigation
  - `/vercel/dashboard` → `/vercel/dashboard/settings` = Soft navigation
  - `/vercel/dashboard/settings` -> `/tim/dashboard` = Hard navigation

---

While adding these new heuristics some of the tests started failing and I found some state bugs in `router.reload()` which have been fixed. An example being when you push to `/dashboard` while on `/` in the same transition it would navigate to `/`, it also wouldn't push a new history entry. Both of these cases are now fixed:

```
React.startTransition(() => {
  router.push('/dashboard')
  router.reload()
})
```

---

While debugging the various changes I ended up debugging and manually diffing the cache and router state quite often and was looking at a way to automate this. `useReducer` is quite similar to Redux so I was wondering if Redux Devtools could be used in order to debug the various actions as it has diffing built-in. It took a bit of time to figure out the connection mechanism but in the end I figured out how to connect `useReducer`, a new hook `useReducerWithReduxDevtools` has been added, we'll probably want to put this behind a compile-time flag when the new router is marked stable but until then it's useful to have it enabled by default (only when you have Redux Devtools installed ofcourse).

> ⚠️ Redux Devtools is only connected to take incoming actions / state. Time travel and other features are not supported because the state sent to the devtools is normalized to allow diffing the maps, you can't move backward based on that state so applying the state is not connected.

Example of the integration:

<img width="1912" alt="Screen Shot 2022-09-02 at 10 00 40" src="https://user-images.githubusercontent.com/6324199/188637303-ad8d6a81-15e5-4b65-875b-1c4f93df4e44.png">
  • Loading branch information
@timneutkens
timneutkens authored Sep 6, 2022
1 parent 5f95b6b commit 71ad0dd
Show file tree
Hide file tree
Showing 28 changed files with 1,068 additions and 482 deletions.
160 changes: 99 additions & 61 deletions packages/next/client/components/app-router.client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect } from 'react'
import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
import React, { useEffect, useMemo, useCallback } from 'react'
import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack'
import {
AppRouterContext,
Expand All @@ -12,6 +13,7 @@ import type {
import type { FlightRouterState, FlightData } from '../../server/app-render'
import {
ACTION_NAVIGATE,
ACTION_PREFETCH,
ACTION_RELOAD,
ACTION_RESTORE,
ACTION_SERVER_PATCH,
Expand All @@ -23,13 +25,15 @@ import {
PathnameContext,
// LayoutSegmentsContext,
} from './hooks-client-context'
import { useReducerWithReduxDevtools } from './use-reducer-with-devtools'

/**
* Fetch the flight data for the provided url. Takes in the current router state to decide what to render server-side.
*/
function fetchFlight(
url: URL,
flightRouterState: FlightRouterState
flightRouterState: FlightRouterState,
prefetch?: true
): ReadableStream {
const flightUrl = new URL(url)
const searchParams = flightUrl.searchParams
Expand All @@ -40,6 +44,9 @@ function fetchFlight(
'__flight_router_state_tree__',
JSON.stringify(flightRouterState)
)
if (prefetch) {
searchParams.append('__flight_prefetch__', '1')
}

// TODO-APP: Verify that TransformStream is supported.
const { readable, writable } = new TransformStream()
Expand All @@ -56,18 +63,17 @@ function fetchFlight(
*/
export function fetchServerResponse(
url: URL,
flightRouterState: FlightRouterState
flightRouterState: FlightRouterState,
prefetch?: true
): { readRoot: () => FlightData } {
// Handle the `fetch` readable stream that can be read using `readRoot`.
return createFromReadableStream(fetchFlight(url, flightRouterState))
return createFromReadableStream(fetchFlight(url, flightRouterState, prefetch))
}

/**
* Renders development error overlay when NODE_ENV is development.
*/
function ErrorOverlay({
children,
}: React.PropsWithChildren<{}>): React.ReactElement {
function ErrorOverlay({ children }: PropsWithChildren<{}>): ReactElement {
if (process.env.NODE_ENV === 'production') {
return <>{children}</>
} else {
Expand All @@ -83,6 +89,8 @@ function ErrorOverlay({
let initialParallelRoutes: CacheNode['parallelRoutes'] =
typeof window === 'undefined' ? null! : new Map()

const prefetched = new Set<string>()

/**
* The global router that wraps the application components.
*/
Expand All @@ -94,34 +102,41 @@ export default function AppRouter({
}: {
initialTree: FlightRouterState
initialCanonicalUrl: string
children: React.ReactNode
hotReloader?: React.ReactNode
children: ReactNode
hotReloader?: ReactNode
}) {
const [{ tree, cache, pushRef, focusAndScrollRef, canonicalUrl }, dispatch] =
React.useReducer(reducer, {
const initialState = useMemo(() => {
return {
tree: initialTree,
cache: {
data: null,
subTreeData: children,
parallelRoutes:
typeof window === 'undefined' ? new Map() : initialParallelRoutes,
},
prefetchCache: new Map(),
pushRef: { pendingPush: false, mpaNavigation: false },
focusAndScrollRef: { apply: false },
canonicalUrl:
initialCanonicalUrl +
// Hash is read as the initial value for canonicalUrl in the browser
// This is safe to do as canonicalUrl can't be rendered, it's only used to control the history updates the useEffect further down.
(typeof window !== 'undefined' ? window.location.hash : ''),
})
}
}, [children, initialCanonicalUrl, initialTree])
const [
{ tree, cache, prefetchCache, pushRef, focusAndScrollRef, canonicalUrl },
dispatch,
sync,
] = useReducerWithReduxDevtools(reducer, initialState)

useEffect(() => {
// Ensure initialParallelRoutes is cleaned up from memory once it's used.
initialParallelRoutes = null!
}, [])

// Add memoized pathname/query for useSearchParams and usePathname.
const { searchParams, pathname } = React.useMemo(() => {
const { searchParams, pathname } = useMemo(() => {
const url = new URL(
canonicalUrl,
typeof window === 'undefined' ? 'http://n' : window.location.href
Expand All @@ -138,7 +153,7 @@ export default function AppRouter({
/**
* Server response that only patches the cache and tree.
*/
const changeByServerResponse = React.useCallback(
const changeByServerResponse = useCallback(
(previousTree: FlightRouterState, flightData: FlightData) => {
dispatch({
type: ACTION_SERVER_PATCH,
Expand All @@ -149,24 +164,25 @@ export default function AppRouter({
subTreeData: null,
parallelRoutes: new Map(),
},
mutable: {},
})
},
[]
[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 = React.useMemo<AppRouterInstance>(() => {
const appRouter = useMemo<AppRouterInstance>(() => {
const navigate = (
href: string,
cacheType: 'hard' | 'soft',
navigateType: 'push' | 'replace'
navigateType: 'push' | 'replace',
forceOptimisticNavigation: boolean
) => {
return dispatch({
type: ACTION_NAVIGATE,
url: new URL(href, location.origin),
cacheType,
forceOptimisticNavigation,
navigateType,
cache: {
data: null,
Expand All @@ -179,29 +195,47 @@ export default function AppRouter({

const routerInstance: AppRouterInstance = {
// TODO-APP: implement prefetching of flight
prefetch: (_href) => Promise.resolve(),
replace: (href) => {
// @ts-ignore startTransition exists
React.startTransition(() => {
navigate(href, 'hard', 'replace')
})
},
softReplace: (href) => {
// @ts-ignore startTransition exists
React.startTransition(() => {
navigate(href, 'soft', 'replace')
})
prefetch: async (href) => {
// If prefetch has already been triggered, don't trigger it again.
if (prefetched.has(href)) {
return
}

prefetched.add(href)

const url = new URL(href, location.origin)
// TODO-APP: handle case where history.state is not the new router history entry
const r = fetchServerResponse(
url,
// initialTree is used when history.state.tree is missing because the history state is set in `useEffect` below, it being missing means this is the hydration case.
window.history.state?.tree || initialTree,
true
)
try {
r.readRoot()
} catch (e) {
await e
const flightData = r.readRoot()
// @ts-ignore startTransition exists
React.startTransition(() => {
dispatch({
type: ACTION_PREFETCH,
url,
flightData,
})
})
}
},
softPush: (href) => {
replace: (href, options = {}) => {
// @ts-ignore startTransition exists
React.startTransition(() => {
navigate(href, 'soft', 'push')
navigate(href, 'replace', Boolean(options.forceOptimisticNavigation))
})
},
push: (href) => {
push: (href, options = {}) => {
// @ts-ignore startTransition exists
React.startTransition(() => {
navigate(href, 'hard', 'push')
navigate(href, 'push', Boolean(options.forceOptimisticNavigation))
})
},
reload: () => {
Expand All @@ -211,7 +245,6 @@ export default function AppRouter({
type: ACTION_RELOAD,

// TODO-APP: revisit if this needs to be passed.
url: new URL(window.location.href),
cache: {
data: null,
subTreeData: null,
Expand All @@ -224,7 +257,7 @@ export default function AppRouter({
}

return routerInstance
}, [])
}, [dispatch, initialTree])

useEffect(() => {
// When mpaNavigation flag is set do a hard navigation to the new url.
Expand All @@ -245,47 +278,52 @@ export default function AppRouter({
} else {
window.history.replaceState(historyState, '', canonicalUrl)
}
}, [tree, pushRef, canonicalUrl])

sync()
}, [tree, pushRef, canonicalUrl, sync])

// 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, tree }
window.nd = { router: appRouter, cache, prefetchCache, tree }
}

/**
* Handle popstate event, this is used to handle back/forward in the browser.
* By default dispatches ACTION_RESTORE, however if the history entry was not pushed/replaced by app-router it will reload the page.
* That case can happen when the old router injected the history entry.
*/
const onPopState = React.useCallback(({ state }: PopStateEvent) => {
if (!state) {
// TODO-APP: this case only happens when pushState/replaceState was called outside of Next.js. It should probably reload the page in this case.
return
}
const onPopState = useCallback(
({ state }: PopStateEvent) => {
if (!state) {
// TODO-APP: this case only happens when pushState/replaceState was called outside of Next.js. It should probably reload the page in this case.
return
}

// TODO-APP: this case happens when pushState/replaceState was called outside of Next.js or when the history entry was pushed by the old router.
// It reloads the page in this case but we might have to revisit this as the old router ignores it.
if (!state.__NA) {
window.location.reload()
return
}
// TODO-APP: this case happens when pushState/replaceState was called outside of Next.js or when the history entry was pushed by the old router.
// It reloads the page in this case but we might have to revisit this as the old router ignores it.
if (!state.__NA) {
window.location.reload()
return
}

// @ts-ignore useTransition exists
// TODO-APP: Ideally the back button should not use startTransition as it should apply the updates synchronously
// Without startTransition works if the cache is there for this path
React.startTransition(() => {
dispatch({
type: ACTION_RESTORE,
url: new URL(window.location.href),
tree: state.tree,
// @ts-ignore useTransition exists
// TODO-APP: Ideally the back button should not use startTransition as it should apply the updates synchronously
// Without startTransition works if the cache is there for this path
React.startTransition(() => {
dispatch({
type: ACTION_RESTORE,
url: new URL(window.location.href),
tree: state.tree,
})
})
})
}, [])
},
[dispatch]
)

// Register popstate event to call onPopstate.
React.useEffect(() => {
useEffect(() => {
window.addEventListener('popstate', onPopState)
return () => {
window.removeEventListener('popstate', onPopState)
Expand Down
Loading

0 comments on commit 71ad0dd

Please sign in to comment.