Fix homepage image hydration errors

[jonkafton]

What are the relevant tickets?

Fixes: https://github.com/mitodl/hq/issues/5416

Description (What does it do?)

We select images at random on the homepage for the hero and testimonial images. We also shuffle the testimonials. The issue is that Next.js performs the render on the server and expects the React tree not to shift when it hydrates on the client, or it logs a hydration error to console. Some information here: https://nextjs.org/docs/messages/react-hydration-error. The user will also see the flash of server rendered content.

This change uses useState and useEffect to force the randomize on the client and only once.

How can this be tested?

In dev mode (docker compose up or yarn workspace main dev), the homepage should display the hero and testimonial images at random after each refresh and should load without any console errors around hydration or image warnings.

Additional Context

With our current approach we do need the selection to happen client side, given that the server rendered content will be cached on the CDN. This does mean the page loads initially with no image while hydrating, though in the case of the hero image, the container bounds are preserved to prevent any layout shift.

[abeglova]

👍