Question

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

如何使用客户端的时区格式化时间？我是否需要在服务器响应上保留时间并让客户端在之后进行渲染？

Answer 1

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

不幸的是，是的。

您可以构建一个实用程序组件，使其不那么繁琐。

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

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;
  }
}

// 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>
  );
}

Answer 2

我没有特别使用React，但一般方法是使用包含时区的完整日期/时间格式呈现<time>元素（documentation here），然后调整文本输出客户端。

当你给客户端补充水分时，这应该是相当简单的;如果您在每个请求中呈现服务器端，react-moment也会接受timezone

Answer 3

我有同样的问题。

您可以尝试做的一件事是将cookie客户端设置为时区作为值。

客户的第一次访问始终是一个问题，因此请准备使用默认时区或延迟呈现（带有didMount事件）。

但是一旦客户返回了该cookie，您就可以将该cookie值用作呈现日期和时间字符串的时区。

还没有尝试过，如果我成功了，我将尝试考虑更新该帖子

如何使用客户端时区格式化React SSR呈现页面中的时间？

3 个答案: