Next RSC: cookies().set() in validateRequest

[rwieruch]

Hi there! I have followed the Next App Router tutorial and for the validateRequest() I am setting the cookie. Everything works fine and I am able to get the current user in a server component like shown in the docs.

import { redirect } from "next/navigation";
import { validateRequest } from "@/lib/auth";

export default async function Page() {
	const { user } = await validateRequest();
	if (!user) {
		return redirect("/login");
	}
	return <h1>Hi, {user.username}!</h1>;
}

However, Next's documentation says that a query from a server component should not have side-effects vercel/next.js#49843 (comment) Is this still open for discussion or a solved topic? Thanks :)

[pilcrowonpaper]

The cookies().set() throws an error when rendering the server component, which is patched by adding a try/catch

[rwieruch]

Okay, that's what the comment means then:

// next.js throws when you attempt to set cookie when rendering page

When does this happen though? Because in an actual application I would never want to see this error, correct?

[pilcrowonpaper]

When rendering the page?

[rwieruch]

Now I get it. So we just swallow the error with catch {} and do nothing for RSC.

So essentially, when using validateRequest() in an RSC, we ONLY check the session without refreshing it. When using it somewhere else (e.g. server action), we do the whole thing.

[pilcrowonpaper]

Yes, exactly

[theorib]

I'm trying to better understand this issue. I would have thought that if I wrapped setting the cookie in a server action and called it from other server actions it would solve the issue since according to the docs, server actions and route handlers should be able to set cookies but the error is still triggered:

'use server'
import { cookies } from 'next/headers';

export const setCookie = async (cookie: Cookie) => {
  try {
    cookies().set(cookie.name, cookie.value, cookie.attributes);
  } catch (error) {
    // Next.js throws an error when attempting to set cookies when rendering page
    console.error(
      'Next.js throws an error when attempting to set cookies when rendering page',
      error,
    );
  }
};

@pilcrowonpaper from your experience in what situations does it trigger an error and when doesn't it (apart from rendering a page)? Has anyone ever found a work around for this? I get it that the error gets triggered when rendering a page but it's quite puzzling if the page was calling it as a server action that sets the cookie...

[athanclark]

Something I did to alleviate this issue (while also causing a new one, just slightly less brittle) was to use a route handler to set the cookie, but also be given a redirect url as a query parameter, similarly to this suggestion.

Next.js hates granting server components the ability to set cookies because of how it designs streaming responses, yet route handlers give you full control of the request / response lifecycle, and therefore setting cookies is good-to-go. Now, the issue is actually redirecting. For instance, I'll take the code from the docs and adjust it slightly:

import { lucia } from "@/utils/auth";
import { cookies, headers } from "next/headers";

const getUser = cache(async () => {
	const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
	if (!sessionId) return null;
	const { user, session } = await lucia.validateSession(sessionId);
	if ((session && session.fresh) || !session) {
		const headersList = headers();
                const referer = headersList.get('referer');
                await fetch('/api/auth?redirectTo=' + referer);
	}
	return user;
});

Where /api/auth/route.ts would actually write to the cookies. This model works decently because the server component would guard against getUser(), but redirect to the original url in the case that the cookie needs to be refreshed.