fix(grid): doesn't adjust it's content to fit responsive config in SSR page, closes #2462

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - Fix `n-color-picker` can't input alpha value correctly manually.
 - Fix some components don't work correctly if `__VUE_OPTIONS_API__` is set to `false`, closes [#3146](https://github.com/TuSimple/naive-ui/issues/3146).
+- Fix `n-grid` doesn't adjust it's content to fit responsive config in SSR page, closes [#2462](https://github.com/TuSimple/naive-ui/issues/2462).
 
 ## 2.30.5
 

CHANGELOG.zh-CN.md

@@ -6,6 +6,7 @@
 
 - 修复 `n-color-picker` 手动输入 alpha 值时不生效
 - 修复某些组件在 `__VUE_OPTIONS_API__` 设为 `false` 时工作不正常的问题，关闭 [#3146](https://github.com/TuSimple/naive-ui/issues/3146)
+- 修复 `n-grid` 在 SSR 页面挂载后不会正确的适配响应式，关闭 [#2462](https://github.com/TuSimple/naive-ui/issues/2462)
 
 ## 2.30.5
 

src/grid/src/Grid.tsx

@@ -30,7 +30,7 @@ import { defaultSpan, gridInjectionKey } from './config'
 
 const defaultCols = 24
 
-const ssrAttrName = 'data-ssr-key'
+const SSR_ATTR_NAME = '__ssr__'
 
 const gridProps = {
   responsive: {
@@ -60,7 +60,7 @@ const gridProps = {
 } as const
 
 export interface NGridInjection {
-  isSSR: Ref<boolean>
+  isSsrRef: Ref<boolean>
   itemStyleRef: Ref<CSSProperties | string | undefined>
   xGapRef: Ref<string | undefined>
   overflowRef: Ref<boolean>
@@ -123,29 +123,27 @@ export default defineComponent({
     )
 
     // for SSR, fix bug https://github.com/TuSimple/naive-ui/issues/2462
-    const isSSRRef = ref(false)
+    const isSsrRef = ref(false)
     const contentElRef = ref<HTMLElement>()
     onMounted(() => {
       const { value: contentEl } = contentElRef
       if (contentEl) {
-        const ssrKey = contentEl.getAttribute(ssrAttrName)
+        if (contentEl.hasAttribute(SSR_ATTR_NAME)) {
-        /* istanbul ignore if */
+          contentEl.removeAttribute(SSR_ATTR_NAME)
-        if (ssrKey) {
+          isSsrRef.value = true
-          contentEl.removeAttribute(ssrAttrName)
-          isSSRRef.value = true
         }
       }
     })
 
     provide(gridInjectionKey, {
-      isSSR: isSSRRef,
+      isSsrRef,
       itemStyleRef: toRef(props, 'itemStyle'),
       xGapRef: responsiveXGapRef,
       overflowRef
     })
 
     return {
-      isSSR: !isBrowser,
+      isSsr: !isBrowser,
       contentEl: contentElRef,
       mergedClsPrefix: mergedClsPrefixRef,
       style: computed<CSSProperties>(() => {
@@ -293,7 +291,7 @@ export default defineComponent({
             ref: 'contentEl',
             class: `${this.mergedClsPrefix}-grid`,
             style: this.style,
-            [ssrAttrName]: this.isSSR || null
+            [SSR_ATTR_NAME]: this.isSsr || undefined
           },
           this.$attrs
         ),

src/grid/src/GridItem.tsx

@@ -1,11 +1,4 @@
-import {
+import { h, defineComponent, inject, getCurrentInstance, PropType } from 'vue'
-  h,
-  defineComponent,
-  inject,
-  getCurrentInstance,
-  PropType,
-  Ref
-} from 'vue'
 import { pxfy } from 'seemly'
 import { keysOf } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
@@ -44,10 +37,6 @@ export const gridItemPropKeys = keysOf(gridItemProps)
 
 export type GridItemProps = ExtractPublicPropTypes<typeof gridItemProps>
 
-const track = (target: Ref<unknown>): void => {
-  Reflect.get(target, 'value')
-}
-
 export default defineComponent({
   __GRID_ITEM__: true,
   name: 'GridItem',
@@ -55,7 +44,7 @@ export default defineComponent({
   props: gridItemProps,
   setup () {
     const {
-      isSSR,
+      isSsrRef,
       xGapRef,
       itemStyleRef,
       overflowRef
@@ -66,7 +55,7 @@ export default defineComponent({
       overflow: overflowRef,
       itemStyle: itemStyleRef,
       deriveStyle: () => {
-        track(isSSR)
+        void isSsrRef.value
         // Here is quite a hack, I hope there is a better way to solve it
         const {
           privateSpan = defaultSpan,