Performance & Core Web Vitals

// ❌ whole page becomes client JS
'use client'
export default function CoursePage() { /* big page + one Like button */ }

// ✅ page stays on the server, only the button ships JS
export default function CoursePage() {
  return (<>
    <BigServerContent />
    <LikeButton />          {/* 'use client' inside this small file */}
  </>)
}

# See which packages make your JavaScript big (Turbopack bundle analyzer)
npx next experimental-analyze

# Then open the printed local URL and look for large modules

// app/courses/[slug]/page.jsx
import dynamic from 'next/dynamic'

// The chart library (≈ 200 KB) loads only when this component is rendered
const FeeChart = dynamic(() => import('@/components/FeeChart'), {
  loading: () => <p>Loading chart…</p>,
})

// In a Client Component you can also skip server rendering:
// const Map = dynamic(() => import('./Map'), { ssr: false })

// app/layout.jsx
import Script from 'next/script'

<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" strategy="afterInteractive" />
<Script id="ga" strategy="afterInteractive">
  {`window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date()); gtag('config', 'G-XXXX');`}
</Script>

// Chat widget that is not urgent:
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />