关于react.js:助力ssr使用concent为nextjs应用加点料

开源不易，感激你的反对，❤ star concent^_^

nextjs是一个十分风行的 React 服务端渲染利用框架，它很轻量，简略易上手，社区沉闷，所以当咱们应用 react 写一个须要 ssr(server side render) 的利用的话，根本都会首选 nextjs，concent 是一个新生代的 react 状态治理计划，它内置依赖收集零碎，同时兼具备 0 入侵、可预测、渐进式、高性能的特点，并提供了 lifecyle、composition api 等灵便的 api 且写法超级简略，让你轻松驾驭超大规模的 react 利用。

这里咱们将应用 create-next-app 命令来装置一个根底的 next 示例利用

npx create-next-app hello-next

执行结束后，能够看到一个如下的目录构造

|____public
|____pages
| |____ _app.js   // next 利用默认的根组件
| |____index.js   // 默认首页
| |____api        // api 路由文件
| | |____hello.js

之后咱们在我的项目根目录执行 npm run dev 将看到一个由 next 驱动的 ssr 默认首页

这里咱们将应用 create-react-app 命令来装置一个根底的 concent 示例利用

npx create-react-app hello-concent --template concent-ts

执行结束后，能够看到一个如下的目录构造

|____index.tsx
|____App.tsx
|____types            // store 的类型定义处
|____features           // 性能组件列表
| |____counter          // counter 性能
| | |____Counter.tsx        // counter 组件
| | |____model            // counter 模型(蕴含 state,reducer,computed)
|____models            // 其它全局通用的模型定义
|____configs

进入我的项目目录执行 npm i，而后执行npm start 即可看到一个默认的计数器页面

你也能够点击这里在线理解和编辑它。

当然了在已有的我的项目里集成 concent 里也超级简略，因为它无需顶层提供Provider，只须要提前配置好模型即可。

import {run} from 'concent';

run({ // 定义一个 counter 模型
  counter: {state: { num: 1, bigNum: 10},
    reducer: {add(payload, moduleState) {return { num: moduleState + 1};
      },
      async asyncAddBig() {await new Promise(resolve => setTimeout(resolve, 1000));
        return {bigNum: moduleState + 10};
      }
    },
    computed: {doubleNum: ({ num}) => num * 2, // 仅当 num 发生变化才触发此函数
    }
  }
})

之后就能够全局即插即用啦，类组件和函数组件都能够用同样的形式去读取数据或调用办法，敲重点啦，如果 ui 处是有条件语句管制是否要生产状态或衍生数据的话，举荐提早解构的写法，这样能够让 concent 在每一轮渲染结束后收集到视图对数据的最小粒度依赖

// ###### 函数组件
function Demo(){
  // 如 state 和 moduleComputed 是按需读取的，举荐提早解构的写法
  const {state: { num, numBig}, moduleComputed: {doubleNum}, mr } = useConcent('counter'); 
  // ... ui 逻辑，绑数据、绑办法
}

// ###### 类组件
const DemoCls = register('counter')(
  class DemoCls extends React.Component{render(){const { state: { num, numBig}, moduleComputed: {doubleNum}, mr } = this.ctx; 
      // ... ui 逻辑，绑数据、绑办法
    }
  }
)

next 的根底示例目录里有个 _app.js 文件，它是 next 利用的根组件

import '../styles/globals.css'

function MyApp({Component, pageProps}) {return <Component {...pageProps} />
}

export default MyApp

因应用 concent 之前必须提前配置好模型，所以咱们只需提前创立一个 runConcent.js 文件

import {run} from 'concent'
import * as models from './models';

run(models);

而后在 _app.js 文件引入即可，这样根组件下的所有子组件都可能正确获取到 store 的数据和调动 store 的办法了。

import '../styles/globals.css'
+ import './runConcent'

function MyApp({Component, pageProps}) {return <Component {...pageProps} />
}

export default MyApp

接着咱们在 next 的 pages 目录下创立一个 counter.js 文件，代表这是一个页面组件，这样浏览器端能够用 /counter 路由来拜访到这个组件的渲染视图了。

import React from 'react'
import {useConcent} from 'concent'
import router from 'next/router'

// use next/router to do browser side router jump
function toHomePage(){router.push('/');
}

export default function Counter() {const { state, mr, moduleComputed} = useConcent('home')

  return (
    <div>
      this is counter page
      <h1>num: {state.num}</h1>
      <h1>doubleNum: {moduleComputed.doubleNum}</h1>
      <button onClick={mr.add}>add</button>
      <button onClick={toHomePage}>to home page</button>
    </div>
  );
}

功败垂成，一个接入了 concent 的next利用就这样产生了，是不是特地简略呢？^_^

