{items.map(product => (
)
}
```
### 4.2 Partial Pre-Rendering (PPR)
**Concept:** Combine static HTML with dynamic components
**Benefits:** Fast initial page load + real-time data
**Use Cases:** Homepage with featured products, personalization
```typescript
export default function Home() {
return (
<>
setSelectedId(product.id)}
className={selectedId === product.id ? 'selected' : ''}
>
{product.name}
))}
${price}
Loading filters...
}
)
// Route-based splitting
const AdminPanel = dynamic(
() => import('@/features/admin/AdminPanel'),
{ ssr: false }
)
```
---
## 10. REAL-TIME COMMUNICATION
### 10.1 WebSocket Integration
```typescript
export class RealtimeClient {
private socket: WebSocket | null = null
private handlers: Map{date.toLocaleDateString()}
}
// β
GOOD: Use useEffect for client-only state
export function DateDisplay() {
const [date, setDate] = useStateLoading...
return {date.toLocaleDateString()}
}
// β
BETTER: Use `suppressHydrationWarning` for cosmetic differences
export function TimezoneAwareTime() {
return (
)
}
```
**Debugging Steps:**
1. Check browser console for hydration warnings (specific mismatches listed)
2. Add temporary `console.log` in both server and client paths
3. Use Next.js `unstable_after` to defer client-only logic
4. Validate environment variables match on server/client
### 41.2 Performance: Unexpected Re-renders
**Problem:** Component re-renders excessively, causing lag
```typescript
// β BAD: New object on every render
export function ProductFilter() {
const defaultFilters = { category: 'all', sort: 'popular' }
return
{Object.entries(filters).map(([key, value]) => (
))}
)
})
```
**Profiling Steps:**
1. Open React DevTools Profiler
2. Record interaction session
3. Sort by "Longest render duration"
4. Check for unnecessary re-renders with same props
### 41.3 TypeScript Type Errors in Components
**Problem:** "Type 'X' is not assignable to type 'Y'"
```typescript
// β BAD: Loose type definitions
interface Product {
id: any
name: any
price: number | string
}
// β
GOOD: Strict types with discriminated unions
interface Product {
id: string & { readonly __brand: 'ProductId' }
name: string
price: number
currency: 'USD' | 'EUR' | 'GBP'
}
// β
BETTER: Const assertions for enums
const CURRENCIES = {
USD: 'USD',
EUR: 'EUR',
GBP: 'GBP',
} as const
type Currency = typeof CURRENCIES[keyof typeof CURRENCIES]
```
### 41.4 API Integration Issues
**Problem:** Stale data, race conditions in requests
```typescript
// β BAD: Race condition - last request may not be last response
export function useProductSearch(query: string) {
const [results, setResults] = useStateMessage
}
// β
GOOD: Use object syntax or predefined classes
export function Alert({ type }: { type: 'success' | 'error' | 'warning' }) {
const bgColors = {
success: 'bg-green-500',
error: 'bg-red-500',
warning: 'bg-yellow-500',
}
return Message
}
// β
BETTER: For complex logic, use cn() helper
export function Alert({ type, intensity = 'normal' }) {
return (
Message
)
}
```
---
## 32. PAYMENT PROCESSING END-TO-END
### 32.1 Stripe Integration (Complete)
```typescript
// Frontend: Payment form
export function CheckoutForm() {
const stripe = useStripe()
const elements = useElements()
const [processing, setProcessing] = useState(false)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setProcessing(true)
// Create payment intent on server
const { clientSecret } = await fetchApi.post(
'/payments/create-intent',
{ amount: order.total }
)
// Confirm payment
const result = await stripe!.confirmPayment({
elements,
clientSecret,
})
if (result.error) {
toast.error(result.error.message)
} else {
// Payment successful
queryClient.invalidateQueries(['orders'])
router.push('/success')
}
setProcessing(false)
}
## 42. BACKEND TROUBLESHOOTING GUIDE
### 42.1 Database Performance Issues
**Problem:** Slow queries, timeout errors
```python
# β BAD: N+1 Query Problem
def get_orders(user_id):
orders = Order.objects.filter(user_id=user_id)
return [{
'id': order.id,
'user_email': order.user.email, # QUERY PER ORDER!
'total': order.total_amount,
} for order in orders]
# β
GOOD: Use select_related for foreign key
def get_orders(user_id):
orders = Order.objects.select_related('user').filter(user_id=user_id)
return [{
'id': order.id,
'user_email': order.user.email, # Already loaded!
'total': order.total_amount,
} for order in orders]
# β
BETTER: With proper pagination and indexing
@database_sync_to_async
def get_orders_paginated(user_id, page=1, page_size=20):
orders = (Order.objects
.select_related('user')
.prefetch_related('items__product')
.filter(user_id=user_id)
.order_by('-created_at')
)
start = (page - 1) * page_size
return list(orders[start:start + page_size])
```
**Debugging SQL Queries:**
```python
# Enable query logging in Django settings
LOGGING = {
'version': 1,
'handlers': {
'console': {'class': 'logging.StreamHandler'},
},
'loggers': {
'django.db.backends': {
'handlers': ['console'],
'level': 'DEBUG',
},
},
}
# Use django-debug-toolbar to visualize queries
# or check settings.DEBUG with django.test.utils.override_settings
```
### 42.2 Async/Await Issues
**Problem:** "SynchronousOnlyOperation" when accessing ORM in async code
```python
# β BAD: Mixed async/sync
async def get_product(product_id):
product = Product.objects.get(id=product_id) # SYNC!
return product
# β
GOOD: Use async ORM methods
async def get_product(product_id):
product = await Product.objects.aget(id=product_id)
return product
# β
BETTER: With database_sync_to_async wrapper
@database_sync_to_async
def get_product_wrapper(product_id):
return Product.objects.select_related('category').get(id=product_id)
async def get_product(product_id):
product = await get_product_wrapper(product_id)
return product
```
### 42.3 Memory Leaks in Celery Tasks
**Problem:** Worker memory grows indefinitely
```python
# β BAD: Global state accumulates
global_cache = {}
@shared_task
def process_order(order_id):
# Stores every processed order indefinitely!
global_cache[order_id] = Order.objects.get(id=order_id)
return order_id
# β
GOOD: Clean up resources after each task
@shared_task
def process_order(order_id):
try:
order = Order.objects.get(id=order_id)
order.process()
order.save()
finally:
# Cleanup happens automatically with context managers
pass
# β
BETTER: Use time limits and periodic cleanup
@shared_task(time_limit=300, soft_time_limit=280)
def process_order(order_id):
order = Order.objects.get(id=order_id)
try:
order.process()
order.save()
except SoftTimeLimitExceeded:
logger.warning(f'Order {order_id} processing timeout')
order.status = 'timeout'
order.save()
```
### 42.4 Authentication Token Issues
**Problem:** Tokens not refreshing, 401 errors
```python
# β BAD: Fixed expiration time
class JWT_SETTINGS:
ACCESS_TOKEN_LIFETIME = timedelta(hours=24) # Very long!
# β
GOOD: Reasonable expiration with refresh tokens
JWT_AUTH = {
'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5), # Short-lived
'REFRESH_TOKEN_LIFETIME': timedelta(days=7), # Long-lived
'ROTATE_REFRESH_TOKENS': True, # Security best practice
}
# β
BETTER: With automatic refresh in frontend
# Backend: Return both access and refresh tokens
@api_view(['POST'])
def login(request):
user = authenticate(
username=request.data['username'],
password=request.data['password']
)
if user:
refresh = RefreshToken.for_user(user)
return Response({
'access': str(refresh.access_token),
'refresh': str(refresh),
'user': UserSerializer(user).data
})
return Response({'error': 'Invalid credentials'}, status=401)
```
### 42.5 Connection Pool Issues
**Problem:** "too many connections" database errors
```python
# β BAD: No connection pooling
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'mydb',
'HOST': 'localhost',
}
}
# β
GOOD: Configure connection pooling
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg',
'NAME': 'mydb',
'HOST': 'pgbouncer', # Use PgBouncer proxy
'PORT': 6432,
'CONN_MAX_AGE': 600, # Connection timeout
}
}
# β
BETTER: With monitoring and alerts
# PgBouncer configuration:
# [databases]
# mydb = host=localhost port=5432 dbname=mydb
# [pgbouncer]
# pool_mode = transaction
# max_client_conn = 1000
# default_pool_size = 25
```
---
## 43. PRODUCTION DEPLOYMENT PROCEDURES
### 43.1 Zero-Downtime Deployment Strategy
**Frontend (Vercel):**
```bash
# Automatic zero-downtime with:
# 1. Deploy to preview environment first
npm run deploy:preview
# β Vercel creates preview.example.com
# 2. Run full test suite on preview
npm run test:preview
# 3. Promote to production (blue-green deploy)
npm run promote:production
# β Traffic switches instantly, old version available for rollback
# Total downtime: 0ms
# Rollback time: 30s (switch to previous build)
```
**Backend (Kubernetes):**
```yaml
# Rolling update deployment - gradual traffic shift
apiVersion: apps/v1
kind: Deployment
metadata:
name: fashionistar-api
spec:
strategy:
type: RollingUpdate
rollingUpdate:
maxSurge: 1 # One extra pod during update
maxUnavailable: 0 # Zero downtime
replicas: 3
template:
spec:
containers:
- name: api
image: fashionistar-api:v2.0.0
lifecycle:
preStop:
exec:
command: ["/bin/sh", "-c", "sleep 15"] # Graceful shutdown window
terminationGracePeriodSeconds: 30
```
**Execution Steps:**
```bash
# 1. Create new pod with new code
kubectl rolling-update fashionistar-api \
--image=fashionistar-api:v2.0.0 \
--update-period=10s # 10 seconds between pod updates
# 2. Wait for health checks (Kubernetes automatically monitors)
# 3. Drain connections from old pods gracefully
# 4. Terminate old pods after new ones are ready
# Downtime: 0s (traffic never interrupted)
# Automatic rollback on health check failure
```
**Database Migrations:**
```python
# β BAD: Backwards-incompatible migration blocking all requests
class Migration(migrations.Migration):
operations = [
migrations.RemoveField(
model_name='product',
name='old_price_field', # Application still expects this!
),
]
# β
GOOD: Backwards-compatible multi-phase migration
# Phase 1 (deployed with v1.9):
class Migration0001AddNewField(migrations.Migration):
operations = [
migrations.AddField(
model_name='product',
name='new_price_field',
field=models.DecimalField(default=0),
),
]
# Phase 2 (v1.9 code reads both, writes to new field):
# new_price = new_price_field or old_price_field
# Phase 3 (deployed with v2.0):
class Migration0002RemoveOldField(migrations.Migration):
operations = [
migrations.RemoveField(
model_name='product',
name='old_price_field', # Now safe to remove
),
]
```
### 43.2 Rollback Procedures
**Frontend Rollback (30 seconds):**
```bash
# Vercel: Switch traffic to previous build
vercel rollback
# Or manually:
vercel deploy --prod --target previous
```
**Backend Rollback (2 minutes):**
```bash
# View deployment history
kubectl rollout history deployment/fashionistar-api
# Rollback to previous version
kubectl rollout undo deployment/fashionistar-api
# Rollback to specific revision
kubectl rollout undo deployment/fashionistar-api --to-revision=5
```
**Database Rollback:**
```python
# If migration fails, Django provides automatic rollback:
python manage.py migrate app_name PREVIOUS_MIGRATION_NAME
# For zero-downtime, keep old fields until new code is fully deployed
```
### 43.3 Canary Deployments (Gradual Rollout)
```yaml
# Deploy to 10% of users first, monitor, then 100%
apiVersion: flagger.app/v1beta1
kind: Canary
metadata:
name: fashionistar-api
spec:
targetRef:
apiVersion: apps/v1
kind: Deployment
name: fashionistar-api
service:
port: 8000
analysis:
interval: 30s
threshold: 5 # If metrics > 5% bad, abort
maxWeight: 50 # Max 50% traffic to canary
stepWeight: 10 # Increment 10% every 5 minutes
metrics:
- name: http_requests_total
interval: 1m
threshold: 2
# Fail if error rate > 2%
- name: http_request_duration_seconds
interval: 1m
threshold: 1000
# Fail if p99 latency > 1s
# Rollback if any metric fails
skipAnalysis: false
```
---
## 44. REAL-WORLD IMPLEMENTATION CASE STUDIES
### 44.1 Complete E-Commerce Checkout Flow
**Full end-to-end implementation with all layers:**
```typescript
// FRONTEND: pages/checkout/page.tsx (Server Component)
import { CheckoutForm } from '@/features/checkout/CheckoutForm'
import { OrderSummary } from '@/features/checkout/OrderSummary'
import { getCart } from '@/services/cartService'
export default async function CheckoutPage() {
const cart = await getCart()
if (!cart || cart.items.length === 0) {
redirect('/cart')
}
return (
{products.map((product) => (
)
}
// β
Client Component: Interactivity
'use client'
export function ProductCard({ product }) {
const [isSelected, setIsSelected] = useState(false)
return (
setIsSelected(!isSelected)}
className={isSelected ? 'selected' : ''}
>
)
}
// β
PATTERN: Parallel requests in Server Component
async function Dashboard() {
// Fetch all data in parallel
const [products, orders, users] = await Promise.all([
db.product.findMany(),
db.order.findMany(),
db.user.findMany(),
])
return (
{product.name}
${product.price}
-
{products.map((product) => (
- {product.name} ))}
{children}
{children}
{analytics}
{notifications}