如何使用客户端时区在 React SSR 渲染页面中格式化时间？

Question

我正在使用 React 构建一个网站，最近切换到使用服务器端渲染 (SSR) 以提高性能。在此更改后我遇到的一个问题是，当我在页面上格式化时间时（我使用的是Moment.js），它使用服务器的时区错误地呈现。

如何使用客户端的时区格式化时间？我是否需要在服务器响应上留出时间，然后让客户端呈现？

Answer 1

我是否需要在服务器响应上保留时间并让客户端在之后渲染该时间？

不幸的是，是的。

您可以构建一个实用程序组件来减少繁琐的工作。

类组件：

// utility
import React, { Component } from 'react';

// Class component
export default class ClientRender extends Component {
  state = { isMounted: false };
  
  componentDidMount () {
    this.setState({ isMounted: true });
  }

  render () {
    const { children } = this.props;
    const { isMounted } = this.state;
    
    return isMounted ? children : null;
  }
}

// Function component
export default function ClientRender({ children }) {
  const [isMounted, setIsMounted] = React.useState(false);

  React.useEffect(() => {
    setIsMounted(true);
  }, []);

  return isMounted ? children : null;
}

// in your app
import React from 'react';
import moment from 'moment';

import ClientRender from './path/to/client-render';

export default function MyComponent (props) {
  return (
    <div>
      <ClientRender>{moment(props.timeUTC * 1000).format('LLL')}</ClientRender>
    </div>
  );
}