adobe / adobe/react-spectrum

DatePicker - Internationalization server client mismatch [NextJS 14.1.0 App Router]

Open
#6,216 6 comments 0 reactions 0 assignees View on GitHub
documentation enhancement internationalization ssr
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here
NextJS 14.1.0 using App Router
When using DatePicker as instructed in documentation server client mismatch occurs.

To mitigate a rerender on client (adapting language) for some of the components we need to provide language information on server

I've followed the steps provided [here](https://react-spectrum.adobe.com/react-aria/ssr.html)

![datepicker](https://github.com/adobe/react-spectrum/assets/99512564/81727b94-4d21-4b4f-9992-8e7759f15fef)

### 🤔 Expected Behavior?

The component should get correct language on SSR and not need to correct it on client.

### 😯 Current Behavior

The component doesn't render correct language on SSR, corrects on client resulting in a server client mismatch

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/nextjs-arbvzx?file=components%2FDatePicker.tsx

### Version

react-aria-components 1.1.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Windows 10

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.