Performance Optimization

// Dynamic import for heavy admin dashboard component
import dynamic from 'next/dynamic' // Next.js dynamic import function

const AdminDashboard = dynamic(() => import('../components/AdminDashboard'), {
  loading: () => <p>Loading dashboard...</p>, // Show while component loads
  ssr: false // Skip server-side rendering for this component
})

export default function AdminPage() {
  return (
    <div>
      <h1>Admin Panel</h1>
      <AdminDashboard /> {/* Loads only when this page renders */}
    </div>
  )
}

// Dynamic import with advanced options for NewsWave article editor
const ArticleEditor = dynamic(() => import('../components/ArticleEditor'), {
  loading: () => (
    <div className="editor-skeleton">Loading rich text editor...</div>
  ),
  ssr: false, // Client-only component with DOM dependencies
})

// Conditional loading based on user permissions
export default function EditArticle({ user }) {
  if (!user.isEditor) {
    return <p>Access denied</p>
  }

  return <ArticleEditor /> // Loads only for authorized editors
}

# Install bundle analyzer for NewsWave project
npm install --save-dev @next/bundle-analyzer

# Add analyzer script to package.json scripts section
# "analyze": "cross-env ANALYZE=true next build"

// Configure bundle analyzer in next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true', // Only run when ANALYZE=true
})

module.exports = withBundleAnalyzer({
  // Your existing Next.js config
  experimental: {
    optimizeCss: true, // Optimize CSS bundles
  },
  webpack: (config) => {
    // Custom webpack optimizations for NewsWave
    config.optimization.splitChunks.chunks = 'all'
    return config
  }
})

// Lazy loading hook using Intersection Observer
import { useState, useEffect, useRef } from 'react'

function useLazyLoad() {
  const [isVisible, setIsVisible] = useState(false) // Track visibility state
  const ref = useRef() // Reference to DOM element

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true) // Element entered viewport
        observer.disconnect() // Stop observing after first intersection
      }
    })
    
    if (ref.current) observer.observe(ref.current) // Start observing
    return () => observer.disconnect() // Cleanup on unmount
  }, [])

  return [ref, isVisible] // Return ref and visibility state
}

// Lazy loading article component for NewsWave
function LazyArticleCard({ article }) {
  const [ref, isVisible] = useLazyLoad() // Use our custom hook

  return (
    <div ref={ref} className="article-card">
      <h3>{article.title}</h3>
      
      {isVisible ? (
        <img 
          src={article.image} 
          alt={article.title}
          loading="lazy" // Browser-level lazy loading too
        />
      ) : (
        <div className="image-placeholder">Loading...</div> // Show until visible
      )}
    </div>
  )
}

// Memory leak prevention in NewsWave real-time features
import { useEffect, useState } from 'react'

function LiveArticleUpdates() {
  const [articles, setArticles] = useState([])
  
  useEffect(() => {
    // WebSocket connection for live article updates
    const ws = new WebSocket('ws://localhost:3001/articles')
    
    ws.onmessage = (event) => {
      const newArticle = JSON.parse(event.data)
      setArticles(prev => [newArticle, ...prev]) // Add new articles to top
    }
    
    // CRITICAL: Cleanup WebSocket connection
    return () => {
      ws.close() // Prevents memory leaks when component unmounts
    }
  }, [])

  return <div>{/* Render articles */}</div>
}

// Advanced cleanup for complex NewsWave analytics dashboard
function AnalyticsDashboard() {
  const [metrics, setMetrics] = useState({})
  
  useEffect(() => {
    const controller = new AbortController() // Cancel pending API calls
    
    // Polling function for real-time metrics
    const pollMetrics = async () => {
      try {
        const response = await fetch('/api/analytics', {
          signal: controller.signal // Allows cancellation
        })
        if (!controller.signal.aborted) {
          setMetrics(await response.json()) // Only update if not aborted
        }
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('Metrics fetch failed:', error)
        }
      }
    }
    
    const interval = setInterval(pollMetrics, 5000) // Poll every 5 seconds
    pollMetrics() // Initial fetch
    
    // Cleanup both timer and any pending requests
    return () => {
      clearInterval(interval) // Stop the timer
      controller.abort() // Cancel any pending fetch requests
    }
  }, [])

  return <div>Analytics: {JSON.stringify(metrics)}</div>
}

// Web Vitals monitoring for NewsWave production
// Create pages/_app.js to capture performance metrics

export function reportWebVitals(metric) {
  // Send performance metrics to analytics service
  console.log(metric) // Replace with your analytics service
  
  // Example: Send to Google Analytics
  if (window.gtag) {
    window.gtag('event', metric.name, {
      custom_map: { metric_value: 'value' },
      value: Math.round(metric.value), // Core Web Vitals score
      event_label: metric.id, // Unique identifier for this metric
      non_interaction: true, // Don't affect bounce rate calculations
    })
  }
}

// Advanced performance monitoring with custom metrics
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

function initPerformanceMonitoring() {
  // Core Web Vitals that Google uses for search ranking
  getCLS(sendToAnalytics) // Cumulative Layout Shift (visual stability)
  getFID(sendToAnalytics) // First Input Delay (interactivity)  
  getLCP(sendToAnalytics) // Largest Contentful Paint (loading)
  getFCP(sendToAnalytics) // First Contentful Paint
  getTTFB(sendToAnalytics) // Time to First Byte (server response)
}

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    url: window.location.href, // Current NewsWave page
    userAgent: navigator.userAgent, // Device/browser info
  })
  
  // Use sendBeacon for reliable delivery even if user navigates away
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/analytics', body)
  }
}