跳到主要内容

水和hydration理解

  • 服务端渲染出html结构，给到客户端渲染出结构，客户端增加事件、交互相关操作，使到html结构变成动态的交互性的页面，这个就是水和渲染过程

水合问题​

  • SSR 数据尽量保持单一数据源，避免水合渲染数据不一致
  • Nuxt 官方建议用 useFetch / useAsyncData / useState 这些 SSR组合式函数，并保证服务端与客户端使用一致的数据源

nuxt示例​

  • 如下代码写法很容易出现水合问题
  • 很容易出现服务端渲染获取的数据和客户端的数据，导致不一致，状态不同步
tsx
const page = ref(1)
const list = ref([])
const total = ref(0)

const { data } = await useFetch('/api/articles')

list.value = data.value.list
total.value = data.value.total
page.value = data.value.page
  • 改造代码解决方案
typescript
const { data } = await useFetch(...)

const list = computed(() => data.value?.list ?? [])
const total = computed(() => data.value?.pagination.total ?? 0)