getServerSideProps 也是同样相似的做法来做哦，它们只是执行机会不同，getServerSideProps 是每次申请页面都会执行，而 getStaticProps 是构建时执行。

next提供两种级别的预渲染接口，即 getServerSideProps 和getStaticProps，两种的区别是执行机会不同，getServerSideProps是每次申请页面都会执行，而 getStaticProps 是构建时执行，咱们先解决 getServerSideProps 这种状况吧，看看如何汇合 concent 做预渲染反对。

首先咱们不思考 concent 的存在，在 next 里做预渲染反对，只须要在你的页面组件里裸露一个 getServerSideProps 接口即可。

// 此函数在每次申请改页面时被调用
export async function getServerSideProps() {
  // 调用内部 API 获取博文列表
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 通过返回 {props: posts} 对象，PostPage 组件在渲染时将接管到 `posts` 参数
  return {props: { posts},
  }
}

function PostPage({posts}) { // 这里接管到了 posts 参数
  // Render posts...
}

export default PostPage

之所以 Blog 可能接到 posts，除了裸露这个getServerSideProps 这个接口之外，咱们再察看一下 _app.js 这个根组件文件内容，能够发现关键点所在！

function MyApp({Component, pageProps}) {return <Component {...pageProps} />
}
export default MyApp

参数列表里的 pageProps 即是 getServerSideProps 返回后果里 props 指向的对象，而后 next 将其透传到指标页面组件上，所以咱们才可能在 PostPage 参数列表里解构出posts。

所以咱们的切入点就能够从这里动手了，咱们把 getStaticProps 的返回后果做一下格局束缚，形如 {module:string, state: object} 这样的构造，而后在 _app.js 文件里记录到 store 即可

// 此函数在每次申请时被调用
export async function getServerSideProps() {
  // 调用内部 API 获取博文列表
  await delay();
  const posts = [{ id: 1, name: 'post1 -----'},
    {id: 2, name: 'post2 --- welcome to use concent'},
  ];
  // 这个返回对象会透传给根组件的 pageProps，在此返回状态所属的模块和状态实体对象
  // 在那里将状态记录到 store
  return {
    props: {
      module: 'test',
      state: {posts},
    }
  };
}

此时的根组件文件扭转如下

import '../styles/globals.css';
+ import './runConcent';
+ import {setState} from 'concent';

function MyApp({Component, pageProps}) {
  // 这里记录 getServerSideProps 的返回状态到 store 的对应模块
+  if (pageProps.module) {+    setState(pageProps.module, pageProps.state);
+  }
  return <Component {...pageProps} />
}
export default MyApp;

而后咱们实现的页面组件 post-page 代码如下

const PostList = React.memo(function () {const { state} = useConcent('test');
  return (
    <div>
      {state.posts.map(item => <h3 key={item.id}>{item.name}</h3>)}
    </div>
  );
});

const PostLength = React.memo(function () {const { state} = useConcent('test');
  return <h1>{state.posts.length}</h1>;
});

export default function PostPage() {
  return (
    <div>
      <h1>this is post page</h1>
      <PostList />
      <PostLength />
      <button onClick={toHomePage}>to home page</button>
    </div>
  );
}

接着咱们关上浏览器拜访 /post-page 页面吧，点击查看源码将会看到这是一个服务器端预渲染的页面

同理，咱们也可将 getServerSideProps 替换为getStaticProps，下面的整个流程将仍然失常工作，欢送各位看官 clone 示例代码来亲自体验一下。

git clone https://github.com/concentjs/ssr-demo-1

next-js doc
concent doc

欢送小哥哥们来撩 CloudBase CMS，打造一站式云端内容管理系统，它是云开发推出的，基于 Node.js 的 Headless 内容治理平台，提供了丰盛的内容治理性能，安装简单，易于二次开发，并与云开发的生态体系紧密结合，助力开发者晋升开发效率。

concent已为其治理后盾提供强力反对，新版的治理界面更加好看和体贴了。

也欢送小哥哥们来撩 FFCreator，它是一个基于 node.js 的轻量、灵便的短视频加工库。您只须要增加几张图片或视频片段再加一段背景音乐，就能够疾速生成一个很酷的视频短片。

FFCreator是一种轻量又简略的解决方案，只须要很少的依赖和较低的机器配置就能够疾速开始工作。并且它模仿实现了 animate.css90% 的动画成果，您能够轻松地把 web 页面端的动画成果转为视频，真的很给力。

关于react.js:助力ssr使用concent为nextjs应用加点料

序言

Hello next

Hello concent

在 next 里引入 concent

反对预渲染

附录

doc

CloudBase CMS

FFCreator