Hydration mismatch in Nuxt.js SSR components

Nuxt.js utilizes a server-side rendering (SSR) engine to generate initial HTML, which is then hydrated on the client. A common failure occurs when the server-rendered HTML differs from the initial client-side render, leading to a hydration mismatch error in the browser console.

This behavior typically surfaces when components rely on non-deterministic data or browser-specific globals that are unavailable during the server-side execution phase. While the useAsyncData and useFetch composables are designed to synchronize state via a JSON payload to prevent redundant API calls, certain dynamic elements may still diverge.

Given the shared nature of the server process, how can developers ensure that components utilizing dynamic timestamps or browser-only APIs do not trigger these mismatches? What are the documented strategies for isolating client-only logic to prevent the server from attempting to render inconsistent state?