Next.jsパフォーマンスのヒント：GoodからLighthouse-Perfectへ

'use server';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';

export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
await db.posts.create({ data: { title } });
revalidatePath('/posts'); // Invalidate the posts cache
}

// Slow data component — this is the bottleneck
async function SlowChart() {
const data = await fetch('/api/slow-data').then(r => r.json());
return <Results data={data} />;
}

// Skeleton shows immediately, content streams in
export default async function DashboardPage() {
return (
<div>
  <header>Dashboard</header>          {/* ✅ Instant */}
  <RecentActivity />                   {/* ✅ Fast */}
  <Suspense fallback={<ChartSkeleton />}>  {/* Shows skeleton */}
    <SlowChart />                      {/* Streams when ready */}
  </Suspense>
</div>
);
}

import Link from 'next/link';

<Link href="/en/blog/nextjs-performance">  {/* ✅ Prefetched when visible */}
Read more
</Link>

<Link href="/heavy-page" prefetch={false}>  {/* ⬇️ Skip prefetch */}
Heavy page (saves bandwidth on mobile)
</Link>

// ❌ Sequential: 200ms + 300ms = 500ms total
async function SlowPage() {
const user  = await fetch('/api/user').then(r => r.json());   // 200ms
const posts = await fetch('/api/posts').then(r => r.json()); // 300ms
return <Dashboard user={user} posts={posts} />;
}

// ✅ Parallel: max(200ms, 300ms) = 300ms total
async function FastPage() {
const [user, posts] = await Promise.all([
fetch('/api/user').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
]);
return <Dashboard user={user} posts={posts} />;
}

export const dynamic = 'force-static';  // Always static, even in dev
export const revalidate = 3600;           // Revalidate every hour
export const fetchCache = 'force-no-store'; // Never use data cache

// For one-off routes without creating a separate layout:
export const metadata = {
title: 'My Page',
robots: { index: false },  // Prevent indexing this page
};