学习nuxt3笔记-服务端和客户端学习nuxt3笔记-服务端和客户端这个页面 ctrl+s 保存时只会有客户端输出的

1. 服务端渲染

<script setup>
const name=ref('hello')

</script>
<template>
  <div>
    {{ name }}
  </div>
</template>

网络返回为

可以看出网络从后端返回为hello 而不是name 如果是vite+vue就会返回name了

<script setup>
console.log('app')
</script>
<template>
  <div>
  </div>
</template>

这时刷新页面可以看到控制台输入

终端输出

解释：控制台输入两个app 前面有ssr的是是服务端渲染（有的浏览器控制台可能不会输出这个app）服务端是nuxt内置的引擎nitro nitro会渲染这个页面执行这个页面的script中的console.log('app') 并将渲染好的页面返回给客户端这个页面可以在network里面的locaolhost中找到这个页面里面还会返回js函数客户端会执行这些函数（这个函数我没要找到）所以会再次输出app。这样做的意义就是搜索引擎优化。另一个是客户端渲染的。终端输入的app是服务端渲染

console.log('app')
const test = () => {
  console.log('test')
}
</script>
<template>
  <div>
    <button @click="test">
    测试1
    </button>
  </div>
</template>

点击这个函数只会在客户端输出test 原因是设置的 test 方法是绑定在模板的 @click 事件上的，这是一个客户端事件，因此它在服务器端并没有触发。

<script setup>
for (let i = 0; i < 2; i++) {
  console.log(i)
}
</script>
<template>
  <div>
  </div>
</template>

这个页面 ctrl+s 保存时只会有客户端输出的0，1 因为ctrl+s 保存时会触发nuxt的srm 热更新即局部更新页面，并没有向服务端重新获取整个页面，所以服务端不会输出。当刷新时，向服务端重新获取整个页面，客户端，服务端都会输出0，1

如果在服务端nitro执行 alter,localstorege等，都会报错。因为nitro里面没有这些功能。