😊
<script setup>はserver,client共に実行される?
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にserver、testValueにsampleが入ると思っていました。
結果は一瞬だけ想定通りの表示がされ、その後Client側でも再度実行されenviromentにclient、testValueは空(null) になってしまいました。
またconsole.logに関しては、サーバ側は「false true」、ブラウザ側は「true false」となっています。
このことから、<script setup>内の処理は基本的にサーバ、クライアントともに実行されるらしいです。
正直納得がいかなくて、ちょっと気持ち悪いです。
気持ち的にはサーバ側で処理したものをもう一度実行してほしくないなぁと。
これだったらSSRでなくてSPAでいいのでは?とちょっと思います
Discussion