)
}
export default Search
```
`注: 我们只推荐在跨组件通信时使用 dispatch，局部状态不推荐使用，会导致函数内部状态过于复杂，难以阅读。`
关于更多 hooks 使用的最佳实践可以参考该[文章](https://zhuanlan.zhihu.com/p/81752821)
#### 使用声明式路由
我们默认使用约定式路由通过文件夹结构自动生成路由表，如果无法满足应用需求也可以手动创建路由文件。手动编写路由文件有些复杂，所以我们建议使用默认的约定式路由规则。
```bash
$ touch web/route.js # 检测到该文件存在则使用声明式路由
```
并需要严格按照如下格式规范写入内容, 否则应用可能会执行出错, `__isBrowser__` 会在应用的执行过程当中根据环境自动注入。
`@` 通过 alias 指定为 web 文件夹，可直接使用该符号
```js
// React 使用如下规范
module.exports = [{
layout: require('@/components/layout/index.tsx').default,
fetch: require('@/pages/detail/fetch.ts').default,
path: '/detail/:id',
// component 使用这种规范来实现按需加载功能
component: __isBrowser__ ? require('react-loadable')({ // __isBrowser__ 为 webpack 自动注入的变量，按照规范编写即可
loader: async () => await import(/* webpackChunkName: "detail" */ '@/pages/detail/render$id.tsx'),
loading: function Loading () {
return require('react').createElement('div')
}
}) : require('@/pages/detail/render$id.tsx').default,
webpackChunkName: 'detail'
},
{
layout: require('@/components/layout/index.tsx').default,
fetch: require('@/pages/index/fetch.ts').default,
path: '/',
component: __isBrowser__ ? require('react-loadable')({
loader: async () => await import(/* webpackChunkName: "index" */ '@/pages/index/render.tsx'),
loading: function Loading () {
return require('react').createElement('div')
}
}) : require('@/pages/index/render.tsx').default,
webpackChunkName: 'index'
}]
// Vue 使用如下规范
module.exports = [{
layout: require('@/components/layout/index.vue').default,
App: require('@/components/layout/App.vue').default,
fetch: require('@/pages/detail/fetch.ts').default,
path: '/detail/:id',
// component 使用这种规范来实现按需加载功能
component: __isBrowser__ ? async () => await import(/* webpackChunkName: "detail" */ '@/pages/detail/render$id.vue') : require('@/pages/detail/render$id.vue').default,
webpackChunkName: 'detail'
},
{
layout: require('@/components/layout/index.vue').default,
fetch: require('@/pages/index/fetch.ts').default,
path: '/',
component: __isBrowser__ ? async () => await import(/* webpackChunkName: "index" */ '@/pages/index/render.vue') : require('@/pages/index/render.vue').default,
webpackChunkName: 'index'
}]
```
#### 配置文件
config.js 支持以下配置, 默认配置已适用于绝大部分应用, 无特殊需求不要修改
```js
{
mode: string; // 渲染模式，默认为 ssr
stream: boolean; // 是否将组件编译成 Node.js.Stream 默认为 false 则编译为字符串
cwd: string; // 设置命令执行的 cwd，默认为 process.cwd()，无特殊需求不需修改
isDev: boolean; // 当前运行环境，默认为 process.env.NODE_ENV
publicPath: string; // webpack-dev-server 的publishPath，默认为 /
useHash: boolean; // 生成文件是否带有 hash，默认本地运行关闭，生产环境构建时开启
serverPort: number; // 本地开发启动的 FaaS 服务的端口，默认为3000
fePort: number; // 前端静态资源本地开发时的监听端口，默认为 8000, FaaS Server 会自动 proxy,无特殊需求不需要修改
chunkName: string; // 生成的 bundle 的 chunkName，默认为Page,无特殊需求不要修改
webpackDevServerConfig: webpackDevServer.Configuration; // webpack-dev-server 启动配置
staticPrefix: string; // 加载的静态资源前缀，需要发布到单独的cdn服务时可以使用该配置设置为cdn服务的地址
chainBaseConfig: (config: Config) => Configuration // 使用 webpack-chain 来修改服务端/客户端公共的 wbepack 构建配置
chainServerConfig: (config: Config) => Configuration; // 使用 webpack-chain 来修改服务端 wbepack 构建配置
chainClientConfig: (config: Config) => Configuration; // 使用 webpack-chain 来修改客户端 wbepack 构建配置
whiteList: RegExp[]; // 设置服务端构建配置 externals 的白名单，即需要让 webpack 来处理的模块
cssModulesWhiteList: RegExp[]; // 设置该选项指定样式文件不用 css-modules 处理，防止样式和 className 不匹配
prefix: string; // 为前端路由添加统一的prefix, 如 /${prefix}/, /${prefix}/detail/:id
proxy: {
// 底层使用 http-proxy-middleware 来进行代理, 具体配置查看 http-proxy-middleware 文档即可
'/api': {
target: 'xxx'
}
},
dynamic?: boolean // 是否启用代码分割优化代码，默认为 true
customeHeadScript?: Array<{ // 用于通过配置插入自定义的 script 为了避免影响期望功能这块内容不做 escape，为了避免 xss 需要保证插入脚本代码的安全性
describe: object // 参考 vue createElement https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
content: string // 需要插入的 script 脚本内容
}>
}
```
#### 如何解决服务端访问不可访问的对象的问题
SSR是近几年才火热的话题，如果是新的项目且开发人员对SSR有较深的认知，那么在设计应用的过程中就会有意识的去避免在服务端访问客户端对象的情况。但在老项目或者老的第三方库/框架，或者是开发人员对SSR理解不深刻的情况下，会出现很多类似 `window is not defined` 的错误。
先说前言，个人是不推荐用 `jsdom` 来在服务端模拟客户端环境，这样最多只能模拟最外层的对象例如 `window document` 但如果要访问更深层次的对象例如 `document.getElementById` 则还是会报错。且这种方式新增了一堆很dirty的代码且不利于debug容易造成未知的问题。
自己的代码我们可以控制，那么如果有第三方模块犯了这种问题应该如何解决呢。在有能力给第三方模块提PR的时候还是建议以PR的形式进行修复。
例如 `axios` 就会根据你当前的环境来决定到底是用xhr对象还是用http模块来发起请求。如果没办法改动第三方模块，我们可以在代码中延迟加载这些模块，让它在客户端执行的时候被调用。
1. 使用本应用提供的 `__isBrowser__` 常量来判断，例如引入jquery可以使用以下引入方式
```js
import $ from 'jquery' // error
const $ = __isBrowser__ ? require('jquery') : {} // true
```
2. 在 `didMount` 生命周期加载模块
```js
class Page {
this.state = {
$: {}
}
componentDidMount () {
this.setState({
$: require('jquery')
})
}
}
```
3. 如果某个组件调用的库一定要使用浏览器对象才能得到结果，那么只能将该组件放到客户端进行render了，参考[onlyCsr](#如何让某个组件只在客户端渲染)
`注: 不要想着在服务端去访问客户端对象，这意味着你 or 开发第三方模块的人对React SSR的理解不够, 虽然这一开始会导致一定的错误，但对于你去理解SSR的执行机制以及分清楚Server/Client两端的区别帮助很大`
#### 如何让某个组件只在客户端渲染
我们有时候会遇到某个组件强依赖了浏览器元素导致无法在服务端渲染，这时候需要针对该组件让其只在客户端进行渲染。
React 场景下只需要用 onlyCsr 高阶组件包裹一下即可
```bash
$ yarn add ssr-hoc-react
```
```js
import { onlyCsr } from 'ssr-hoc-react'
export onlyCsr(Component)
```
由于 Vue 对 HOC 的支持不友好，这里需要用户手动来实现该功能
1、组件新增 data 选项 isClient
2、在 mounted 生命周期设置 isClient 为 true
3、当 isClient 为 true 时，渲染真正的组件内容，否则只需要渲染一个空的 div
```js
