React Umi SSR SSG 使用TypeScript的最佳实践_xxxxxue的博客

相关文章推荐
孤独的鞭炮 · iOS 多target ...· 2 月前 ·
干练的小刀 · R语言代码 SVM-RFE的画图代码 - ...· 4 月前 ·
焦虑的灯泡 · 必读：ICLR 2020 ...· 11 月前 ·
魁梧的汤圆 · nginx 正则匹配移除路径后缀名 ...· 11 月前 ·
高大的佛珠 · 新版VSCode：叹号加回车(或Tab)无法 ...· 1 年前 ·
Umi文档对TypeScript 只字未提 (太糟糕了, 感觉像是 KPI 项目),
所以只能自己看源码和 Github 去捞TS的定义
最终封装为一个类型 IUmiPage
使用的时候只需要指定两个泛型 ( 路由参数类型与 getInitialProps 返回值 )
不指定,则默认 { } 空对象
"umi": "^3.5.21"
核心type
 
 不开启SSR SSG , IGetInitialProps会找不到, 所以加上 @ts-ignore 
//@ts-ignore
import { IGetInitialProps, IRouteComponentProps } from 'umi';
 * 将 umi 的类型,封装成一个type .
 * 泛型1 是 路由中的参数类型,
 * 泛型2 是 getInitialProps返回的类型, 最终会注入到组件的props中
type IUmiPage<TRouteProps = {}, TInitResultProps = {}> = FC<
  IRouteComponentProps<TRouteProps> & TInitResultProps
  getInitialProps?: IGetInitialProps<TInitResultProps, TRouteProps>;
[id].tsx
 
import { FC, memo, useEffect, useState } from 'react';
//@ts-ignore
import { IGetInitialProps, IRouteComponentProps } from 'umi';
 * 将 umi 的类型,封装成一个type .
 * 泛型1 是 路由中的参数类型,
 * 泛型2 是 getInitialProps返回的类型, 最终会注入到组件的props中
type IUmiPage<TRouteProps = {}, TInitResultProps = {}> = FC<
  IRouteComponentProps<TRouteProps> & TInitResultProps
  getInitialProps?: IGetInitialProps<TInitResultProps, TRouteProps>;
//----组件------
let Post: IUmiPage<{ id: string }, { myData: string }> = (props) => {
  const [date, setDate] = useState<string>('');
  useEffect(() => {
    setDate(new Date().toLocaleString());
  }, []);
  return (
      <h3>拿到 getInitialProps 返回的属性 : {props.myData}</h3>
      <h3>拿到路由中的属性 : {props.match.params.id}</h3>
      <h3>显示useEffect中的属性 : {date}</h3>
//只能先使用 memo，再添加静态属性和方法，否则 umi获取不到 静态属性和方法， 就失效了
Post = memo(Post);
Post.getInitialProps = async (props) => {
  console.log('我是 getInitialProps: ', props.match.params.id);
  return Promise.resolve({
    myData: '我是数据',
  });
// 最后不要使用memo，umi会获取不到附加的静态属性和方法, 只能提前加 ↑ .
export default Post;
.umirc.ts
 
 Umi 的配置文件 
import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  // 路由
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/post/:id', component: '@/pages/post/[id]' },
    { path: '/user', component: '@/pages/user' },
  fastRefresh: {},
  // 开启 SSR 与 SSG
  ssr:{},
  exportStatic: {
  	// 指定预渲染的路由
    extraRoutePaths: async () => {
      // const result = await request('https://your-api/news/list');
      // 此处故意不写 "/post/3"
      return Promise.resolve(['/post/1', '/post/2']);
});
index.tsx
 
extraRoutePaths 中未指定的带参数的页面,
不会生成HTML,所以无法通过手动输入地址进入(或者刷新)  
涉及到 hash 和 history 路由模式, 还有 nginx 和后端配置, 具体自己查吧.
https://github.com/umijs/umi/issues/186
import { Link } from 'umi';
export default function IndexPage() {
  return (
      <h3><Link to="/post/1">post 1</Link></h3>
      <h3><Link to="/post/2">post 2</Link></h3>
      <h3><Link to="/post/3">post 3</Link></h3>
    </div>
                                    大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。这是 2022.11.05 云谦在《渝 FE 2022》上的分享。介绍大家好，我是来自蚂蚁集团的云谦。...
                                    静态站点生成器（Static Site Generators，简称 SSG）是一种软件工具，它采用模板、组件和内容源，然后生成网站所需的 HTML、CSS 和 JavaScript 文件。静态站点生成器使网站加载速度更快，因为它会在用户请求之前预先构建网站所需的必要文件。静态站点生成器是用于构建高性能网站的一组工具。
仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
elm 概念
通过 reducers, effects 和 subscriptions 组织 model，简化 redux 和 redux-saga 引入的概念
                                    umijs基于React的封装框架，常用的插件已经全部集成到框架中，开箱即用。
umi=react+less+antd(实现按需加载)+umi-request+dva（react+redux-saga）
                                    今年7月份的时候用umi搭建了react ssr，发现了不少问题，记录一下，作为后来人选型的参考，是真正的从入门到放弃。如果下面罗列的问题你们自己有办法解决，那可以考虑使用，当然，以下仅供参考，可能官方后续会把问题解决。
                                    到页面首屏完全展示这一过程所花的时间极短，而且在页面中点击链接切换路由的操作非常顺滑，几乎页面可以达到“秒切”的效果，根本不会有卡顿等待的情况发生，这是怎么实现的呢？文档，由于代码量实在是太多，所以只保留了具有象征意义的部分代码，但不难发现，服务端渲染返回的HTML。，下面我们简单介绍一下它们各自的特点，看完之后相信你就能清晰的感受到它们的区别所在了。树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也就是平时我们所称的。在开始之前，我们先来回顾一下页面最基本的渲染流程是怎么样的？.......
                                    react 的 ssr 最低最低也要把下面几个操作完成：实现时用到的依赖：
可以直接全部装上，或者写到哪里装到哪里。既然是服务器端渲染，就要先装个好用的服务器，我用的是 express。创建以下的文件：
嗯，再来看看各个文件我都写了啥：tsconfig.json，配置下 jsx 的转化，这段代码是我从 webpack 官网嫖下来的：
其实  选项没啥用，但是不配置会报错我的 js 文件。然后是 src 内的文件：
App.tsx 很简单，就是一个完整的页面组件，不过引入了客户端代码，这个在服务器端没什么..
                                    因为项目用到的技术链是react+typescript，调研ssr服务端渲染，就在此基础上。
项目代码地址：https://github.com/chenyumiao/react-ts-ssr
执行步骤，请参考项目中的README.md文件。...
                                    背景周末在网上冲浪， 看到个消息：NextJS 9.3 将静态站点生成功能引入了Next.js平台。静态站点生成, 也就是所谓的SSG : Static Site Generation...