refactor(web): Extract isServer/isClient utility for consistent environment detection #30802
Description
Summary
Currently, the codebase has 15 occurrences of typeof window === 'undefined' spread across 9 files for server/client environment detection. This pattern is highly repetitive and could benefit from centralization.
Problem
- Code Duplication: 60% of usages (9 occurrences in 3 files) use an identical pattern for localStorage access protection
- Maintainability: Any logic change requires updating multiple locations
- Consistency: No standardized approach for environment detection
Files Affected
| File | Occurrences | Usage |
|---|---|---|
app/components/workflow/block-selector/featured-tools.tsx | 3 | localStorage access |
app/components/workflow/block-selector/featured-triggers.tsx | 3 | localStorage access |
app/components/workflow/block-selector/rag-tool-recommendations/index.tsx | 3 | localStorage access |
context/query-client.tsx | 1 | SSR initialization |
context/hooks/use-trigger-events-limit-modal.ts | 1 | localStorage protection |
app/components/apps/list.tsx | 1 | useEffect guard |
utils/gtag.ts | 1 | Conditional API call |
hooks/use-query-params.ts | 1 | Function guard |
__tests__/real-browser-flicker.test.tsx | 1 | Test environment |
Proposed Solution
Create a centralized utility at /web/utils/client.ts:
'use client' /** * Check if code is running on server-side (SSR) */ export const isServer = typeof window === 'undefined' /** * Check if code is running on client-side (browser) */ export const isClient = typeof window !== 'undefined' Benefits
- ✂️ Reduced code duplication
- 🧠 Lower cognitive load with unified pattern
- 🔄 Improved consistency across codebase
- 🛠️ Centralized maintenance point
- ⚡ Zero performance impact
Industry Reference
TanStack Query uses a similar pattern:
```typescript
export const isServer = typeof window === 'undefined' || 'Deno' in globalThis
```
Next.js recommends using client-only / server-only packages for build-time checks, but runtime checks like this utility are still needed for conditional logic in client components.