Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next.JS: Date is based on the server's local time in a client component

Context

When I declare const now = new Date() inside a component marked with ‘use client’ the date is logged as a UTC date while the client is in Pacific Time. I am declaring the variable outside of the component.

Issue

When I interact with the component on the client to cause a re-render, the value of the date variable changes to the client’s timezone, as if this code outside of the component is being run again. I would like to understand why this is. I thought this code would only run again on a page reload. My problem is that I have a dynamic src which only displays the correct image when I interact with the component. When I refresh the page after a day, the old image with the previous day’s date is displayed.

Question

I understand that this variable is being initialized on the server at first, but I don’t understand why the code outside of the component is being run on the client on the first re-render of the component.

I would like to know more about what was happening. What is the life cycle of a component marked with ‘use client’? Is the entire file run on the server first and then again on the client after the first interaction?

Update

I moved the declaration inside the component and added some logic to make sure the timezone is correct regardless of where the date is declared. The image from the previous day is still being shown after a refresh even though the src props contains a different date and a no-cache cache control header is present. Still it’s only when I cycle the image back and forth that the correct image displays. Is the old component rendering after a refresh even though the src state is being reset to the current date? My src looks like this: https://website.com/data/${date}.png and date is a state variable.

Tags:

2

Answers


  1. 0

    Because on server, the code will run during ssr, and the date will be in the server’s timezone (typically UTC in default if not configured).

    and on client, React re-renders the component, this causes const now = new Date() to be executed on the client too, resulting in a date in the client’s timezone (Pacific Time in your case).

    Login or Signup to reply.
  2. 0

    Use libraries like date-fns or Moment.js to convert the initial server-side now to the desired time zone.

      import { format, utcToZonedTime } from 'date-fns';
    
    function MyComponent() {
      const now = new Date(); // Initially reflects server time
    
      // Optional time zone adjustment (replace with your desired zone)
      const clientNow = utcToZonedTime(now, 'America/Los_Angeles');
    
      const formattedDate = format(clientNow || now, 'yyyy-MM-dd'); // Use clientNow if adjusted
    
      return (
        <div>
          <p>Current date (server time): {format(now, 'yyyy-MM-dd HH:mm:ss')}</p>
          <p>Current date (client time): {formattedDate}</p>
          <img src={`https://website.com/data/${formattedDate}.png`} alt="" />
        </div>
      );
    }
    
    export default MyComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search