我正在处理Notion的API来获取地点及其相关城市的列表，然后通过一些组件渲染这些数据。我对JS世界（2023版）相当陌生，所以我在弄清楚什么是最好的组织方式方面遇到了一些麻烦。
这就是我在想的

• /lib/api.js在这里我通过SDK从Notion的API获取数据;由于返回的数据是相当自定义的格式，我Map了我感兴趣的每个属性并返回一个非常简化的对象。这里也会获取嵌套数据（每个地方的城市）。总之，这个文件中的函数应该返回如果它提供GraphQL API的话会返回的数据;
• /pages/[placeId].js，我在getStaticProps中调用上面文件中的相关函数，并从页面本身调用相关组件;
• /components/text.js在这里我以一种更可组合的方式操作数据并呈现它

这一切都是有意义的，直到我发现一些概念响应包括渲染信息：

{
  "type": "text",
  "text": {
    "content": "This is an ",
    "link": null
  },
  "annotations": {
    "bold": false,
    "italic": false,
    "strikethrough": false,
    "underline": false,
    "code": false,
    "color": "default"
  },
  "plain_text": "This is an ",
  "href": null
}

字符串
在这种情况下，解析它并在**/lib/api.js中生成相应的HTML**会很奇怪。另一方面，如果我只是在/lib/api.js中返回Notion的响应，我将不得不解析属性并从组件中请求嵌套的信息，这看起来也不太好。
如何用一种干净的、值得JS使用的方式来解决这个问题？如果有帮助的话，我可以提供更多的细节，我试着尽可能简短。