Implementing React Server Components for Enhanced Performance

---
name: Implementing React Server Components for Enhanced Performance
version: "1.0"
globs:
  - "src/**/*.jsx"
  - "src/**/*.tsx"
triggers:
  - file_change
  - file_open
  - file_save
---
rule_definition:
  description: "Guidelines on integrating React Server Components to reduce client-side JavaScript and improve load times."
  category: "React Cursor Rules"
  severity: "warning"
  patterns:
    - pattern: "import .* from 'react';"
      message: "Ensure that components importing React are correctly designated as Server or Client Components."
    - pattern: "import .* from 'react-dom';"
      message: "Verify that ReactDOM imports are used appropriately within Client Components."
    - pattern: "useState|useEffect|useRef|useContext|useReducer"
      message: "Avoid using React hooks in Server Components; these are intended for Client Components only."
    - pattern: "import .* from 'fs';"
      message: "Ensure that Node.js modules like 'fs' are only used within Server Components."
    - pattern: "import .* from 'axios';"
      message: "Verify that data fetching libraries are utilized appropriately within Server Components."
  actions:
    - action: "highlight"
      parameters:
        color: "yellow"
    - action: "comment"
      parameters:
        text: "Review the usage of this import to ensure it aligns with React Server Component best practices."
  references:
    - "https://react.dev/reference/rsc/server-components"
    - "https://vercel.com/blog/understanding-react-server-components"
    - "https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md"