nuxt3怎么在服务端获取到window.innerWidth？

Question

现在数据是用useAsyncData()获取的，在服务端渲染，为方便SEO，我没有放在onMounted()里请求数据。
现在是根据window.innerWidth来判断屏幕一行可以排几个列表数据，但是因为是服务端渲染的，所以我获取到的window.innerWidth为0。

const num = computed(() => {
  if (typeof window !== "undefined") {
    screenWidth.value = window.innerWidth;
  }
  console.log("屏幕可视宽度：" + screenWidth.value);
  if (screenWidth.value <= 1280) {
    total.value = 6;
    return 3; // 屏幕宽度小于等于 1280px，一列只能显示3张图片
  } else if (screenWidth.value <= 1850) {
    total.value = 8;
    return 4; // 屏幕宽度小于等于 1850px，一列可以显示4张图片
  } else {
    total.value = 10;
    return 5; // 屏幕宽度大于 1850px，一列可以显示5张图片
  }
});
console.log("一排个数：" + num.value);

所以现在就是：无论我屏幕可视宽度多大，它一排永远都是显示3个。
但是在浏览器控制台打印出来，显示是对的：（但是因为数据不是在浏览器渲染的所以也不能正确显示一排对应的个数）

想问一下，有什么办法，可以在服务器端获取到屏幕的可视宽度吗？？

Answer 1

在服务器端渲染 (SSR) 的过程中，window 对象是不存在的，因为它是浏览器环境中的全局对象。在 SSR 中，我们通常需要使用一种“渐进增强”或“优雅降级”的方法来处理这种情况。

在你的情况中，你可以考虑以下几种方法来解决问题：

1. 默认值：在服务器端，你可以设置一个默认的 innerWidth 值，可能基于你的网站的平均或最常见的屏幕宽度。然后，在客户端，你可以使用实际的 innerWidth 来更新这个值。

2. 客户端更新：你可以在服务器端渲染的基础上，在客户端再次计算或更新这个值。你可以在 onMounted 或 beforeMount 生命周期钩子中，获取实际的 window.innerWidth，然后根据这个值来更新你的列表布局。这种方法可能会导致布局的短暂闪烁，因为初始的服务器端渲染和客户端的更新可能会有不同的布局。

3. 使用 CSS 媒体查询：如果可能，你可以尽量避免在 JavaScript 中使用 window.innerWidth，而是使用 CSS 的媒体查询来控制布局的变化。这种方法可以完全避免上述问题，因为 CSS 的媒体查询会在客户端自动应用正确的样式，而无需在 JavaScript 中进行任何操作。
   你可以把屏幕宽度或设备类型放在 cookies 或 headers