How to format time in React SSR rendered page using client time zone?

Question

I'm building a website with React and recently switched to using server-side rendering (SSR) for improved performance. One issue I ran into after this change is that when I format a time on the page (I'm using Moment.js) it renders incorrectly using the server's time zone.

How can I format the time using the client's time zone? Do I need to leave the time off on the server response and have the client render that afterwards?

Answer 1

Do I need to leave the time off on the server response and have the client render that afterwards?

Unfortunately yes.

You can build a utility component to make this less tedious.

Class component:

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