Composition-api: fix: ssr result is not expected when I use computed with ssrRef

[JanusSpark]

🐛 The bug
What isn't working? Describe what the bug is.
js code is like this

  const userSubTitle = ssrRef(  
      computed(() => {  
        if ($accessor.isLogin) {  
          if (xxxxx) {  
            return 'testtesttesttesttest';  
          }  
          return;  
        }  
        return;  
      }),  
      'userSubTitle',  
    );  

template code

<div class="info">   
      <div class="name">{{ isLogin ? userInfo.nick : 'not Login' }}</div>  
      <div class="subTitle">{{ userSubTitle }}</div>  
</div>

first screen is server side render result.It shows the userSubTitle as an object.

then client side render page again shows the expected result

🛠️ To reproduce
Steps to reproduce the behavior:

just use computed with ssrRef.You will reproduce it

🌈 Expected behaviour
Can you fix the server side render not use the 'value' property when use computed with ssrRef？

ℹ️ Additional context
Because this variable may change on client side.
So I use vuex's state for it.And I will trigger the vuex action on both server side or client side(if necessary).Then the vuex's state will change automatically

[danielroe]

@JanusSpark The ssrRef function takes a callback function rather than a computed value.

So, for example:

const userSubTitle = ssrRef(() => {
  if ($accessor.isLogin) {
    if (xxxxx) {
      return 'testtesttesttesttest'
    }
    return
  }
  return
}, 'userSubTitle')

If you need to use the computed property you could do it like this:

const comp = computed(() => {
  if ($accessor.isLogin) {
    if (xxxxx) {
      return 'testtesttesttesttest'
    }
    return
  }
  return
})

const userSubTitle = ssrRef(() => comp.value, 'userSubTitle')

Does that suit your use-case?

[JanusSpark]

@JanusSpark The ssrRef function takes a callback function rather than a computed value.

So, for example:

const userSubTitle = ssrRef(() => {
  if ($accessor.isLogin) {
    if (xxxxx) {
      return 'testtesttesttesttest'
    }
    return
  }
  return
}, 'userSubTitle')

If you need to use the computed property you could do it like this:

const comp = computed(() => {
  if ($accessor.isLogin) {
    if (xxxxx) {
      return 'testtesttesttesttest'
    }
    return
  }
  return
})

const userSubTitle = ssrRef(() => comp.value, 'userSubTitle')

Does that suit your use-case?

Wow!!!! That suit my use-case. Thank you very much!

[JanusSpark]

@danielroe I'm back again.
I use the computed property like this

const compUserInfo = computed(() => $accessor.userInfo);
const userInfo = ssrRef(compUserInfo.value, 'userInfo');

But when I update the value on client side,the compUserInfo has updated new value,but the userInfo not update at all.
update code is like this

index.vue

$accessor.getUserInfo();

store/index.ts

export const actions = {
  async getUserInfo(this: Store<RootState>, { commit, state }: ActionContext<RootState, RootState>) {
    const data = await dataRequest('getUserInfo');
    commit('setUserInfo', data);
  },
}

export const mutations = {
  setUserInfo(state: RootState, newValue: any) {
    state.userInfo = newValue;
  },
};

what should I do to let the ssrRef value userInfo update automatically?Or I only should update userInfo.value after I called $accessor.getUserInfo(); method？Or I just use computed directly？

[danielroe]

Hi again :-)

An ssrRef isn't really designed to reactively update in the way you want - which I guess is sort of an ssrComputed? The concept of ssrRef is that if the server has already calculated the value, it _won't_ update again on the client.

I think I would just use a normal computed, unless I'm misunderstanding your use-case. Or you could do something like:

const compUserInfo = computed(() => $accessor.userInfo);
const userInfo = ssrRef(compUserInfo.value, 'userInfo');

watch(compUserInfo, val => userInfo.value = val);

[JanusSpark]

I decide to use normal computed ~ Thank you for your patience