Next.js 13中getServerSideProps替代方案：客户端页面预取与重定向

你之前用getServerSideProps的需求，在Next.js 13的App Router里可以通过以下几种方式实现，避免客户端useEffect方案的渲染闪烁问题：

方案1：用服务器组件直接处理（推荐） #

如果你的页面不需要客户端交互逻辑，直接去掉"use client"指令，在服务器组件中异步获取数据并判断重定向。这种方式和getServerSideProps逻辑一致，完全在服务器端执行，不会有客户端渲染开销。

// app/[page]/page.js
import { redirect } from 'next/navigation';

async function Page() {
  // 用cache: 'no-store'实现类似getServerSideProps的每次请求都获取新数据
  const res = await fetch('你的接口地址', { cache: 'no-store' });
  const data = await res.json();

  // 满足条件时执行重定向
  if (!data.isValid) {
    redirect('/target-path');
  }

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

export default Page;

方案2：服务器组件做包装器（适配客户端交互场景） #

如果页面必须是客户端组件（需要"use client"处理交互），可以把数据获取和重定向逻辑放在外层的服务器组件中，再将数据传递给客户端组件使用。

// app/[page]/page.js (服务器组件，无需"use client")
import ClientComponent from './ClientComponent';
import { redirect } from 'next/navigation';

async function Page() {
  const res = await fetch('你的接口地址', { cache: 'no-store' });
  const data = await res.json();

  if (!data.isValid) {
    redirect('/target-path');
  }

  // 将数据传给客户端组件
  return <ClientComponent data={data} />;
}

export default Page;

客户端组件代码：

// app/[page]/ClientComponent.jsx
'use client';

export default function ClientComponent({ data }) {
  // 这里可以写客户端交互逻辑，直接使用服务器获取的数据
  return (
    <div>
      {/* 客户端渲染内容 */}
    </div>
  );
}

方案3：优化客户端useEffect方案（仅特殊场景使用） #

如果一定要在客户端组件内处理，需要添加加载状态避免用户看到不必要的页面内容，但这种方式会有客户端渲染的闪烁问题，不推荐作为首选：

'use client';
import { useEffect, useState } from 'react';
import { redirect } from 'next/navigation';

export default function ClientPage() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch('你的接口地址');
        const data = await res.json();
        
        if (!data.isValid) {
          redirect('/target-path');
          return;
        }

        // 处理数据逻辑
      } catch (error) {
        // 错误处理
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  // 加载状态下显示占位内容
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

方案对比 #

• 方案1/2：服务器端执行数据获取和重定向，无客户端渲染开销，完全复刻getServerSideProps的体验，优先选择。
• 方案3：客户端执行逻辑，存在渲染闪烁和性能损耗，仅在无法使用服务器组件的特殊场景下使用。

内容的提问来源于stack exchange，提问作者micheal