NextJS中app与pages目录异步函数组件表现差异求助

问题现象 #

异步函数组件ComponentA在App目录的page.js中可正常渲染，但在Pages目录的initial.js中触发错误：

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

核心困惑 #

根据技术社区常见回答，当前page.js和ComponentA的异步组件写法本应完全不可行，但实际App目录下能正常运行，Pages目录却因渲染Promise失败。不清楚两个目录的底层差异点，现在需要复用大量同风格的组件（原项目正常运行），但当前项目在Pages目录使用时全部失效，希望找到无需重写组件的解决办法。

相关文件代码 #

project/src/pages/initial.js #

"use client"
import  { Fragment, Suspense } from 'react'
import MyContextProvider from '@/app/mycontext'
import ComponentA from "../app/componentA"
export default function Initial() {

  return (
    <Fragment>
    <MyContextProvider>
      <Suspense fallback={<span>Loading</span>}>
      <ComponentA suppressHydrationWarning={true} ></ComponentA>
      </Suspense>
    </MyContextProvider>
   </Fragment>
  )
}

project/src/app/page.js #

"use client"

import ComponentA from './componentA'
import MyContextProvider from './mycontext'
import { Fragment, Suspense } from 'react'
import Initial from '../pages/initial'
export default function Home() {
  return (
   <Fragment>
    <MyContextProvider>
      <Suspense fallback={<span>Loading</span>}>
      <ComponentA suppressHydrationWarning={true} ></ComponentA>
      </Suspense>
    </MyContextProvider>
{/*<Initial></Initial>*/}
   </Fragment>
  )
}

project/src/app/componentA.js #

"use client"
async function getNewData() {
    const data = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    return data.json()
}
import React, { Fragment, useEffect, useContext, useState } from 'react'

export default async function ComponentA(filters) {
    useEffect(()=>{
        console.log("useEffect")
    })
    let apiReturn = await getNewData()

    return(
        <Fragment>{apiReturn.title}
        <>--A</></Fragment>
    )
}

已尝试操作 #

• 在异步组件中添加useEffect验证是否因hooks导致问题，无变化；
• 为initial.js添加React Suspense标签，未解决问题，疑惑Suspense是否仅支持普通组件；
• 复制page.js的return内容到initial.js，无变化；
• 测试组件嵌套关系：
  • Layout.js > page.js > componentA.js：正常工作
  • Layout.js > initial.js > componentA.js：触发错误
  • Layout.js > page.js > componentA.js & initial.js > componentA.js：正常工作
  • Layout.js > initial.js > page.js > componentA.js：触发错误

内容的提问来源于stack exchange，提问作者soflow