Building Real-time Features with Server Actions

Server Actions represent a paradigm shift in how we handle server-side operations in modern web applications. This guide will show you how to leverage Server Actions to build real-time features that are both performant and developer-friendly.

Understanding Server Actions

Server Actions are server-side functions that can be called directly from your components. They provide:

• Built-in error handling
• Automatic validation
• Progressive enhancement
• Type safety
• Optimistic updates

Basic Implementation

Setting Up Server Actions

First, enable server actions in your Next.js configuration:

// next.config.js
module.exports = {
    experimental: {
        serverActions: true
    }
}

Creating Your First Server Action

Define a basic server action:

// app/actions.ts
'use server'

async function updateUser(formData: FormData) {
    const name = formData.get('name')
    const email = formData.get('email')

    await db.user.update({
        where: { email },
        data: { name }
    })
}

Real-time Features

Live Form Submissions

Implement real-time form handling:

// app/components/UserForm.tsx
export default function UserForm() {
    async function handleSubmit(formData: FormData) {
        'use server'

        const result = await updateUser(formData)
        revalidatePath('/users')
    }

    return (
        <form action={handleSubmit}>
            <input name="name" type="text" />
            <input name="email" type="email" />
            <button type="submit">Update</button>
        </form>
    )
}

Real-time Chat Implementation

Create a real-time chat feature:

// app/actions/chat.ts
'use server'

async function sendMessage(formData: FormData) {
    const message = formData.get('message')
    const userId = formData.get('userId')

    await db.message.create({
        data: {
            content: message,
            userId
        }
    })

    revalidatePath('/chat')
}

Live Updates Component

// app/components/ChatWindow.tsx
export default function ChatWindow() {
    async function handleMessage(formData: FormData) {
        'use server'
        await sendMessage(formData)
    }

    return (
        <div className="chat-window">
            <MessageList />
            <form action={handleMessage}>
                <input name="message" type="text" />
                <button type="submit">Send</button>
            </form>
        </div>
    )
}

Advanced Patterns

Optimistic Updates

Implement optimistic UI updates:

'use client'

import { experimental_useOptimistic as useOptimistic } from 'react'

export function OptimisticList() {
    const [optimisticItems, addOptimisticItem] = useOptimistic(
        items,
        (state, newItem) => [...state, newItem]
    )

    async function addItem(formData: FormData) {
        const newItem = formData.get('item')
        addOptimisticItem(newItem)
        await createItem(formData)
    }

    return (
        <form action={addItem}>
            <input name="item" />
            <button type="submit">Add Item</button>
        </form>
    )
}

Error Handling

Implement robust error handling:

async function handleAction(formData: FormData) {
    'use server'

    try {
        await processData(formData)
        revalidatePath('/data')
    } catch (error) {
        return {
            error: 'Failed to process data'
        }
    }
}

Validation

Add server-side validation:

async function validateAndSubmit(formData: FormData) {
    'use server'

    const email = formData.get('email')

    if (!email || !email.includes('@')) {
        return {
            error: 'Invalid email address'
        }
    }

    await processValidData(formData)
}

Performance Optimization

Caching Strategies

Implement efficient caching:

async function getCachedData() {
    'use server'

    return await cache(
        async () => {
            const data = await fetchData()
            return data
        },
        ['cache-key'],
        {
            revalidate: 60 // Cache for 60 seconds
        }
    )
}

Streaming Updates

Enable streaming for real-time updates:

// app/components/StreamingList.tsx
export default async function StreamingList() {
    const stream = await getStreamingData()

    return (
        <Suspense fallback={<Loading />}>
            <AsyncStreamingContent stream={stream} />
        </Suspense>
    )
}

Best Practices

Security Considerations

• Validate all input data
• Implement rate limiting
• Use CSRF protection
• Sanitize user input

Performance Tips

• Use appropriate caching strategies
• Implement optimistic updates
• Leverage streaming where appropriate
• Minimize server roundtrips

Code Organization

• Separate actions by feature
• Use typed inputs and outputs
• Implement proper error handling
• Document edge cases

Common Patterns

Pagination

Implement efficient pagination:

async function loadMoreItems(page: number) {
    'use server'

    const items = await db.item.findMany({
        skip: page * 10,
        take: 10
    })

    return items
}

Search Implementation

Create real-time search functionality:

async function searchItems(query: string) {
    'use server'

    const results = await db.item.findMany({
        where: {
            name: {
                contains: query
            }
        }
    })

    return results
}

Conclusion

Server Actions provide a powerful way to implement real-time features in modern web applications. By following these patterns and best practices, you can create robust, performant applications that provide excellent user experiences.

Key takeaways:

• Use Server Actions for server-side operations
• Implement proper error handling and validation
• Leverage optimistic updates for better UX
• Consider performance implications
• Follow security best practices

Remember that Server Actions are still evolving, so stay updated with the latest developments and best practices in the ecosystem.