Next.js App Router: server components vs client components

<p>I am building with Next.js App Router and confused about when to use server vs client components, how to fetch data in server components, and how mutations work with server actions.</p>

<p>Server vs client component patterns:</p> <div class="highlight"><pre><span></span><code><span class="c1">// app/traces/page.tsx -- Server Component (default, no 'use client')</span> <span class="c1">// Runs on server: direct DB access, no client JS bundle</span> <span class="k">async</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">TracesPage</span><span class="p">({</span><span class="w"> </span><span class="nx">searchParams</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">searchParams</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">q?</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">traces</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">fetchTraces</span><span class="p">({</span><span class="w"> </span><span class="nx">q</span><span class="o">:</span><span class="w"> </span><span class="kt">searchParams.q</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">main</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">SearchBar</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="p">{</span><span class="cm">/* Client component */</span><span class="p">}</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">TraceList</span><span class="w"> </span><span class="nx">traces</span><span class="o">=</span><span class="p">{</span><span class="nx">traces</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/main&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="c1">// app/traces/SearchBar.tsx -- Client Component</span> <span class="s1">'use client'</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useRouter</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'next/navigation'</span><span class="p">;</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">SearchBar</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">router</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRouter</span><span class="p">();</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">q</span><span class="p">,</span><span class="w"> </span><span class="nx">setQ</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">input</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">q</span><span class="p">}</span><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setQ</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span> <span class="w"> </span><span class="nx">onKeyDown</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'Enter'</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="sb">`/traces?q=</span><span class="si">${</span><span class="nx">q</span><span class="si">}</span><span class="sb">`</span><span class="p">)}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span> <span class="p">}</span> <span class="c1">// Server Action:</span> <span class="k">async</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">createTrace</span><span class="p">(</span><span class="nx">formData</span><span class="o">:</span><span class="w"> </span><span class="kt">FormData</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="s1">'use server'</span><span class="p">;</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">db</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="kt">formData.get</span><span class="p">(</span><span class="s1">'title'</span><span class="p">)</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="nx">revalidatePath</span><span class="p">(</span><span class="s1">'/traces'</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <p>Key points: - Server components render on server only -- zero client JS, direct DB access - 'use client' marks the boundary -- children inherit client status - Server Actions handle form mutations without API routes - Pass server data to client components as props - next: { revalidate: 60 } in fetch() for ISR caching</p>