Next.js服务端渲染页面用useEffect获取数据的SEO疑问

一、对SEO的影响分析 #

你当前用useEffect在客户端判断登录状态的方式，对核心SEO几乎没有负面影响：

• 页面核心内容（书籍标题、描述）已经通过getStaticProps完成服务端渲染，这部分内容会被搜索引擎爬虫正常抓取，是SEO的核心权重来源。
• 登录状态对应的差异仅为显示描述还是按钮，爬虫不会执行客户端JS，只会看到未登录状态的内容，但这部分差异不影响核心内容的SEO表现。
• 唯一的问题是页面会出现闪屏现象：初始渲染时显示未登录状态，useEffect执行后才切换到登录状态，影响用户体验，但不涉及SEO。

二、两种方案的对比 #

1. 保留localStorage + useEffect方案 #

• 优势：无需改动token存储逻辑，实现成本低。
• 关键注意点：
  • 你当前代码仅判断token存在就标记登录，存在安全隐患——过期、无效的token也会被判定为登录状态，必须增加后端验证token有效性的请求，在useEffect里调用后端接口校验token后，再更新isLoggedIn状态。
  • 修复代码中的JSX语法错误：条件渲染里多余的嵌套大括号、按钮的onclick需改为React规范的onClick、按钮标签未闭合的问题。

2. 转用Cookie存储token，服务端判断状态 #

• 如果你想消除闪屏，或者需要让爬虫识别登录状态（当前场景不需要），可以将token存入Cookie，但需注意：
  • getStaticProps是静态生成逻辑，无法访问请求上下文（包括Cookie），因此需要将页面改为使用getServerSideProps，或通过Next.js的Middleware处理登录状态后传递给页面。
  • 服务端拿到Cookie中的token后，同样要做有效性校验，再将isLoggedIn作为props传入页面，这样页面初始渲染就是正确状态，不会出现闪屏。
• 缺点：会失去getStaticProps的静态生成优势（如CDN缓存），若页面访问量较大，可能影响性能。

三、针对当前代码的优化示例 #

export default function BookDetail(props) {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const [isCheckingToken, setIsCheckingToken] = React.useState(true);

  React.useEffect(() => {
    const checkLoginStatus = async () => {
      const token = localStorage.getItem("token");
      if (!token) {
        setIsCheckingToken(false);
        return;
      }
      // 调用后端接口验证token有效性
      try {
        const res = await fetch('/api/validate-token', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });
        if (res.ok) {
          setIsLoggedIn(true);
        }
      } catch (err) {
        console.error('Token验证失败:', err);
      } finally {
        setIsCheckingToken(false);
      }
    };

    checkLoginStatus();
  }, []);

  // 验证过程中显示加载状态，避免闪屏
  if (isCheckingToken) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {props.res.data.title}
      <br/>
      {!isLoggedIn ? (
        <>{props.res.data.description}</>
      ) : (
        <button type="button" onClick={() => window.location.href='http://example.com'}>
          跳转至示例站点
        </button>
      )}
    </div>
  );
}

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