midway-faas icon indicating copy to clipboard operation
midway-faas copied to clipboard

ssr spec

Open i5ting opened this issue 4 years ago • 2 comments

本规范主要定义 ssr 特性,组件写法、目录结构以及 f.yml 文件扩展的编写规范。

扩展render配置

路由由f.yml的配置文件中,所以在f.yml增加render配置扩展,具体如下。

functions:
  home:
    handler: index.handler
    render:
      - component: src.home.index
      - layout: src.home.layout
      - fetch: src.home.fetch
      - mode: ssr | csr(默认ssr)
      - injectScript(自己改loyout更好)
          - runtime~Page.js
          - vendor.chunk.js
          - Page.chunk.js
      - injectCSS
          - Page.chunk.css
      - serverBundle: Page.server.js
    events:
      - http:
          path: /
          method:
            - GET
  news:
    handler: index.handler
    render:
      - component: src.news.index
      - layout: src.news.layout
      - fetch: src.news.fetch
      - mode: ssr | csr(默认ssr)
    events:
      - http:
          path: /
          method:
            - GET

多组件扩展支持

多组件支持是基于bigpipe的方式,首先写入layout布局,然后处理多个组件的组合逻辑,最终res.end即可。另外,组件上如果只有fetch方法,没有render方法也是没有问题的。写法有2种,具体如下。

component的值是数组,即串行方式

functions:
  news:
    handler: index.handler
    render:
      - component: 
        - src.news.index
        - src.news.index
        - src.news.index3
      - layout: src.news.layout
      - fetch: src.news.fetch
      - mode: ssr | csr(默认ssr)
    events:
      - http:
          path: /
          method:
            - GET

component的值是对象,即并行方式

functions:
  news:
    handler: index.handler
    render:
      - component: 
        a: src.news.index
        b: src.news.index
        c: src.news.index3
      - layout: src.news.layout
      - fetch: src.news.fetch
      - mode: ssr | csr(默认ssr)
    events:
      - http:
          path: /
          method:
            - GET

component支持无限嵌套,可以支持所有场景。

执行过程说明:

  • ssr模式时,采用bigpipe写入,最后red.end即可,前端不需要改造。
  • csr模式时,采用高阶组件封住,入口侧多个组件遍历,此处需要改造。

i5ting avatar Mar 16 '20 02:03 i5ting

刚电话沟通,2个点

1、通用render实现,即faas对web目路下的文件提供http服务 2、ssr实现和render实现如何结合

i5ting avatar Mar 16 '20 03:03 i5ting

static 作为 runtime 的扩展能力,用于将指定的目录内的文件进行 HTTP 托管。 参考serve-static、koa-static,

i5ting avatar Mar 16 '20 06:03 i5ting