服务器和客户端中的Node Js和React js SSR时间不匹配

Question

I am dealing with Node js and React js Server Side Rendering. I have encountered a problem. I save time under ISO format on MongoDB, so I need to convert it to regular format, and the result of the conversion is different between server and client due to the difference of server's timezone and client's timezone (I need MM/dd/YYYY HH:mm format). Of course, react throws a warning about it. I used moment.js and toLocalString(). Do you guys have any possible solutions to resolve this problem?

Thank you guys so much.

Answer 1

As you said, the problem is due to the difference between the server's timezone and the client's timezone. One way to fix this is to render the ISO timestamp on the server and later replace it with local time on the client-side in componentDidMount() .

React docs say that componentWillMount() is the only lifecycle method called on server rendering so it's safe to write timezone related logic in componentDidMount() .

document.querySelectorAll('...').forEach(el => {
  const timestamp = Number(el.textContent)
  const timezoneOffset = new Date().getTimezoneOffset() * 60 * 1000 // milliseconds
  const localDate = new Date(timestamp - timezoneOffset)
  el.textContent = formattedDate(localDate, 'my-custom-format') // use custom formatting here
})