MettaChain · LaGodxy · Apr 28, 2026 · Apr 28, 2026 · Apr 28, 2026 · Apr 28, 2026
diff --git a/.env.example b/.env.example
@@ -32,6 +32,29 @@ NEXT_PUBLIC_PROPERTY_API_URL=https://api.propchain.example.com
 # Analytics API endpoint (optional)
 NEXT_PUBLIC_ANALYTICS_API_URL=https://analytics.propchain.example.com
 
+# -----------------------------------------------------------------------------
+# Redis Cache Configuration
+# -----------------------------------------------------------------------------
+# Redis connection settings for property data caching
+
+# Redis server hostname or IP address
+REDIS_HOST=localhost
+
+# Redis server port
+REDIS_PORT=6379
+
+# Redis password (if authentication is enabled)
+# REDIS_PASSWORD=your_redis_password
+
+# Redis database number (0-15)
+REDIS_DB=0
+
+# Blockchain contract address for property events
+PROPERTY_CONTRACT_ADDRESS=0x0000000000000000000000000000000000000000
+
+# Blockchain RPC URL for event listening
+BLOCKCHAIN_RPC_URL=https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID
+
 # -----------------------------------------------------------------------------
 # Web3 / Blockchain RPC Configurations
 # -----------------------------------------------------------------------------

