NextJS 水合错误（文本内容与服务器渲染的 HTML 不匹配。）

仅在部署应用程序时出现两个错误，而不是在开发模式或本地构建中，这完全是另一个问题。

第一个错误：文本内容与服务器呈现的 HTML 不匹配。

第二个错误：补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染。

我发现这些错误是由我从 Unix 时间戳格式 (current.dt) 的 API 获取的时间格式引起的，但我不知道如何处理此问题。我应该在服务器上（即 getServerSideProps 中）格式化日期吗？或者这些错误是由其他原因引起的？

Edit：实时应用程序有错误：https://weather-test-mu.vercel.app/ https://weather-test-mu.vercel.app/

天气显示:

import type { Current, Location } from '../../types/typeWeatherApi';

const WeatherDisplay = ({
    location,
    current,
}: {
    location: Location;
    current: Current;
}) => {
    // This causes the errors:
    const hour = ('0' + new Date(current.dt * 1000).getHours()).slice(-2);
    const minutes = ('0' + new Date(current.dt * 1000).getMinutes()).slice(-2);
    const currentTime = `${hour}:${minutes}`;

    return (
        <article>
            <h1>{location.name}</h1>
            <p>{location.country}</p>
            <p>{current.feels_like}</p>
            {/* This causes the error: */}
            <p>{currentTime}</p>
        </article>
    );
};

export default WeatherDisplay;

带有 getServerSideProps 的索引页:

import axios from 'axios';
import { useState } from 'react';

import type { NextPage, GetServerSideProps } from 'next';
import type { Data, Location } from '../types/typeWeatherApi';

import { getCurrentWeather } from './api/currentWeather';
import { getCurrentLocation } from './api/currentLocation';

import WeatherDisplay from '../components/weather-display/weather-display';

const Home: NextPage = ({ initialWeather, initialLocation }: any) => {
    const [location, setLocation] = useState<Location>(initialLocation);
    const [weatherData, setWeatherData] = useState<Data>(initialWeather);
    const [units, setUnits] = useState('metric');
    const [lang, setLang] = useState('en');

    const getGeolocationData = () => {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                axios
                    .get(
                        `/api/currentLocation?lon=${position.coords.longitude}&lat=${position.coords.latitude}`
                    )
                    .then((response) => setLocation(response.data[0]));
            },
            (error) => {
                console.warn(`ERROR(${error.code}): ${error.message}`);
            },
            {
                timeout: 10000,
                maximumAge: 0,
            }
        );
    };

    const getCurrentWeather = async () => {
        await axios
            .get(
                `/api/currentWeather?lon=${location.lon}&lat=${location.lat}&units=${units}&lang=${lang}`
            )
            .then((response) => setWeatherData(response.data))
            .catch((error) => console.error(error));
    };

    return (
        <>
            <section>
                <div>
                    <p>Latitude: {location.lat}</p>
                    <p>Longitude: {location.lon}</p>
                </div>
                <button onClick={getGeolocationData}>Get Current Location</button>

                <button onClick={getCurrentWeather}>Get Current Weather</button>
            </section>
            <section className="current-weather">
                <WeatherDisplay location={location} current={weatherData.current} />
            </section>
        </>
    );
};

export const getServerSideProps: GetServerSideProps = async () => {
    const defaultWeatherQuery = {
        lat: '51.5072',
        lon: '0.1276',
        exclude: '',
        units: 'metric',
        lang: 'en',
    };

    const defaultLocationQuery = {
        lat: defaultWeatherQuery.lat,
        lon: defaultWeatherQuery.lon,
    };

    const defaultWeather = await getCurrentWeather(defaultWeatherQuery);
    const defaultLocation = await getCurrentLocation(defaultLocationQuery);

    return {
        props: {
            initialWeather: defaultWeather,
            initialLocation: defaultLocation[0],
        },
    };
};

export default Home;

我得到了答复GitHub 讨论 https://github.com/vercel/next.js/discussions/38263在 next.js 上，我会将其粘贴到此处，以便任何与我面临相同问题的人：

Quote 冰冷的约瑟夫 https://github.com/icyJoseph:

Hi,

是的，这两个错误结合在一起了。

因为客户端在第一帧上需要看到与 服务器发送过来，以便放置事件监听器并放置 兄弟姐妹和孩子正确，如果在这期间有错误 完成后，React 会记录一个错误。这件事一直发生在 反应 17 据我所知。

第二个问题由新的渲染根开始，它看到了这个 作为渲染错误，这对并发特性不友好，所以 水合作用失败，一切都被抛到了九霄云外。

至少我是这样解释第二个错误的。很多人只是 忽略了第 1 号错误，在 React 17 发布的整整 2 年里， 并不是说你这样做了，但许多人使用了这样做的库，而其他人只是 忽略了他们。可能的解决方法

时间和随机性是最常见的两个因素 这。

我会这样解决这个问题：

1. 让服务器呈现时间，但采用 UTC 格式
2. （可选）放置 CSS 使其隐藏，但仍显示在布局上（不显示任何内容）
3. 从客户端，更新到正确的时区，也使时间可见

import { CSSProperties, useEffect, useState } from "react";
import { Example } from "../components/Example";

const TimeDisplay = ({ time }: { time: number }) => {
  const [currentTime, setCurrentTime] = useState(() => {
    const hour = ("0" + new Date(time * 1000).getUTCHours()).slice(-2);
    const minutes = ("0" + new Date(time * 1000).getUTCMinutes()).slice(-2);

    return `${hour}:${minutes} UTC`;
  });

  useEffect(() => {
    setCurrentTime(() => {
      const hour = ("0" + new Date(time * 1000).getHours()).slice(-2);
      const minutes = ("0" + new Date(time * 1000).getMinutes()).slice(-2);

      return `${hour}:${minutes}`;
    });
  }, [time]);

  // optionally make this content take space, but remain invisible, to avoid layout shifts
  // it's better to use a CSS class instead
  const style: CSSProperties = {
    visibility: currentTime.includes("UTC") ? "hidden" : "visible",
  };

  return (
    <article>
      <p style={style}>{currentTime}</p>
    </article>
  );
};

我建议还混合使用 DateTimeFormat API，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat, 它可以为您显示时区：

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));

options = {
  hour: 'numeric', minute: 'numeric', second: 'numeric', 
  timeZoneName: 'short' 
};

console.log(new Intl.DateTimeFormat('sv-SE', options).format(date));

如果我在repl https://replit.com/languages/javascript，我得到 3:00:00 AM UTC （这将是 你的服务器发送的内容），但如果我在我得到的浏览器上运行它， 欧洲中部时间 4:00:00。

您页面的源代码包含服务器看到的时间。

由于用户从不同的时区到达您，您必须 考虑显示 UTC 的框架，然后显示时间 用户时区。将此与 CSS 可见性结合起来效果很好， 因为你可以避免布局变化等，所以时间会花掉 的地方，但它不会被看见。

机器人、爬虫依然能看到时间，对于禁用 JS 的用户来说， 您可以添加一个标签，使日期再次可见。