{
+ const supabase = await createClient();
+
+ // Use parameterized queries
+ const { data, error } = await supabase.rpc('execute_safe_query', {
+ query_string: query,
+ query_params: params
+ });
+
+ if (error) throw error;
+ return data;
+}
+
+// Example usage:
+// const users = await safeQuery(
+// 'SELECT * FROM users WHERE email = $1',
+// ['user@example.com']
+// );
+```
+
+---
+
+# β‘ IV. PERFORMANCE OPTIMIZATION
+
+## 1. Image Optimization
+
+**File: `src/components/optimized-image.tsx`**
+
+```typescript
+import Image from 'next/image';
+import { useState } from 'react';
+
+interface OptimizedImageProps {
+ src: string;
+ alt: string;
+ width?: number;
+ height?: number;
+ className?: string;
+ priority?: boolean;
+}
+
+export function OptimizedImage({
+ src,
+ alt,
+ width,
+ height,
+ className,
+ priority = false
+}: OptimizedImageProps) {
+ const [isLoading, setIsLoading] = useState(true);
+
+ return (
+
+ setIsLoading(false)}
+ className={`
+ duration-700 ease-in-out
+ ${isLoading ? 'scale-110 blur-2xl grayscale' : 'scale-100 blur-0 grayscale-0'}
+ `}
+ sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+ />
+
+ );
+}
+```
+
+## 2. Code Splitting
+
+**File: `src/app/project/[id]/page.tsx`**
+
+```typescript
+import dynamic from 'next/dynamic';
+import { Suspense } from 'react';
+import { LoadingSpinner } from '@/components/ui/loading';
+
+// Lazy load heavy components
+const ProjectEditor = dynamic(
+ () => import('@/components/project/project-editor'),
+ {
+ loading: () => ,
+ ssr: false
+ }
+);
+
+const LivePreview = dynamic(
+ () => import('@/components/preview/live-preview'),
+ {
+ loading: () => ,
+ ssr: false
+ }
+);
+
+export default async function ProjectPage({ params }: { params: { id: string } }) {
+ // ... fetch data
+
+ return (
+ }>
+
+
+ );
+}
+```
+
+## 3. Database Query Optimization
+
+**File: `src/lib/supabase/optimized-queries.ts`**
+
+```typescript
+import { createClient } from './server';
+
+// Use select to only fetch needed columns
+export async function getProjects() {
+ const supabase = await createClient();
+
+ const { data, error } = await supabase
+ .from('projects')
+ .select('id, name, description, updated_at') // Only needed fields
+ .order('updated_at', { ascending: false })
+ .limit(20); // Pagination
+
+ if (error) throw error;
+ return data;
+}
+
+// Use joins to avoid N+1 queries
+export async function getProjectWithMessages(projectId: string) {
+ const supabase = await createClient();
+
+ const { data, error } = await supabase
+ .from('projects')
+ .select(`
+ *,
+ conversations (
+ id,
+ messages (
+ id,
+ role,
+ content,
+ created_at
+ )
+ )
+ `)
+ .eq('id', projectId)
+ .single();
+
+ if (error) throw error;
+ return data;
+}
+
+// Use count for pagination
+export async function getProjectsWithCount(page: number = 1, limit: number = 20) {
+ const supabase = await createClient();
+
+ const from = (page - 1) * limit;
+ const to = from + limit - 1;
+
+ const { data, error, count } = await supabase
+ .from('projects')
+ .select('*', { count: 'exact' })
+ .range(from, to)
+ .order('updated_at', { ascending: false });
+
+ if (error) throw error;
+
+ return {
+ projects: data,
+ total: count,
+ page,
+ totalPages: Math.ceil((count || 0) / limit)
+ };
+}
+```
+
+---
+
+_Continue vα»i Production Deployment vΓ Disaster Recovery trong message tiαΊΏp..._