NEXT.JS
CORE_

import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';
import { CreatePostForm } from './form';

// ============================================
// 1. DATA FETCHING (SERVER COMPONENT)
// ============================================
async function getPosts() {
  // fetch() is extended by Next.js to auto-cache
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR: Revalidate every hour
  });
  
  if (!res.ok) throw new Error('Failed to fetch data');
  return res.json();
}

// Database query inside a Server Component
async function getProfile(userId) {
  const profile = await db.user.findUnique({ where: { id: userId } });
  if (!profile) notFound(); // Triggers not-found.tsx
  return profile;
}

// ============================================
// 2. SERVER ACTIONS (MUTATIONS)
// ============================================
async function createPostAction(formData) {
  'use server'; // Marks function to execute securely on server
  
  const title = formData.get('title');
  const content = formData.get('content');
  
  // Validate and Insert into DB
  await db.post.create({ data: { title, content } });
  
  // Purge cache and reload page data
  revalidatePath('/blog');
}

// ============================================
// 3. PAGE COMPONENT (RSC)
// ============================================
// Generate Dynamic SEO Metadata
export async function generateMetadata({ params }) {
  return {
    title: `User Profile - ${params.id}`,
    description: 'Dynamic user dashboard'
  };
}

// Default Page Export
export default async function DashboardPage({ params }) {
  // Fetching data concurrently
  const postsData = getPosts();
  const profileData = getProfile(params.id);
  
  // Await the promises
  const [posts, profile] = await Promise.all([postsData, profileData]);

  return (
    <main className="p-8">
      <h1>Welcome, {profile.name}</h1>
      
      {/* Streaming UI with Suspense */}
      <Suspense fallback={<p>Loading your feed...</p>}>
        <PostFeed posts={posts} />
      </Suspense>
      
      {/* Client Component injected with a Server Action */}
      <CreatePostForm action={createPostAction} />
    </main>
  );
}