// Article.jsx
// Environment: client
 
import { revalidatePath } from 'next/cache'
 
export default function Article({ article_id }) {
  async function onArticleDelete() {
    // Environment: server
    'use server'
    // 🤔 Mixed server and client code inside same file
    // 🤔 Magic passing of props
    await db.article.delete({ article_id })
    // 😨 Complex caching
    revalidatePath('/articles')
  }
  return <button onClick={onArticleDelete}>Delete</button>
}

// Article.telefunc.js
// Environment: server
 
export async function onArticleDelete({ article_id }) {
  await db.article.delete({ article_id })
}

// Article.jsx
// Environment: client
 
import { onArticleDelete } from './article.telefunc.js'
export default function Article({ article_id }) {
  const onClick = () => onArticleDelete({ article_id })
  return <button onClick={onClick}>Delete</button>
}