When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: Naukri-style job board

The Recruitment team building Naukri-style job board uses Performance Optimization to keep LearnHub fast on slow mobile networks during exam season. job seekers and recruiters never see the TypeScript files — they just get a fast, reliable job search, apply forms, and employer dashboards.

Production-style code

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false
});

export default function InstructorAnalytics() {
  return (
    <section>
      <h1>Course analytics</h1>
      <HeavyChart courseId="nextjs-101" />
    </section>
  );
}

What happens in production: In Naukri-style job board, getting Performance Optimization right means job seekers and recruiters trust the job search, apply forms, and employer dashboards every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false
});

export default function InstructorAnalytics() {
  return (
    <section>
      <h1>Course analytics</h1>
      <HeavyChart courseId="nextjs-101" />
    </section>
  );
}

Line-by-line walkthrough

How it works (big picture)

• dynamic() splits HeavyChart into a separate chunk loaded after main page.
• ssr: false skips server render for chart library that needs window.
• Combine with Server Components for data shell.

Do this on your computer

1. Run npm run build and read route size output
2. Convert one heavy Client import to dynamic()
3. Run Lighthouse on /courses
4. List three LearnHub pages to keep as Server Components
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Use npm run dev while editing Performance Optimization — the page hot-reloads on save.

Remember

Default to Server Components. dynamic() for heavy client-only code. Measure with Lighthouse and build output.

Common questions