Common Problems with SSR Rendering

This guide covers common issues you may encounter when using SSR rendering and how to resolve them.

Server Performance Issues

Problem: Server becomes slow or unresponsive

Symptoms:

• Long response times for video processing
• Server crashes under load
• Memory usage spikes
• CPU usage at 100%

Solutions:

1. Optimize concurrent processing:

   const renderer = new SSRRenderer({
     maxConcurrent: 3, // Reduce from default
     queueTimeout: 30000
   });

2. Implement resource limits:

   const renderer = new SSRRenderer({
     memoryLimit: '2GB',
     cpuLimit: 2,
     tempDir: '/tmp/video-processing'
   });

3. Add monitoring and auto-scaling:

   • Monitor server resources
   • Implement auto-scaling based on load
   • Use load balancers for multiple instances

Memory Leaks

Problem: Server memory usage increases over time

Symptoms:

• Memory usage grows continuously
• Server restarts required frequently
• Temporary files not cleaned up
• Video processing fails after extended use

Solutions:

1. Implement proper cleanup:

   renderer.on('render:complete', async (jobId, result) => {
     // Clean up temporary files
     await renderer.cleanup(jobId);
   });
   
   renderer.on('render:error', async (jobId, error) => {
     // Clean up on error too
     await renderer.cleanup(jobId);
   });

2. Set up automatic cleanup:

   // Clean up old temporary files every hour
   setInterval(async () => {
     await renderer.cleanupOldFiles(3600000); // 1 hour
   }, 3600000);

3. Monitor memory usage:

   const used = process.memoryUsage();
   console.log(`Memory usage: ${Math.round(used.heapUsed / 1024 / 1024)} MB`);

Hydration Mismatches

Problem: Client-side hydration doesn't match server output

Symptoms:

• React hydration warnings in console
• UI inconsistencies between server and client
• Video player not working after hydration
• JavaScript errors after page load

Solutions:

1. Ensure consistent rendering:

   // Use the same video data on server and client
   const videoData = await getVideoData(); // Same source for both
   
   return (
     <VideoEditor 
       videoData={videoData}
       key={videoData.id} // Force re-render if data changes
     />
   );

2. Handle loading states:

   const [isHydrated, setIsHydrated] = useState(false);
   
   useEffect(() => {
     setIsHydrated(true);
   }, []);
   
   if (!isHydrated) {
     return <div>Loading...</div>;
   }

3. Use suppressHydrationWarning for dynamic content:

   <div suppressHydrationWarning>
     {new Date().toLocaleTimeString()}
   </div>

CORS Issues

Problem: Cross-origin requests blocked

Symptoms:

• CORS errors in browser console
• Video processing requests fail
• API calls blocked by browser
• Mixed content warnings

Solutions:

1. Configure CORS on server:

   const cors = require('cors');
   
   app.use(cors({
     origin: ['http://localhost:3000', 'https://yourdomain.com'],
     credentials: true,
     methods: ['GET', 'POST', 'PUT', 'DELETE'],
     allowedHeaders: ['Content-Type', 'Authorization']
   }));

2. Handle preflight requests:

   app.options('/api/render', cors());
   app.post('/api/render', cors(), async (req, res) => {
     // Your rendering logic
   });

3. Use proxy in development:

   // In your React app's package.json
   {
     "proxy": "http://localhost:3001"
   }

Getting Help

If you're still experiencing issues:

1. Check the server logs for detailed error messages
2. Verify all dependencies are properly installed
3. Test with a minimal configuration
4. Check system resources and limits
5. Contact support with specific error messages and logs