feat: change ssrRef implementation

[mathe42]

🆒 SSR-Ref

Sorry pressed create to soon

[mathe42]

Was thinking about useing customRef but this does not exists in @vue/composition-api only in @vue/reactivity.

import {
  onServerPrefetch,
  getCurrentInstance,
  customRef
} from 'nuxt-composition-api'

export function ssrRef<T>(value: T, key: string) {
  if (process.client) {
    const serverValue = (window as any).__NUXT__?.ssrRefs?.[key]
    if (serverValue !== undefined) {
      value = serverValue
    }
  }

  return customRef<T>((track: () => void, trigger: () => void) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        value = newValue
        trigger()

        if (process.server) {
          onServerPrefetch(() => {
            const vm = getCurrentInstance()!

            if (!vm!.$ssrContext.nuxtState.ssrRefs) {
              vm!.$ssrContext.nuxtState.ssrRefs = {}
            }

            vm!.$ssrContext.nuxtState.ssrRefs[key] = value
          })
        }
      }
    }
  })
}

[danielroe]

@mathe42 Now I'm really curious 😛

[danielroe]

Very interesting idea. 👍

[mathe42]

Thanks :D

[danielroe]

Might be possible with computed with a custom setter. Not sure of the performance implications. 🤔 Is there a shortcoming of the current approach you're aware of?

[mathe42]

In Vue3 I want to use shallowRef on server side and ref on client side to reduce Proxy creation on the server.

Maybe some sort of abstract function to interact with $ssrContext.nuxtState and window.__NUXT__ would be nice.

Like:

type func = (rootKey: string) => {
   client<T>: (key: string, initValue: T) => T, //get SSR data if exists
   server: (key: string, value: any) => void //set SSR data
}

[mathe42]

see #28