Form actions with server functions in NextJS - Performance & Optimization

Performance: Form actions with server functions

MEDIUM IMPACT

This affects how quickly a form submission is processed and how fast the page updates after submission.

Handling form submission in a Next.js app

NextJS

'use server'

import { redirect } from 'next/navigation';

export const action = async (formData) => {
  // server-side processing
  return redirect('/success');
};

export default function MyForm() {
  return <form action={action}>...</form>;
}

Form submits directly to server function, reducing client JS and improving responsiveness.

📈 Performance GainNo client fetch delay, smaller client bundle by ~5-10kb, faster INP due to server handling.

Handling form submission in a Next.js app

NextJS

function MyForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.target);
    await fetch('/api/submit', { method: 'POST', body: data });
    // client-side state update
  };
  return <form onSubmit={handleSubmit}>...</form>;
}

Client-side JavaScript handles submission and calls API, adding bundle size and delaying response.

📉 Performance CostBlocks interaction during fetch, adds ~5-10kb to client bundle, triggers multiple reflows on state update.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side fetch on submit	Multiple (form + state updates)	Multiple reflows on state change	Medium paint cost	[X] Bad
Server function form action	Minimal (form submit only)	Single reflow after redirect	Low paint cost	[OK] Good

Rendering Pipeline

Form submission triggers a server function call, bypassing client fetch and state updates, reducing layout recalculations.

→Network

→Server Processing

→Layout

→Paint

⚠️ BottleneckNetwork round-trip and server processing time

Core Web Vital Affected

INP

This affects how quickly a form submission is processed and how fast the page updates after submission.

Optimization Tips

1Use server functions to handle form submissions to reduce client JavaScript.

2Avoid client fetch calls on submit to improve input responsiveness (INP).

3Minimize client state updates triggered by form submissions to reduce reflows.

Performance Quiz - 3 Questions

What is a main performance benefit of using server functions for form actions in Next.js?

A Triggers more reflows on form submit

B Reduces client-side JavaScript bundle size

C Increases client-side state updates

D Blocks server processing

DevTools: Performance

How to check: Record a submission interaction, then inspect the flame chart for scripting and network delays.

What to look for: Look for long scripting tasks on client and network wait times; shorter scripting means better performance.