Skip to content
astro-doctor
Performancewarn by defaultastro-doctor/no-client-load-overuse

no-client-load-overuse

Prefer client:idle or client:visible over client:load for interactive islands.

Why

client:load hydrates the component immediately, blocking the main thread during page startup. client:idle waits for the browser to be idle; client:visible waits until the element enters the viewport — both give the critical path a head start.

Examples

Incorrect

Uses client:load unnecessarily

astro
---
import Counter from '../components/Counter'
---
<Counter client:load />

Correct

Uses client:idle (below the fold) or client:visible

astro
---
import Counter from '../components/Counter'
---
<!-- Below-the-fold component: hydrate when browser is idle -->
<Counter client:idle />

<!-- Only visible when scrolled into view -->
<Counter client:visible />

Configuration

Override the default severity in your ESLint config:

javascripteslint.config.js
// eslint.config.js
import astroDoctorPlugin from '@santi020k/eslint-plugin-astro-doctor'

export default [
  astroDoctorPlugin.configs.recommended,
  {
    rules: {
      'astro-doctor/no-client-load-overuse': 'error',   // or 'warn' or 'off'
    },
  },
]

Or in your doctor.config.ts:

typescriptdoctor.config.ts
export default {
  rules: {
    'astro-doctor/no-client-load-overuse': 'error',
  },
}

All rules

Edit this page on GitHub ↗