Webick

介绍

一个使用React具有服务端渲染、约定式路由等功能的前端框架

快速开始

该框架并非纯前端框架，需要搭配 Node.js 使用

你可以使用create-rubick-app来快速获取一个使用 webick 与 snest 搭建的项目来学习如何使用webick

$ npm init rubick-app yourprojectname

目录结构

.
├── dist # 构建产物
│   ├── client # 存放前端静态资源文件
│   ├── server # 存放 external 后的服务端 bundle
│   ├── create-context.ts # 全局context生成文件
│   └── feRoutes.js # 读取pages路径生成的路由文件
├── src # 存放服务端 Node.js 相关代码
│   ├── client # 存放前端相关代码
│   │   ├── components # 存放公共组件
│   │   ├── pages
│   │   │   ├── index # index文件夹映射为根路由 /index => /
│   │   │   │   ├── render.tsx # 页面渲染逻辑
│   │   │   │   └── fetch.ts # 获取数据
│   │   │   └── list$id # 映射路由为 /list/:id
│   │   │       ├── render.tsx
│   │   │       ├── fetch.ts
│   │   │       └── detail # 映射路由为 /list/:id/detail
│   │   │           ├── render.tsx
│   │   │           └── fetch.ts
│   │   └── layout.tsx # 页面html布局
│   └── server # 存放服务端 Node.js 相关代码
├── package.json
└── tsconfig.json

前端约定式路由

通过约定式的文件夹结构来自动生成前端路由的配置

根据 /src/client/pages 文件夹来解析前端路由结构，pages 文件夹下的每个文件夹都被视为一个页面，约定规则可以参考上一节目录结构里 pages 下的目录结构

而在服务端，你只需要在需要渲染页面的路由下调用 render 方法，将请求上下午 ctx 做为参数传入，之后将会返回经过服务端渲染好的html 结构

import { Controller, Get, Context } from 'snest';
import { render } from 'webick';

@Controller()
class Home {
  constructor() {}

  @Get()
  async index(ctx: Context) {
    ctx.body = await render(ctx);
  }
}

数据获取

每个页面文件夹下的 fetch.ts 文件会做为该页面组件数据获取的入口，返回的数据会做为 props 传给页面组件

调用时机

在服务端渲染执行的时候，将会调用 fetch，并将数据注入到 window 中，在客户端渲染的时候会复用数据。然后在客户端进行前端路由跳转的时候会调用对应页面的 fetch

方法入参

interface RouterParams {
  path: string;
  search: string;
  params: any;
}

interface FetchParams<T> {
  routerParams: RouterParams;
  ctx?: MContext<T>;
  _isClient: boolean;
}

type FetchFunc<T = {}> = (params: FetchParams<T>) => Promise<any>;