feat: add SSR HTTP Client Hints support

[userquin]

This PR will be merged, includes: This PR will not be merged here (will go to Nuxt or Nitro), it is a small test for Http Client Hints for SSR (will work only on Chromium based browsers, tested only in Chrome and Edge on Windows):

• Critical-CH
• Sec-CH-Prefers-Color-Scheme
• Sec-CH-Prefers-Reduced-Motion
• Sec-CH-Viewport-Width
• Sec-CH-Viewport-Height

Check also Client Hints Infrastructure.

/cc @danielroe

[netlify]

✅ Deploy Preview for vuetify-nuxt-module ready!

Name	Link
🔨 Latest commit	aba27a7
🔍 Latest deploy log	https://app.netlify.com/sites/vuetify-nuxt-module/deploys/6508bab59286960008bd15b0
😎 Deploy Preview	https://deploy-preview-99--vuetify-nuxt-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[userquin]

@mubaidr I've the viewport with and height working properly on my local, since I'm adding also prefers-color-scheme but not configuring it, we can give it a try later once I pushed my latest changes, maybe we won't need your hack anymore...

I guess we need to add a cookie, since we only have it on initial request, if using some switcher we'll need to restore the value from the cookie and don't sent the hint header once configured, ofc, we should change the cookie. Maybe we can use some state instead the cookie, I'm using it for the values...

[userquin]

@danielroe @Mubair full viewport support added, I'll check adding auto theme support, only added support for headers, I guess we need to include a cookie for it.

[userquin]

@mubaidr wrong name in previous comment...

[userquin]

@danielroe @jd-solanki @mubraid added two theme support, included simple example in the playground, it is working! Also update the docs.

I need to include browser detection and add support for browsers not supporting the HTTP Client Hints, we'll get a lot of mismatch hydration warnings on page reload

[userquin]

@mubaidr wrong name in previous comment...

[userquin]

The PR has been updated with the following fixes/features:

• browser detection
• fix viewport size mismatch hydration warning in browser that doesn't support client hints: will use the ssr configuration and once hydrated the useDisplay will update the ui; on browsers supporting client hints there is no need, the state will be restored properly
• support multiple dark and light themes: the documentation has been updated (previously only 2 themes), I need to add an example in the playground

I need to include some new browsers like Samsung Browser, Arc and Brave, and check iOS/macOS Chromium based browsers, maybe we need to exclude them. I cannot test since I haven't my macOS laptop, so any help will be appreciate.

[mubaidr]

Just curious, when using simple composable, there is no issue with hydration in my app with SSR. Why do we need client hints? Am I missing something?

[userquin]

Just curious, when using simple composable, there is no issue with hydration in my app with SSR. Why do we need client hints? Am I missing something?

Your composable is just a workaround to avoid mismatch hydration warning/error, you can use useState in your composable to achieve also the proper behaviour, you're using localStorage and the server will not have access to it.

Anyway, this PR is about having the same data in the client and the server. Adding this is about receiving the page content from the SSR response with the theme applied, that's, the page will be rendered properly (dark/light or any other theme applied).

[mubaidr]

Doh! Totally forgot about that issue. Awesome work on that one, looking forward.

[userquin]

Doh! Totally forgot about that issue. Awesome work on that one, looking forward.

IIRC, your composable was the workaround to restore the selected theme properly. If you don't restore the theme, then there is no hydration mismatch at all, you're refreshing the page.

[userquin]

I'm splitting the client hints detection, every hint will be available depending on the browser, OS and version. I'm also trying to figure out how to solve the first request, maybe with a page reload...

[userquin]

@mubaidr @jd-solanki PR updated including:

• split client hint detection using the browser, OS and version from the user agent header
• add reload page in first request support, by default it is disabled: Nuxt client plugin provides the logic to reload the page; the Nuxt server plugin will omit the theme cookie if it is the first request when required (check the shouldWriteCookieOnInitialRequest function)
• the playground now has the proper dark theme, removed light v-sheet color in the layout
• docs updated properly: included the new reload page and added warning about browsers supporting the client hints