What are Server Actions
Server Actions — a Next.js App Router feature (stable since Next 14, 2023): async functions on the server callable directly from React components (form or button). No need to write API routes. Marked with a "use server" directive. Progressive enhancement: work without JS via native form submission. Replaces the API-route + client-side fetch pattern for mutations.
Below: details, example, related terms, FAQ.
Details
- Directive:
"use server"at the top of an async function - Form:
<form action={submitAction}>— works without JS - Optimistic UI: useOptimistic hook for instant feedback
- Revalidation: revalidatePath() / revalidateTag() — invalidates cache
- Security: always re-validate session + authorization inside the action (don't rely on page guard)
Example
"use server";
export async function createPost(formData) {
const session = await auth();
if (!session) throw new Error('Unauthorized');
await db.post.create({ data: { title: formData.get('title') } });
revalidatePath('/posts');
}Related Terms
Why teams trust us
How it works
Enter page URL
Lighthouse analyzes
Get CWV scores & tips
Why Does Site Speed Matter?
Page load speed directly impacts conversion, SEO rankings, and user satisfaction. Google uses Core Web Vitals as a ranking factor. Every extra second of load time cancost up to 7% in conversions.
Lighthouse Analysis
Google Lighthouse-based analysis: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (rendering), FID (interactivity), CLS (visual stability) — key Google metrics.
Resource Analysis
Breakdown by type: HTML, CSS, JavaScript, images, fonts. Size, request count, blocking resources.
Actionable Advice
Specific recommendations with savings estimates: image compression, caching, minification, etc.
Mobile vs Desktop
- Tested on Moto G Power emulation (slow CPU)
- Network: 4G (1.6 Mbps, 150ms RTT)
- Stricter speed scoring
- Google indexes mobile-first
- Priority for SEO optimization
- High CPU performance
- Fast connection without throttling
- Scores typically 20-40 points higher
- Important for B2B and corporate sites
- Use for baseline comparisons
Who uses this
SEO
Core Web Vitals for rankings
Developers
performance optimization
Marketers
speed = conversions
DevOps
performance regression
Common Mistakes
async/defer block rendering. Move to end or add attribute.Cache-Control, the browser reloads CSS/JS on every visit.Best Practices
loading="lazy" for images below the fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> for fonts and CSS. Reduces LCP by 200-500ms.Get more with a free account
Speed check history, competitor comparison and PageSpeed monitoring.
Sign up freeLearn more
Frequently Asked Questions
Server Actions vs API routes?
Server Actions — short-lived, called from a component, type-safe, RPC-like. API routes — public endpoints for external clients.
Are they safe?
You must re-validate auth + input inside the action. Next.js adds CSRF protection automatically. Always check ownership (IDOR).
Do they work without JavaScript?
Yes! If form action is a Server Action, submit works via native form POST without JS. Progressive enhancement.