我只是想知道是否有任何方法可以将此代码从客户端Rending转换为SSR

问：

'use client'
import React, { useState, useEffect } from 'react'
import DesktopProduct from './DesktopProduct'
import MobileProduct from './MobileProduct'
import { useGetProductQuery } from '@/redux/services/productsFetch'

const ProductContainer = ({ id }: { id: string }) => {
  const [mobile, setMobile] = useState(false)
  const [desktop, setDesktop] = useState(false)

  const { data } = useGetProductQuery(id)

  useEffect(() => {
    if (window.innerWidth <= 720) {
      setMobile(true)
    } else {
      setDesktop(true)
    }
    addEventListener('resize', () => {
      if (window.innerWidth <= 720) {
        setMobile(true)
        setDesktop(false)
      } else {
        setDesktop(true)
        setMobile(false)
      }
    })
  }, [])
  return (
    <div>
      {mobile && data && <MobileProduct data={data} />}
      {desktop && data && <DesktopProduct data={data} />}
    </div>
  )
}

该应用程序由两个完全不同的页面组成，适用于手机和计算机。内部组件不能处理可在客户端上处理的任何类型的数据。因此，就性能而言，使用 SSR 会更好。我尝试了不同的方法，其中一种是使用页面的CSS并且有效，但我想知道除了使用CSS之外，是否有任何方法可以修复它