directives

82 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

cacheLife function enables cache lifetime configuration

The cacheLife function sets the cache lifetime of a function or component. It must be used alongside the 'use cache' directive and within the scope of the function or component where caching is defined.

cacheLife cannot be called at module scope

cacheLife cannot be used at module scope. Calling it at the top level of a file will throw an error. It must be called within a cache directive scope (inside an async function or component).

cacheLife preset profiles available

Next.js provides preset cache profiles: 'seconds' for real-time data, 'minutes' for frequently updated content, 'hours' for multiple daily updates, 'days' for daily updates, 'weeks' for weekly updates, 'max' for rarely changing content, and 'default' as the implicit profile when cacheLife is not called.

Cache profile properties: stale, revalidate, expire

Cache profiles are controlled by three timing properties: stale (how long the client can use cached data without checking the server, client-side only, minimum 30 seconds enforced), revalidate (how often the server regenerates cached content in the background, serves cached version immediately then regenerates), and expire (maximum time before the server must regenerate cached content after no traffic, expires must be longer than revalidate if both are set).

Preset cache profile timing table

| Profile | Use Case | stale | revalidate | expire | |---------|----------|-------|-----------|--------| | default | Standard content | 5 minutes | 15 minutes | never | | seconds | Real-time data | 30 seconds | 1 second | 1 minute | | minutes | Frequently updated content | 5 minutes | 1 minute | 1 hour | | hours | Content updated multiple times per day | 5 minutes | 1 hour | 1 day | | days | Content updated daily | 5 minutes | 1 day | 1 week | | weeks | Content updated weekly | 5 minutes | 1 week | 30 days | | max | Stable content that rarely changes | 5 minutes | 30 days | 1 year |

Default profile is applied when cacheLife is not called

If cacheLife is not called within a 'use cache' scope, the default profile is implicitly applied, which has a stale time of 5 minutes, revalidate time of 15 minutes, and never expires.

Only one cacheLife call should execute per function invocation

If you call cacheLife, ensure only one call executes per function invocation. It can be called in different control flow branches, but only one should run per request.

cacheLife with preset profile example

'use cache' import { cacheLife } from 'next/cache' export default async function BlogPage() { cacheLife('days') // Blog content updated daily const posts = await getBlogPosts() return <div>{/* render posts */}</div> }

stale property controls client cache, not Cache-Control header

The stale property controls the Client Cache, not the Cache-Control HTTP header. The server sends the stale time via the x-nextjs-stale-time response header, which the client router uses to determine when to revalidate. A minimum of 30 seconds is enforced to ensure prefetched links remain usable.

Revalidation functions immediately clear entire client cache

When revalidation functions from a Server Action are called (revalidateTag, revalidatePath, updateTag, or refresh), the entire client cache is immediately cleared, bypassing the stale time.

Prerendering exclusion based on cache lifetime

Content with revalidate of 0 or expire under 5 minutes is excluded from prerenders and becomes a dynamic hole resolved at request time. Content with stale under 30 seconds is excluded from prerenders because a prefetch would expire before the user could click. Content with stale from 30 seconds up to 5 minutes is included in prerenders but excluded from the route's App Shell.

Nested caching with explicit outer cacheLife

When 'use cache' directives are nested and the outer scope has an explicit cacheLife call, the outer cache uses its own lifetime regardless of inner cache lifetimes. When the outer cache hits, it returns the complete output including all nested data. An explicit cacheLife always takes precedence, whether longer or shorter than inner lifetimes.

Nested caching without explicit outer cacheLife

If the outer 'use cache' scope does not call cacheLife, it uses the default profile (15 min revalidate). Inner caches with shorter lifetimes can reduce the outer cache's default lifetime. Inner caches with longer lifetimes cannot extend it beyond the default.

use memo directive example

Example using 'use memo' directive to opt-in to React Compiler optimization: ```ts export default function Page() { 'use memo' // ... } ```

use no memo directive for React Compiler

The 'use no memo' directive from React can be used to opt-out a component or hook from React Compiler optimization, providing the opposite effect of 'use memo'.

use memo directive for React Compiler

The 'use memo' directive from React can be placed at the top of a component or hook function to opt-in to React Compiler optimization when using annotation mode.

use client directive placement at top of file

To declare an entry point for Client Components, add the 'use client' directive at the top of the file, before any imports.

Client Component props must be serializable

When using the 'use client' directive, the props of the Client Components must be serializable. This means the props need to be in a format that React can serialize when sending data from the server to the client. Functions are not serializable and cannot be passed as props.

Nesting Client Components within Server Components example

Client Components can be nested within Server Components. Server Components handle static content, data fetching, and SEO-friendly elements, while Client Components handle interactive elements requiring state, effects, or browser APIs. This provides clear separation of server and client logic. Example: ```tsx import Header from './header' import Counter from './counter' // This is a Client Component export default function Page() { return ( <div> <Header /> <Counter /> </div> ) } ```

use client example with useState

Example of a Client Component using the 'use client' directive with React state management: ```tsx 'use client' import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ) } ```

use client directive declares client-side entry point

The 'use client' directive declares an entry point for components to be rendered on the client side. It should be used when creating interactive user interfaces that require client-side JavaScript capabilities, such as state management, event handling, and access to browser APIs.

use client directive defines client-server boundary

The 'use client' directive defines the client-server boundary. You do not need to add it to every file that contains Client Components. You only need to add it to the files whose components you want to render directly within Server Components. Components exported from a file with 'use client' serve as entry points to the client.

Give your agent this brain