langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-24 21:16:24 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

refactor(web): Extract isServer/isClient utility for consistent environment detection #21553

New Issue
Closed
opened 2026-02-21 20:13:11 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:13:11 -05:00
Owner
Copy Link
Copy Source

Originally created by @lyzno1 on GitHub (Jan 9, 2026).

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

  1. Code Duplication: 60% of usages (9 occurrences in 3 files) use an identical pattern for localStorage access protection
  2. Maintainability: Any logic change requires updating multiple locations
  3. 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.

Originally created by @lyzno1 on GitHub (Jan 9, 2026). ## 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 1. **Code Duplication**: 60% of usages (9 occurrences in 3 files) use an identical pattern for localStorage access protection 2. **Maintainability**: Any logic change requires updating multiple locations 3. **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.
yindo added the 💪 enhancement label 2026-02-21 20:13:11 -05:00
yindo closed this issue 2026-02-21 20:13:11 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 💪 enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#21553
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?