diff --git a/ISR_IMPLEMENTATION.md b/ISR_IMPLEMENTATION.md
@@ -0,0 +1,250 @@
+# ISR Implementation for Property Pages
+
+## Overview
+
+This document outlines the implementation of Incremental Static Regeneration (ISR) for property detail pages in the PropChain FrontEnd application. This implementation addresses issue #136 by implementing caching and performance optimizations for property pages.
+
+## Implementation Details
+
+### 1. Server-Side Rendering with ISR
+
+**File**: `src/app/properties/[id]/page.tsx`
+
+- Converted from client component to server component
+- Added ISR configuration with 60-second revalidation
+- Implemented async data fetching on the server side
+- Added proper TypeScript interfaces for props
+- Created skeleton loading states for better UX
+
+**Key Features**:
+```typescript
+// ISR configuration - revalidate every 60 seconds
+export const revalidate = 60;
+
+async function PropertyDetailContent({ propertyId }: { propertyId: string }) {
+  const property = await getPropertyForISR(propertyId);
+  if (!property) {
+    notFound();
+  }
+  // ... render property content
+}
+```
+
+### 2. Component Architecture
+
+**Server Component**: `src/components/PropertyDetailServer.tsx`
+- Handles static content rendering
+- Displays property details, images, features
+- No client-side interactivity
+- Optimized for server-side rendering
+
+**Client Component**: `src/components/PropertyDetailClient.tsx`
+- Contains interactive elements (wallet connector, price alerts)
+- Minimal client-side JavaScript
+- Hydrates only the necessary interactive parts
+
+### 3. On-Demand Revalidation
+
+**Webhook Endpoint**: `src/app/api/revalidate/route.ts`
+
+**Features**:
+- Secure webhook with HMAC-SHA256 signature verification
+- Support for individual property revalidation
+- Support for bulk property revalidation
+- Proper error handling and logging
+- Health check endpoint
+
+**Usage Examples**:
+
+```bash
+# Revalidate single property
+curl -X POST https://your-domain.com/api/revalidate \
+  -H "Content-Type: application/json" \
+  -H "x-webhook-signature: <signature>" \
+  -d '{
+    "type": "property",
+    "propertyId": "property-123",
+    "reason": "Property updated"
+  }'
+
+# Revalidate all properties
+curl -X POST https://your-domain.com/api/revalidate \
+  -H "Content-Type: application/json" \
+  -H "x-webhook-signature: <signature>" \
+  -d '{
+    "type": "all-properties",
+    "reason": "Bulk update"
+  }'
+```
+
+### 4. Fallback Pages
+
+**File**: `src/app/properties/[id]/not-found.tsx`
+
+- Custom 404 page for missing properties
+- Helpful messaging for new properties
+- Navigation options for users
+- Professional error handling
+
+### 5. CDN Cache Headers
+
+**File**: `next.config.ts`
+
+Added optimized cache headers for property pages:
+
+```typescript
+{
+  source: "/properties/:path*",
+  headers: [
+    {
+      key: "Cache-Control",
+      value: "public, max-age=60, stale-while-revalidate=300, s-maxage=300",
+    },
+    {
+      key: "Vary",
+      value: "Accept-Encoding",
+    },
+  ],
+}
+```
+
+**Cache Strategy**:
+- `max-age=60`: Browser cache for 1 minute
+- `stale-while-revalidate=300`: Serve stale content for 5 minutes while revalidating
+- `s-maxage=300`: CDN cache for 5 minutes
+
+### 6. Server-Side Data Fetching
+
+**File**: `src/lib/propertyServiceServer.ts`
+
+- Dedicated server-side property service
+- ISR-specific data fetching functions
+- Revalidation utilities
+- Error handling for missing properties
+
+## Performance Benefits
+
+### Before ISR
+- Every request triggered server-side rendering
+- No caching of property pages
+- Higher server load
+- Slower response times
+- Poor CDN utilization
+
+### After ISR
+- Pages cached for 60 seconds
+- Background revalidation
+- Significantly faster response times
+- Better CDN utilization
+- Reduced server load
+- Improved user experience
+
+## Monitoring and Analytics
+
+### Webhook Logging
+All revalidation requests are logged with:
+- Request type (single property or bulk)
+- Property ID (if applicable)
+- Reason for revalidation
+- Timestamp
+- Success/failure status
+
+### Cache Performance
+Monitor cache hit rates and revalidation frequency through:
+- Next.js analytics
+- CDN metrics
+- Server logs
+
+## Security Considerations
+
+### Webhook Security
+- HMAC-SHA256 signature verification
+- Environment variable for webhook secret
+- Request validation
+- Rate limiting (recommended)
+
+### Cache Security
+- No sensitive data in cached pages
+- Proper cache headers for authenticated routes
+- CDN security rules
+
+## Deployment Considerations
+
+### Environment Variables
+```bash
+# Webhook security
+REVALIDATE_WEBHOOK_SECRET=your-secure-secret-key
+
+# Next.js configuration
+NEXT_PUBLIC_API_URL=https://your-domain.com
+```
+
+### CDN Configuration
+- Configure CDN to respect cache headers
+- Set up proper purging strategies
+- Monitor cache performance
+
+## Testing
+
+### Local Testing
+1. Run development server
+2. Visit property pages
+3. Monitor revalidation behavior
+4. Test webhook endpoint
+
+### Production Testing
+1. Deploy to staging environment
+2. Test cache behavior
+3. Verify webhook functionality
+4. Monitor performance metrics
+
+## Future Enhancements
+
+### Potential Improvements
+1. **Dynamic Revalidation Intervals**: Different revalidation times based on property activity
+2. **Smart Caching**: Cache invalidation based on property updates
+3. **Analytics Integration**: Track cache performance
+4. **A/B Testing**: Compare ISR vs SSR performance
+5. **Edge Functions**: Deploy revalidation logic to edge
+
+### Monitoring Dashboard
+- Cache hit rates
+- Revalidation frequency
+- Performance metrics
+- Error rates
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Pages Not Updating**
+   - Check webhook configuration
+   - Verify revalidation endpoint
+   - Monitor server logs
+
+2. **Cache Issues**
+   - Verify CDN configuration
+   - Check cache headers
+   - Clear cache if needed
+
+3. **Build Errors**
+   - Ensure all dependencies are installed
+   - Check TypeScript configuration
+   - Verify component exports
+
+### Debug Commands
+
+```bash
+# Check Next.js build
+npm run build
+
+# Test webhook locally
+curl -X GET http://localhost:3000/api/revalidate
+
+# Monitor logs
+tail -f logs/next.log
+```
+
+## Conclusion
+
+This ISR implementation provides significant performance improvements for property pages while maintaining data freshness and providing a robust revalidation system. The implementation follows Next.js best practices and includes proper error handling, security measures, and monitoring capabilities.
diff --git a/PR_DESCRIPTION_ISR.md b/PR_DESCRIPTION_ISR.md
@@ -0,0 +1,99 @@
+## Summary
+
+This PR implements Incremental Static Regeneration (ISR) for property detail pages to address issue #136. The implementation significantly improves performance by caching property pages while ensuring data freshness through automatic and on-demand revalidation.
+
+## 🚀 Performance Improvements
+
+- **60-second revalidation** for property pages with ISR
+- **Background revalidation** ensures fresh content
+- **CDN optimization** with proper cache headers
+- **Reduced server load** through intelligent caching
+- **Faster page loads** for cached properties
+
+## 🔧 Implementation Details
+
+### Server-Side Rendering with ISR
+- Converted property detail pages from client to server components
+- Added `export const revalidate = 60` for 60-second revalidation
+- Implemented async data fetching on server side
+
+### Component Architecture
+- **PropertyDetailServer**: Static content rendering (server component)
+- **PropertyDetailClient**: Interactive elements (client component)
+- Clean separation of server/client responsibilities
+
+### On-Demand Revalidation
+- Secure webhook endpoint: `/api/revalidate`
+- HMAC-SHA256 signature verification for security
+- Support for single property and bulk revalidation
+- Comprehensive logging and error handling
+
+### Fallback Pages
+- Custom 404 page for missing properties
+- Helpful messaging for new properties
+- Professional error handling with navigation options
+
+### CDN Optimization
+- Optimized cache headers for property pages
+- `stale-while-revalidate` strategy
+- Proper CDN caching configuration
+
+## 📁 Files Changed
+
+- `src/app/properties/[id]/page.tsx` - Converted to ISR server component
+- `src/components/PropertyDetailServer.tsx` - Server-side property content
+- `src/components/PropertyDetailClient.tsx` - Client-side interactive elements
+- `src/app/api/revalidate/route.ts` - Webhook endpoint for revalidation
+- `src/app/properties/[id]/not-found.tsx` - Custom 404 page
+- `src/lib/propertyServiceServer.ts` - Server-side data fetching utilities
+- `next.config.ts` - Added CDN cache headers
+- `ISR_IMPLEMENTATION.md` - Comprehensive documentation
+
+## 🔒 Security Features
+
+- Webhook signature verification with HMAC-SHA256
+- Environment variable for webhook secret
+- Proper request validation and error handling
+- Secure cache headers for authenticated routes
+
+## 📊 Cache Strategy
+
+- **Browser cache**: 1 minute (`max-age=60`)
+- **Stale content**: 5 minutes while revalidating (`stale-while-revalidate=300`)
+- **CDN cache**: 5 minutes (`s-maxage=300`)
+
+## 🧪 Testing
+
+The implementation includes:
+- Comprehensive error handling
+- Fallback pages for missing properties
+- Webhook health check endpoint
+- Proper TypeScript interfaces
+
+## 📚 Documentation
+
+Complete implementation documentation is available in `ISR_IMPLEMENTATION.md` including:
+- Usage examples
+- Security considerations
+- Deployment instructions
+- Troubleshooting guide
+
+## 🔗 Webhook Usage
+
+```bash
+# Revalidate single property
+curl -X POST https://your-domain.com/api/revalidate \
+  -H "Content-Type: application/json" \
+  -H "x-webhook-signature: <signature>" \
+  -d '{
+    "type": "property",
+    "propertyId": "property-123",
+    "reason": "Property updated"
+  }'
+```
+
+## 🚦 Ready for Review
+
+This implementation follows Next.js best practices and includes proper error handling, security measures, and monitoring capabilities. The code is ready for testing and deployment.
+
+Fixes #136