With Cache Components, how do you reset a subtree on navigation but still restore it on browser Back? const { bfcacheId } = useRouter() return {children}

Key the subtree with useRouter().bfcacheId

Call router.refresh() on every navigation

Next.js · Senior · Question 55 of 75

With Cache Components, how do you reset a subtree on `<Link>` navigation but still restore it on browser Back?

const { bfcacheId } = useRouter()
return <Fragment key={bfcacheId}>{children}</Fragment>

✓Correct answer: Key the subtree with useRouter().bfcacheId
2Call router.refresh() on every navigation
3Disable Cache Components

Explanation

Routes are hidden with <Activity> rather than unmounted. bfcacheId changes on push/replace but not on back/forward, which mirrors browser bfcache semantics.

With Cache Components, how do you reset a subtree on `<Link>` navigation but still restore it on browser Back?

Explanation

Further reading

Problem with a question

Test yourself

With Cache Components, how do you reset a subtree on <Link> navigation but still restore it on browser Back?

Explanation

Further reading

Test yourself

With Cache Components, how do you reset a subtree on `<Link>` navigation but still restore it on browser Back?