-
Notifications
You must be signed in to change notification settings - Fork 30.7k
SSR Redirect Error #80483
Copy link
Copy link
Labels
Description
Link to the code that reproduces this issue
https://github.com/limebit/next-ssr-redirect-error
To Reproduce
- Start the application
- Click the button "Check Redirect Error Here" or directly open http://localhost:3000/ssr-redirect-with-server-function
- Note that the error Notification "Application error: a client-side exception has occurred while loading localhost (see the browser console for more information)." will occur before the redirect to the start page
Current vs. Expected behavior
I would expect no error message that situation.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 20.19.1
npm: 10.8.2
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 15.3.3 // Latest available version is detected (15.3.3).
eslint-config-next: 15.3.3
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Redirects
Which stage(s) are affected? (Select all that apply)
Vercel (Deployed), next start (local), next build (local), next dev (local), Other (Deployed)
Additional context
The issue seems to be related to the usage of server functions. When I fetch data via useEffect and async server function in a layout component, SSR redirects in the page component will lead to an error. When I fetch data via fetch instead of server function, the SSR redirects in page components will just work fine.
// layout.tsx
"use client";
import { useEffect } from "react";
import { serverFunction } from "../server-functions";
export function LayoutServerFunction() {
useEffect(() => {
async function callServerFunction() {
await serverFunction(); // --> SSR redirects in the page.tsx component will throw an error
// const res = await fetch("http://localhost:3000/api/api-endpoint"); --> that will work fine
}
callServerFunction();
});
return <div>Layout Component</div>;
}
Here is a video flashing the error message:
https://github.com/user-attachments/assets/7449329a-d01f-4df6-af61-3d379295e6cc
Reactions are currently unavailable