페이지 5: 실시간 구독 및 모범 사례

5. 실시간 구독 및 모범 사례

Supabase는 강력한 실시간 기능을 제공하여 Next.js 애플리케이션이 데이터베이스 변경 사항에 즉시 반응할 수 있도록 합니다. 이 섹션에서는 실시간 구독 구현 및 일반적인 모범 사례를 다룹니다.

5.1. 실시간 구독

데이터베이스 테이블의 변경 사항을 구독할 수 있습니다. 이는 채팅 애플리케이션이나 라이브 대시보드와 같은 대화형 기능을 구축하는 데 특히 유용합니다.

'use client'

import { createClient } from '@/lib/supabase/client'
import { useEffect, useState } from 'react'

export default function RealtimeTodos() {
  const [todos, setTodos] = useState<any[]>([])
  const supabase = createClient()

  useEffect(() => {
    const channel = supabase
      .channel('todos-channel') // 임의의 채널 이름
      .on(
        'postgres_changes',
        { event: '*', schema: 'public', table: 'todos' },
        (payload) => {
          // 다양한 이벤트 처리: INSERT, UPDATE, DELETE
          console.log('변경 사항 수신!', payload)
          // 실제 앱에서는 여기서 'todos' 상태를 업데이트합니다.
        }
      )
      .subscribe()

    // 컴포넌트 언마운트 시 구독 정리
    return () => {
      supabase.removeChannel(channel)
    }
  }, [supabase])

  return (
    <div>
      <h2>실시간 할 일 (콘솔 확인)</h2>
      <p>브라우저 콘솔을 열고 Supabase에서 'todos' 테이블을 변경해 보세요. 여기에 업데이트가 표시됩니다.</p>
    </div>
  )
}

참고: Supabase 대시보드의 데이터베이스 > 실시간에서 테이블에 대한 실시간 기능을 활성화해야 합니다.

5.2. Supabase와 Next.js (App Router)를 위한 모범 사례

• 서버 측 데이터 가져오기: 초기 데이터 로드의 경우, 항상 Next.js 서버 컴포넌트 또는 서버 액션에서 데이터를 가져오는 것을 선호합니다. 이는 성능과 SEO를 향상시킵니다.
• 사용자 상호 작용을 위한 클라이언트 측 변경: 서버 액션이 변경 작업에 훌륭하지만, 간단한 대화형 폼은 클라이언트 측 변경 (변경 후 revalidatePath 또는 router.refresh() 사용)을 통해 이점을 얻을 수 있습니다.
• 오류 처리: Supabase API 호출에 대한 견고한 오류 처리를 항상 구현합니다. 사용자 친화적인 메시지를 표시하고 자세한 오류를 기록합니다.
• 인증 상태 관리: @supabase/ssr 패키지를 사용하여 쿠키 기반 인증을 단순화하고 서버와 클라이언트 간에 일관된 세션 관리를 보장합니다.
• 요청 제한 (Rate Limiting): 클라이언트 측 또는 가능하면 엣지 함수를 통해 요청 제한을 설정하여 Supabase API를 보호하고 남용을 방지합니다.
• 보안 우선: 항상 테이블에 Row-Level Security (RLS)를 활성화하고 구성하십시오. 적절한 RLS 정책 없이 민감한 데이터를 노출하거나 직접적인 클라이언트 측 쓰기를 허용하지 마십시오.
• 데이터베이스 인덱스: Supabase 데이터베이스에서 자주 쿼리되는 열에 적절한 인덱스를 생성하여 쿼리 성능을 최적화합니다.

이 지침을 따르면 Supabase와 Next.js (App Router)를 사용하여 성능이 뛰어나고 안전하며 실시간 애플리케이션을 구축할 수 있습니다.