Back to all reviewers

Check SSR context

nuxt/nuxt
Based on 3 comments
TypeScript

Always verify execution context (server vs client) before running client-specific operations in SSR applications. Many hydration errors and unexpected behaviors stem from client-only code executing during server-side rendering.

Next TypeScript

Reviewer Prompt

Always verify execution context (server vs client) before running client-specific operations in SSR applications. Many hydration errors and unexpected behaviors stem from client-only code executing during server-side rendering.

Key practices:

  • Use import.meta.client checks before client-specific operations like polling, timers, or browser APIs
  • Ensure context availability before using composables that depend on client state
  • Be aware that some operations like useHead() may not work properly in server components without proper context

Example from polling implementation:

const startPolling = () => {
  if (import.meta.client && options.pollEvery && !pollTimer) {
    // Client-only polling logic
  }
}

This prevents server-side execution of client-specific code and reduces hydration mismatches that can break SSR applications.

3
Comments Analyzed
TypeScript
Primary Language
Next
Category

Source Discussions