Header System Architecture

Cache Revalidation Flow

Sequence of events for updates:

Admin Action: User updates menu order -> POST /server-action/update-header.

DB Update: prisma.headerItem.update(...).

Revalidate: revalidateTag('header-config').

Next Request: The cache for the header component is STALE.

Re-render: Server fetches fresh data from DB and stores in cache.

React Component Logic:

function MenuItem({ item }) {

if (item.children.length > 0) {

return (

<Trigger>{item.label}</Trigger>

{item.children.map(child => <MenuItem item={child} />)}

</Content>

</Dropdown>

)

}

return <Link href={item.url}>{item.label}</Link>

}