redirecting and revalidation causing full layout re-render

Unanswered

Golden-winged Warbler posted this in #help-forum

Golden-winged WarblerOP

2023-11-19T15:45:12.000Z

I have this server action defined in src/app/actions.ts;

'use server'

import { addItem } from "@/utils";
import { nanoid } from "nanoid";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createItem(formData: FormData) {
    const id = nanoid()
    const text = formData.get('text')
    try {
        await addItem({ id: id, text: text })
        revalidatePath('/')
        revalidatePath('/')
        redirect(`/f/${id}`)
    } catch (error) {
        throw error
    }
}

And a simple form with an input like this;

  import { createItem } from '../actions';

export default function Form() {
  return (
    <form action={createItem} className='form'>
      <input type="text" name="text" />
      <button type='submit' className='form-btn'>Submit</button>
    </form>
  );
}

Below this component I have a unordered list of all items which should be revalidated on each form submission. But for some reason it's rerendering the whole layout and causes a slight layout shift effect.
Is there something I am doing wrong here?
Also the network tab shows it fetches the font file and css file for each for submit.

5 Replies

Gull Terrier

2023-11-19T16:29:03.000Z

it's doing what it's supposed to do. What does the rest of your code looks like around this form submission? Can you provide more context?

You don't really need to revalidate("/"), im pretty sure that will invalidate your entire app and force it to refetch in the background. Better to invalidate what you actually need to. You can do so with the revalidateTag or if you have it in a separate path you can revalidate (/my-path) which will revalidate everything under that path.

Golden-winged WarblerOP

2023-11-19T16:29:46.000Z

Even with the revalidateTag it's doing the same thing

It's the default basic nextjs app with the above form component in the root page and a unordered list below it rendering each text item

The redirect is supposed to fetch the css and font file again?

Also just revalidating data has the same impact ðŸ¤”