rankangkang/no-ssr

no-ssr

no-ssr 是一个基于react的服务端渲染组件，可将其包裹的组件延迟至客户端加载，避免因服务端与客户端渲染结果不一致引发的问题。

no-ssr 提供 react hooks 与 react class 两种类型的组件，以适应各种项目需求。

使用

import { ClassNoSSR, HooksNoSSR } from "no-ssr"

// with hooks
<HooksNoSSR>
  <Comp /> // 需要延迟到客户端渲染的组件
</HooksNoSSR>

// with class component
<ClassNoSSR onSSR={<Loading />}>
  <Comp />	// 需要延迟到客户端渲染的组件
</ClassNoSSR>

示例

import { ClassNoSSR, HooksNoSSR } from "no-ssr"

const Loading = () => <div>loading</div>

const Demo: NextPage = () => {
  return (
    <div className={styles.container}>
        <HooksNoSSR>
          <Comp />
        </HooksNoSSR>
        <ClassNoSSR onSSR={<Loading />}>
          <Comp />
        </ClassNoSSR>
     </div>
  );
}

组件

组件	说明
HooksNoSSR	react hooks 组件
ClassNoSSR	react class 组件

api

属性	说明	类型	默认值
children	需要延迟到客户端渲染的组件或元素	ReactNode | undefined	-
onSRR	服务端渲染骨架	ReactNode | undefiend	-