// app/product/[id]/page.tsx
import { Suspense } from 'react';

// Static shell renders instantly (cached at edge)
// Dynamic sections stream in
export default async function ProductPage({ 
  params 
}: { 
  params: Promise<{ id: string }> 
}) {
  const { id } = await params; // Note: params is now async in Next.js 15
  
  return (
    <div>
      {/* This renders statically - no JS, instant */}
      <ProductHero productId={id} />
      
      {/* This streams in - personalized, dynamic */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={id} />
      </Suspense>
      
      {/* Also streams - depends on user session */}
      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations userId="dynamic" productId={id} />
      </Suspense>
    </div>
  );
}

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  // Validation
  if (!title || title.length < 5) {
    return { error: 'Title must be at least 5 characters' };
  }
  
  try {
    const post = await db.posts.create({
      data: { title, content }
    });
    
    revalidatePath('/blog');
    redirect(`/blog/${post.id}`);
  } catch (error) {
    return { error: 'Failed to create post' };
  }
}

// app/blog/new/page.tsx
'use client';

import { useActionState } from 'react';  // React 19
import { createPost } from '../actions';

export default function NewPostPage() {
  const [state, formAction, isPending] = useActionState(createPost, null);
  
  return (
    <form action={formAction}>
      <input name="title" placeholder="Post title" required />
      <textarea name="content" placeholder="Content" required />
      
      {state?.error && (
        <p className="error">{state.error}</p>
      )}
      
      <button type="submit" disabled={isPending}>
        {isPending ? 'Creating...' : 'Create Post'}
      </button>
    </form>
  );
}

// Next.js 14: fetch was cached by default
// Next.js 15: fetch is NOT cached by default (opt-in)

// Opt-in to caching
const data = await fetch('/api/posts', {
  next: { revalidate: 3600 }  // Cache for 1 hour
});

// Or force cache
const data = await fetch('/api/posts', {
  cache: 'force-cache'
});

// Or no cache (now the default)
const data = await fetch('/api/posts', {
  cache: 'no-store'
});

// app/routes/blog.$id.tsx
import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json, redirect } from '@remix-run/node';
import { useLoaderData, useActionData, Form } from '@remix-run/react';

export async function loader({ params, request }: LoaderFunctionArgs) {
  const { id } = params;
  
  // Auth check
  const session = await getSession(request.headers.get('Cookie'));
  if (!session.has('userId')) {
    throw redirect('/login');
  }
  
  const post = await db.posts.findUnique({ 
    where: { id },
    include: { author: true, comments: true }
  });
  
  if (!post) {
    throw new Response('Not Found', { status: 404 });
  }
  
  return json({ post });
}

export async function action({ params, request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const comment = formData.get('comment') as string;
  
  await db.comments.create({
    data: {
      content: comment,
      postId: params.id,
      authorId: session.get('userId')
    }
  });
  
  return json({ success: true });
}

export default function BlogPost() {
  const { post } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {post.author.name}</p>
      <div>{post.content}</div>
      
      <section>
        <h2>Comments</h2>
        {post.comments.map(comment => (
          <div key={comment.id}>{comment.content}</div>
        ))}
        
        {/* Works without JavaScript! Progressive enhancement */}
        <Form method="post">
          <textarea name="comment" required />
          <button type="submit">Add Comment</button>
        </Form>
        
        {actionData?.success && <p>Comment added!</p>}
      </section>
    </article>
  );
}

// app/routes/dashboard.tsx - Parent route
export default function Dashboard() {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>
        <Outlet />  {/* Child routes render here */}
      </main>
    </div>
  );
}

// app/routes/dashboard.analytics.tsx - Child route
// URL: /dashboard/analytics
export async function loader() {
  // This loader runs in parallel with the parent's loader!
  return json({ metrics: await getMetrics() });
}

import { useFetcher } from '@remix-run/react';

function LikeButton({ postId, initialLikes }: { postId: string; initialLikes: number }) {
  const fetcher = useFetcher();
  
  // Optimistically update the UI
  const likes = fetcher.formData
    ? initialLikes + 1  // Show incremented count while submitting
    : initialLikes;
  
  return (
    <fetcher.Form method="post" action="/api/like">
      <input type="hidden" name="postId" value={postId} />
      <button type="submit">
        ❤️ {likes}
      </button>
    </fetcher.Form>
  );
}

// Remix 3 integrates RSC with its loader pattern
// Server-only components in Remix
import type { ServerComponent } from '@remix-run/react';

export const serverComponent: ServerComponent = true;

export default async function HeavyDataComponent({ id }: { id: string }) {
  // This runs only on server, ships zero JS
  const data = await fetchHeavyData(id);
  
  return (
    <div>
      {data.items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

// Next.js 15 - Types from file-based routing
// Not inferred — you define them
interface PageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ page?: string }>;
}

export default async function Page({ params, searchParams }: PageProps) {
  const { id } = await params;
  const { page } = await searchParams;
  // ...
}

// Remix 3 - Excellent inference from loader return types
export async function loader() {
  return json({ 
    user: await getUser(),
    posts: await getPosts() 
  });
}

export default function Page() {
  const { user, posts } = useLoaderData<typeof loader>();
  // user and posts are fully typed! ✅
}

// 1. Async params/searchParams
// Before (Next.js 14):
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params;  // Sync
}

// After (Next.js 15):
export default async function Page({ 
  params 
}: { 
  params: Promise<{ id: string }> 
}) {
  const { id } = await params;  // Async!
}

// 2. Fetch caching defaults changed
// Before: fetch was cached by default
// After: fetch is NOT cached by default

// 3. GET route handlers uncached by default
// Add this if you want caching:
export const dynamic = 'force-static';