Bootstrap 5下拉菜单箭头在页面首次访问/刷新时显示异常（Vue+Nuxt环境）

这问题我之前在Nuxt SSR项目里踩过坑！核心原因是Bootstrap 5的默认下拉箭头是通过伪元素生成的，而服务端渲染（SSR）和客户端hydration（水合）阶段的样式加载、DOM处理有冲突，导致了箭头闪烁和布局偏移的问题。

先复盘下你的场景：你用FontAwesome图标自定义了下拉箭头，但首次刷新/访问时，Bootstrap自带的伪元素箭头会先显示出来，等客户端渲染完成后才消失，而且这个默认箭头还导致了导航链接上移。你试过用CSS隐藏但没生效，用<ClientOnly>包裹虽然能解决，但牺牲了导航栏的加载速度，确实不是最优解。

解决思路和具体方案 #

方案1：提升CSS选择器优先级，确保样式在SSR阶段生效

你之前写的CSS选择器可能优先级不够，或者因为是组件内的scoped样式，在服务端渲染时没生效。可以试试用更精准、优先级更高的选择器，并且把样式放到全局样式文件（比如assets/css/main.css）里，或者在组件scoped样式里用:global()声明：

/* 全局样式文件中使用这个选择器 */
.nav-item.dropdown .nav-link[data-bs-toggle="dropdown"]::after {
  display: none !important;
}

/* 或者在组件的scoped样式里用:global()包裹 */
:global(.nav-item.dropdown .nav-link[data-bs-toggle="dropdown"]::after) {
  display: none;
}

这样能确保服务端渲染时，这个隐藏样式就已经生效，不会出现默认箭头的闪烁。

方案2：遵循Bootstrap规范，添加dropdown-toggle类

Bootstrap 5的下拉默认箭头是给.dropdown-toggle类的元素生成的，你目前的导航链接没有加这个类，反而可能因为data-bs-toggle="dropdown"属性被Bootstrap的样式/JS识别，动态生成了伪元素。

修改你的下拉触发链接，加上dropdown-toggle类：

<a
  class="nav-link dropdown-toggle"
  href="#"
  role="button"
  data-bs-toggle="dropdown"
  aria-expanded="false"
>
  Dropdown1
  <font-awesome-icon :icon="['fas', 'sort-down']" size="xs" class="move-up" />
</a>

然后用最直接的选择器隐藏默认箭头（同样要确保样式在SSR阶段生效）：

.dropdown-toggle::after {
  display: none;
}

这个方案更贴合Bootstrap的设计规范，也能从根源上避免默认箭头的生成逻辑冲突。

为什么<ClientOnly>能解决但不推荐？ #

<ClientOnly>会让导航栏只在客户端渲染，服务端不生成对应的HTML，所以服务端阶段不会加载Bootstrap的伪元素样式，自然不会出现箭头。但代价是导航栏会延迟出现，影响页面首屏体验，所以优先用前面的样式优化方案。

备注：内容来源于stack exchange，提问作者CS LEE