Skip to content

SSR Redirect Error #80483

@OFranke

Description

@OFranke

Link to the code that reproduces this issue

https://github.com/limebit/next-ssr-redirect-error

To Reproduce

  1. Start the application
  2. Click the button "Check Redirect Error Here" or directly open http://localhost:3000/ssr-redirect-with-server-function
  3. 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/A

Which 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions