助力ssr,使用concent为nextjs应用加点料

标签: react.js javascript | 发表时间:2020-12-19 19:12 | 作者:钟正楷
出处:https://segmentfault.com/blogs

开源不易,感谢你的支持, ❤ star concent^_^

序言

nextjs是一个非常流行的 React 服务端渲染应用框架,它很轻量,简单易上手,社区活跃,所以当我们使用 react写一个需要 ssr(server side render)的应用的话,基本都会首选 nextjsconcent是一个新生代的 react状态管理方案,它内置依赖收集系统,同时兼具有0入侵、可预测、渐进式、高性能的特点,并提供了 lifecylecomposition api等灵活的api且写法超级简单,让你轻松驾驭超大规模的react应用。

Hello next

这里我们将使用 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默认首页

Hello concent

这里我们将使用 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里引入concent

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>
  );
}

大功告成,一个接入了 concentnext应用就这样产生了,是不是特别简单呢?^_^

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

支持预渲染

next提供两种级别的预渲染接口,即 getServerSidePropsgetStaticProps,两种的区别是执行时机不同, 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

附录

doc

CloudBase CMS

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

concent已为其管理后台提供强力支持,新版的管理界面更加美观和体贴了。

FFCreator

也欢迎小哥哥们来撩 FFCreator,它是一个基于node.js的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐,就可以快速生成一个很酷的视频短片。

FFCreator是一种轻量又简单的解决方案,只需要很少的依赖和较低的机器配置就可以快速开始工作。并且它模拟实现了animate.css90%的动画效果,您可以轻松地把 web 页面端的动画效果转为视频,真的很给力。

相关 [ssr concent nextjs] 推荐:

助力ssr,使用concent为nextjs应用加点料

- - SegmentFault 最新的文章
开源不易,感谢你的支持, ❤ star concent^_^. 这里我们将使用 create-next-app命令来安装一个基础的next示例应用. 执行完毕后,可以看到一个如下的目录结构. |____public |____pages | |____ _app.js // next应用默认的根组件 | |____index.js // 默认首页 | |____api.

从0开始微操SSR之nextjs项目实践

- - 掘金前端
这是一个电商类的网站,对于这种电商类的网站,我们一般会想要的效果是:. 1、用户从百度或者一些搜索引擎直接搜索关键字,就能够导流到我的网站上,这就是SEO(Search Engine Optimization). SEO(Search Engine Optimization):汉译为搜索引擎优化. 是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名.

【SSR】漫谈服务端渲染

- - 掘金 前端
大家好,我是Laffery,本文同步发表在我的个人博客「 Kuqiochi | 谈谈服务端渲染「SSR」」. SSR(服务端渲染,Server Side Render),顾名思义就是在服务端渲染出页面. 与之相对应的是CSR(客户端渲染,Client Side Render),即在浏览器上渲染完整的页面.

当 SSR 遇上 Serverless,轻松实现页面瞬开

- -

带你五步学会Vue SSR - 前端学习 - SegmentFault 思否

- -
SSR大家肯定都不陌生,通过服务端渲染,可以优化SEO抓取,提升首页加载速度等,我在学习SSR的时候,看过很多文章,有些对我有很大的启发作用,有些就只是照搬官网文档. 通过几天的学习,我对SSR有了一些了解,也从头开始完整的配置出了SSR的开发环境,所以想通过这篇文章,总结一些经验,同时希望能够对学习SSR的朋友起到一点帮助.

ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering

- -
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.

React服务端渲染(ssr)之Next.js框架

- - 掘金前端
Nextjs是 React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见 Next.js入门). 本文的案例代码来自于 前端标准模板项目. 提供了便捷强大的服务端渲染功能—— getInitialProps(),通过这个方法可以简单为服务端和前端同时处理异步请求数据:.

电信 ss/ssr 速度慢 电信国际出口速度慢 被 QoS 限速

- - DiyCode - 致力于构建开发工程师高端交流分享社区社区
很多人跟我反应,同一条线路, 电信用户的国际出口速度很慢,而移动/联通用户却还不错,可能移动/联通可以流畅看1080P,而电信卡的连国外网页都打不开. 明明电信的国际出口宽带是三家中最高的,为什么只有电信的速度慢呢. 本文简单分析下电信运行商慢的原因( QoS限速),并推荐下针对电信用户优化的CN2线路来提升国际出口速度.

能让你纵享丝滑的SSR技术,转转这样实践

- - 掘金 前端
秒开率对于用户的留存率有直接的影响,数据表明, 网页加载时间过长会直接导致用户流失.转转集团作为一家电商公司, 对于H5页面的秒开率有着更加严格的需求, 在主要的卖场侧页面(手机频道页、3c频道页、活动页)等重要流量入口我们都采用了SSR(服务端渲染)技术来构建页面,今天就带大家了解一下我们摸索出来的一些最佳实践..