[Feature]: 支持nuxt3.0 ssr模式

[iforgetyounow]

背景&目的

项目使用的是nuxt3.0 开启的是ssr=true模式。希望logicflow能够支持这种模式。

[boyongjiong]

因为 LogicFLow 渲染是需要 DOM 元素的，所以建议是 LogicFLow 容器组件设置为 'use client'，或者尝试看用下面方法解决一下

next.js 项目中，使用页面路由时，会触发 window is not defined 的报错；使用应用路由 + 组件配置 use client 时，则没有这个问题
【學習筆記】Next.js 錯誤修復紀錄： 「Window is not defined」&「use client & missing generateStaticParams() error」
使用 dynamic 包一层，解决该问题

import dynamic from 'next/dynamic'
const FlowChartPage = dynamic(import('@/component/FlowChart'), { ssr: false })

[iforgetyounow]

因为 LogicFLow 渲染是需要 DOM 元素的，所以建议是 LogicFLow 容器组件设置为 'use client'，或者尝试看用下面方法解决一下

next.js 项目中，使用页面路由时，会触发 window is not defined 的报错；使用应用路由 + 组件配置 use client 时，则没有这个问题 【學習筆記】Next.js 錯誤修復紀錄： 「Window is not defined」&「use client & missing generateStaticParams() error」 使用 dynamic 包一层，解决该问题

import dynamic from 'next/dynamic'
const FlowChartPage = dynamic(import('@/component/FlowChart'), { ssr: false })

不得行，bug #1668,说要设置ssr=false才能正常使用，也就是说目前就不支持ssr=true的模式，您给的解决方案就无法实现，麻烦再内部沟通下，看看如何处理，谢谢。

[boyongjiong]

在使用前端视图库（如 Chart.js、D3.js、Three.js 等）时，通常需要一个 DOM 元素进行初始化。为了支持服务端渲染（SSR），需要确保这些库的代码只在客户端执行，因为在服务器端没有 DOM。

我们的 LogicFlow 也是类似，必须依赖 dom 元素，我们这边不需要做任何处理。只需要用户侧通过一些方式去支持服务端渲染正常工作。

参考方法：

1. 条件渲染，使用 process.client 判断

<template>
  <div>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    if (process.client) {
      // 初始化 LogicFlow 的代码
    }
  }
}
</script>

2. 使用 nuxt.js 的 no-ssr 组件
   Nuxt.js 提供了一个 no-ssr 组件，专门用于在客户端渲染特定的内容。

3. 使用 client-only 组件（Next >= 2.9.0）
   从 Nuxt 2.9.0 开始，引入了 client-only 组件，这与 no-ssr 类似，但更加清晰明确。

4. 禁用掉 ssr