address settings related hydration issues using prehydrate

[liangmiQwQ]

Describe the bug

According to useSettings.ts, now all settings are stored in localStorage, it is a client only storage which means server side should never read the settings or it will just get default settings.

npmx.dev/app/composables/useSettings.ts

Line 85 in 5530873

settingsRef = useLocalStorage<AppSettings>(STORAGE_KEY, DEFAULT_SETTINGS, {

However, there are some pages require settings like searchProvider and run it on server side, make users who has modified settings get hydration errors, page flashing and even worse cases.

Like if we set Data source to npm and access https://npmx.dev/~antfu will trigger page flashing and some unexpected behaviors

Solution

A easy solution is make all components called useSettings to be client only, but it's essentially a workaround, I think a better solution is migrating all the settings to cookie (Would it be more reasonable to migrate everything there instead of only migrating necessary ones?)

Additional context

No response

Logs

inline
  10:27946  error  Redundant role "list" on <ul>  no-redundant-role
  10:31520  error  Redundant role "list" on <ul>  no-redundant-role
  10:43548  error  Redundant role "list" on <ul>  no-redundant-role
  10:47720  error  Redundant role "list" on <ul>  no-redundant-role
  10:52413  error  Redundant role "list" on <ul>  no-redundant-role
  10:59418  error  Redundant role "list" on <ul>  no-redundant-role
  10:63616  error  Redundant role "list" on <ul>  no-redundant-role
  10:68288  error  Redundant role "list" on <ul>  no-redundant-role
  10:71926  error  Redundant role "list" on <ul>  no-redundant-role
  10:75503  error  Redundant role "list" on <ul>  no-redundant-role
  10:79632  error  Redundant role "list" on <ul>  no-redundant-role
  10:83171  error  Redundant role "list" on <ul>  no-redundant-role

✖ 12 problems (12 errors, 0 warnings)

[liangmiQwQ]

BTW, I'm willing to help solve this issue, my PR will be submitted soon if the team agrees what I said about migrating all the settings

[danielroe]

I don't think we should move the settings to cookies - it makes it impossible to cache the pages.

instead, we can use onPrehydrate - as we do in many places - to ensure there are no hydration errors. if you encounter hydration errors or flashes, please open issues so we can track and resolve them individually instead 🙏

[ghostdevv]

(updated the title to reflect new scope)