Migrate to server components for faster performance

[biwasbhandari]

Shift to Server Components in Next.js

Objective

Migrate our current client-side data fetching and manipulation to use Next.js Server Components and Server Actions for improved performance and security.

Background

Our application currently uses client-side data fetching and state management, which can lead to larger bundle sizes and potential security risks. Next.js Server Components offer a more efficient and secure way to handle data operations.

Proposed Changes

1. Implement Server Components for Data Fetching

Replace client-side data fetching with Server Components. Example:

// Before (Client Component)
'use client'
import { useState, useEffect } from 'react'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'

export default function UserList() {
  const [users, setUsers] = useState([])
  const supabase = createClientComponentClient()

  useEffect(() => {
    async function fetchUsers() {
      const { data } = await supabase.from('users').select('*')
      setUsers(data)
    }
    fetchUsers()
  }, [])

  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
}

// After (Server Component)
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'

export default async function UserList() {
  const supabase = createServerComponentClient({ cookies })
  const { data: users } = await supabase.from('users').select('*')

  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
}

[biwasbhandari]

Attaching the docs here: https://nextjs.org/docs/app/building-your-application/rendering/server-components