Hydration mismatch warning in Testimonials component when using SSG
good first issuejavascriptwebsite
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Description of the bug
When the website is built using SSG, the `Testimonials` component selects a random testimonial using `Math.random()` during render.
Because this logic runs both:
- at build time (server-side rendering)
- and again during client-side hydration
the rendered content may differ between server and client. This results in a React hydration mismatch warning in the browser console.
### Steps To Reproduce
1. `yarn build`
2. `yarn serve`
3. Open the homepage in a browser
4. Open the browser developer console
5. Observe a hydration mismatch warning
### Expected behavior
The website should hydrate without React warnings.
### Screenshots / Logs
<img width="743" height="167" alt="Image" src="https://github.com/user-attachments/assets/da9d6b5e-b2c7-4c9c-9080-f61ec9c62a11" />
### Software information
- Operating system: macOS Tahoe 26.3
- Rust version: 1.91.0
- Project version: 2.12.0
### Additional context
This issue occurs because `Math.random(`) is executed during render. In an SSG environment, this leads to non-deterministic output between server and client.
关闭于 2026-03-14 5 条评论