Next.js开发中遇到Unhandled Runtime Error问题求助

这是典型的Next.js水合（Hydration）不匹配错误，根源是服务端渲染时计算的相对时间和客户端水合时计算的时间存在延迟差，导致HTML内容不一致。以下是几种实用解决方案：

方案1：客户端 useEffect 中计算相对时间 #

服务端先渲染占位文本，等客户端完成水合后再计算并更新相对时间，避免服务端与客户端的时间差：

import { useEffect, useState } from 'react';

const TimeAgo = ({ timestamp }) => {
  const [timeAgo, setTimeAgo] = useState('加载中...');

  useEffect(() => {
    const calcTimeAgo = () => {
      const diffMinutes = Math.floor((Date.now() - timestamp) / 60000);
      setTimeAgo(`${diffMinutes} mins ago`);
    };

    calcTimeAgo();
    // 可选：每分钟自动更新时间
    const timer = setInterval(calcTimeAgo, 60000);
    return () => clearInterval(timer);
  }, [timestamp]);

  return <span>{timeAgo}</span>;
};

export default TimeAgo;

方案2：禁用组件的SSR渲染 #

如果组件依赖动态时间计算，直接让组件仅在客户端渲染，彻底规避服务端与客户端的时间差异：

import dynamic from 'next/dynamic';

// 禁用SSR，组件只在客户端加载渲染
const TimeAgo = dynamic(() => import('./TimeAgo'), { ssr: false });

// 业务组件中使用
const PostCard = ({ post }) => {
  return (
    <div className="post-card">
      <h2>{post.title}</h2>
      <TimeAgo timestamp={post.createdAt} />
    </div>
  );
};

export default PostCard;

方案3：服务端预计算时间+客户端定时更新 #

如果需要服务端渲染初始时间，可在服务端计算好初始相对时间传给组件，再在客户端定时更新，兼顾SSR和实时性：

// 页面组件的服务端数据获取逻辑
export async function getServerSideProps() {
  const post = await fetch('/api/posts/1').then(res => res.json());
  // 服务端计算初始相对时间
  post.initialTimeAgo = `${Math.floor((Date.now() - post.createdAt) / 60000)} mins ago`;
  return { props: { post } };
}

const PostDetail = ({ post }) => {
  const [timeAgo, setTimeAgo] = useState(post.initialTimeAgo);

  useEffect(() => {
    const updateTime = () => {
      const diffMinutes = Math.floor((Date.now() - post.createdAt) / 60000);
      setTimeAgo(`${diffMinutes} mins ago`);
    };
    // 每分钟更新一次
    const timer = setInterval(updateTime, 60000);
    return () => clearInterval(timer);
  }, [post.createdAt]);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>发布于：{timeAgo}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  );
};

export default PostDetail;

核心原因说明 #

Next.js的SSR机制要求服务端输出的HTML与客户端水合生成的DOM完全一致。相对时间是动态计算值，服务端渲染时刻与客户端水合时刻存在时间差（哪怕仅几秒），就会导致分钟数计算结果不同，触发Unhandled Runtime Error。

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