docs: use cache feedback

docs/01-app/03-api-reference/01-directives/use-cache.mdx

@@ -148,7 +148,7 @@ export default function Layout({ children }) {
 }
 ```
 
-Any components imported and nested in `page` file will inherit the cache behavior of `page`.
+Any components imported and nested in `page` file are part of the cache output associated with the `page`.
 
 ```tsx filename="app/page.tsx" switcher
 'use cache'
@@ -243,23 +243,34 @@ export async function getData() {
 
 ### Interleaving
 
-If you need to pass non-serializable arguments to a cacheable function, you can pass them as `children`. This means the `children` reference can change without affecting the cache entry.
+In React, composition with `children` or slots is a well-known pattern for building flexible components. When using `use cache`, you can continue to compose your UI in this way. Anything included as `children`, or other compositional slots, in the returned JSX will be passed through the cached component without affecting its cache entry.
+
+As long as you don't directly reference any of the JSX slots inside the body of the cacheable function itself, their presence in the returned output won't affect the cache entry.
 
 ```tsx filename="app/page.tsx" switcher
 export default async function Page() {
   const uncachedData = await getData()
   return (
-    <CacheComponent>
+    // Pass compositional slots as props, e.g. header and children
+    <CacheComponent header={<h1>Home</h1>}>
+      {/* DynamicComponent is provided as the children slot */}
       <DynamicComponent data={uncachedData} />
     </CacheComponent>
   )
 }
 
-async function CacheComponent({ children }: { children: ReactNode }) {
+async function CacheComponent({
+  header, // header: a compositional slot, injected as a prop
+  children, // children: another slot for nested composition
+}: {
+  header: ReactNode
+  children: ReactNode
+}) {
   'use cache'
   const cachedData = await fetch('/api/cached-data')
   return (
     <div>
+      {header}
       <PrerenderedComponent data={cachedData} />
       {children}
     </div>
@@ -271,17 +282,23 @@ async function CacheComponent({ children }: { children: ReactNode }) {
 export default async function Page() {
   const uncachedData = await getData()
   return (
-    <CacheComponent>
+    // Pass compositional slots as props, e.g. header and children
+    <CacheComponent header={<h1>Home</h1>}>
+      {/* DynamicComponent is provided as the children slot */}
       <DynamicComponent data={uncachedData} />
     </CacheComponent>
   )
 }
 
-async function CacheComponent({ children }) {
+async function CacheComponent({
+  header, // header: a compositional slot, injected as a prop
+  children, // children: another slot for nested composition
+}) {
   'use cache'
   const cachedData = await fetch('/api/cached-data')
   return (
     <div>
+      {header}
       <PrerenderedComponent data={cachedData} />
       {children}
     </div>

docs/01-app/03-api-reference/05-config/01-next-config-js/cacheComponents.mdx

@@ -32,3 +32,9 @@ When `cacheComponents` is enabled, you can use the following cache functions and
 ## Notes
 
 - While `cacheComponents` can optimize performance by ensuring fresh data fetching during runtime, it may also introduce additional latency compared to serving pre-rendered content.
+
+## Version History
+
+| Version | Change                                                                                                                            |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| 16.0.0  | `cacheComponents` introduced. This flag controls the `ppr`, `useCache`, and `dynamicIO` flags as a single, unified configuration. |

docs/01-app/03-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx

@@ -6,6 +6,8 @@ description: Configure the Next.js cache used for storing and revalidating data
 
 You can configure the Next.js cache location if you want to persist cached pages and data to durable storage, or share the cache across multiple containers or instances of your Next.js application.
 
+> **Good to know**: The `cacheHandler` configuration is specifically used by Next.js for server cache operations such as storing and revalidating ISR and route handler responses. It is not used by `'use cache'`, `'use cache: remote'`, nor `'use cache: private'`, which manage their own cache independently.
+
 ```js filename="next.config.js"
 module.exports = {
   cacheHandler: require.resolve('./cache-handler.js'),