😊

<script setup>はserver,client共に実行される?

2022/04/30に公開

NUXT3 RC1で下記のようなapp.vueを作成しました。

app.vue
<template>
  <div>
    {{enviroment}}<br>
    {{testValue}}
  </div>
</template>

<script setup>
const enviroment = (process.client)? 'client' : 'server'
const testValue = ref(null)

if(process.server) {
  testValue.value = 'sample'
}

console.log(process.client, process.server)

</script>

これをブラウザで表示したときにSSRなのでサーバサイドで実行されenviromentにservertestValueにsampleが入ると思っていました。

結果は一瞬だけ想定通りの表示がされ、その後Client側でも再度実行されenviromentにclienttestValueは空(null) になってしまいました。

またconsole.logに関しては、サーバ側は「false true」、ブラウザ側は「true false」となっています。

このことから、<script setup>内の処理は基本的にサーバ、クライアントともに実行されるらしいです。

正直納得がいかなくて、ちょっと気持ち悪いです。
気持ち的にはサーバ側で処理したものをもう一度実行してほしくないなぁと。
これだったらSSRでなくてSPAでいいのでは?とちょっと思います

Discussion