# mini-next

> mini-next是一个近乎零成本升级react服务端渲染的框架,支持静态导出,cdn部署,前后端同构,自定义路由前缀,自定义webpack,服务端渲染缓存

Latest version **3.0.1** (published 2021-05-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install mini-next
pnpm add mini-next
yarn add mini-next
bun add mini-next
```

Provides the commands `miniNext`, `mini-next`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2021-05-06 |
| First published | 2020-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 39 |
| Unpacked size | 115.3 KB |
| Known vulnerabilities | 0 (+7 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18 |
| Author | zhangjiajia |
| Maintainers | dazjean, longdan |
| Keywords | ssr, react, next, mini-next |

## Links

- npm: https://www.npmjs.com/package/mini-next
- Repository: https://github.com/dazjean/mini-next
- Homepage: https://github.com/dazjean/mini-next#readme
- Issues: https://github.com/dazjean/mini-next/issues
- npm.io page: https://npm.io/package/mini-next

## Dependencies (39)

- [less](https://npm.io/package/less.md) ^2.7.2
- [cssnano](https://npm.io/package/cssnano.md) ^4.1.10
- [webpack](https://npm.io/package/webpack.md) ^4.35.0
- [chokidar](https://npm.io/package/chokidar.md) ^3.4.0
- [koa-send](https://npm.io/package/koa-send.md) ^5.0.0
- [commander](https://npm.io/package/commander.md) ^2.19.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.10.0
- [watchpack](https://npm.io/package/watchpack.md) ^1.6.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.7.7
- [css-loader](https://npm.io/package/css-loader.md) ^5.0.0
- [get-stream](https://npm.io/package/get-stream.md) ^4.1.0
- [jsx-loader](https://npm.io/package/jsx-loader.md) ^0.13.2
- [url-loader](https://npm.io/package/url-loader.md) ^0.5.6
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.7.7
- [file-loader](https://npm.io/package/file-loader.md) ^2.0.0
- [less-loader](https://npm.io/package/less-loader.md) ^4.0.5
- [sass-loader](https://npm.io/package/sass-loader.md) ^7.2.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.7.3
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6
- [style-loader](https://npm.io/package/style-loader.md) ^0.12.4
- [@umajs/logger](https://npm.io/package/@umajs/logger.md) ^0.1.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.7.7
- [css-hot-loader](https://npm.io/package/css-hot-loader.md) ^1.4.4
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^4.0.4
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.7.0
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.12.20
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.7.4
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.7.2
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.7.4
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.2.0
- [autodll-webpack-plugin](https://npm.io/package/autodll-webpack-plugin.md) ^0.4.2
- [koa-webpack-middleware](https://npm.io/package/koa-webpack-middleware.md) ^1.0.7
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.25.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.9.0
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.12.1
- [hard-source-webpack-plugin](https://npm.io/package/hard-source-webpack-plugin.md) ^0.13.1
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.7.6
- [@babel/plugin-transform-modules-commonjs](https://npm.io/package/@babel/plugin-transform-modules-commonjs.md) ^7.7.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2021-05-06
- 3.0.0 — 2021-05-06
- 3.0.0-beta11 — 2021-04-30
- 3.0.0-beta10 — 2021-04-30
- 3.0.0-beta9 — 2021-04-30
- 3.0.0-beta8 — 2021-04-30
- 3.0.0-beta7 — 2021-04-30
- 3.0.0-beta6 — 2021-04-29
- 3.0.0-beta5 — 2021-04-28
- 3.0.0-beta4 — 2021-04-28
- 3.0.0-beta3 — 2021-04-27
- 3.0.0-beta2 — 2021-04-27
- 3.0.0-beta1 — 2021-04-06
- 2.2.11-beta1 — 2020-12-15
- 2.2.10 — 2020-12-01
- … 49 more at https://npm.io/package/mini-next/versions

## README

mini-next是一个基于react v16.0+,react-router-dom v4.0+,koa2.0搭建的一个服务端渲染框架。可近乎零成本使历史项目工程具备服务端渲染能力，并支持导出静态资源功能。

# 初衷
- 统一团队React工程配置，无需单独额外配置，开箱即用
- 统一管理React,webpack,babel版本
- 更好的用户体验，SEO支持
- 相比业内实现，快速支持已有项目进行服务端渲染

# 使用
##  脚手架安装
框架提供mini-next-cli脚手架快速初始化模板工程
```
 npm  install mini-next-cli -g
```
初始化新项目
```
mini-next-cli init name
```

## 安装
```
yarn add mini-next 
or
npm install -S mini-next
```

## app.js
```
const Koa = require('koa');
const miniNext = require('mini-next');
const app = new Koa();
new miniNext(app); // mini-next服务端渲染基于koa封装，开启ssr时需传入koa实例对象
app.listen(8001);

```

## package.json
```
"scripts": {
    "start":"node app.js", // 启动
    "build":"npx mini-next build" // 生产环境部署前预编译构建
    "output":"npx mini-next output" // 导出静态资源
  },

```

## 工程目录
框架默认配置属性`rootDir`默认为根目录下`src`，pages目录下必须为项目文件夹，项目名不能命名为`index`
```
└── src
    └── pages
        └── demo
            ├── index.js 
            └── demo.scss
```

## 开发预览
mini-next采用多入口配置，src/pages下按照文件夹项目进行项目代码隔离，无论客户端还是服务端渲染均使用项目文件夹名称进行路由匹配。`eg:localhost:8001/index` 访问项目`index`. 


# 服务端渲染预取数据
> 服务端渲染预初始化数据，通过静态方法**getInitialProps**函数调用接口返回。
```js
APP.getInitialProps = async (ctx,query,pathname) => {
        //...
        return { count: 1 }
    }
```

客户端通过组件的props获取服务端数据,**getInitialProps**return返回的属性会挂载到组件的props上

```js
let APP = props => {
    const [count, setCount] = useState(props.count);
    return (
        <div>
            <span>Coweunt: {count}</span>
        </div>
    );
};
```
props除了挂载我们getInitialProps的返回值外，还会挂载url中的的pathname和query，可通过全局对象`window.__SSR_DATA__`访问服务端预渲染返回的初始化数据。


# 高级配置

## `ssr.config.js`
可在config/ssr.config.js下对我们的项目进行相关配置。
```
module.exports = {
    ssr: true, // 全局开启服务端渲染
    cache: true, // 全局使用服务端渲染缓存 第一次ssr,再次采用缓存，适用与存静态资源或者所有人访问的页面都是一样的工程
    staticPages: [], // 纯静态页面 执行一次服务端渲染，之后采用缓存html
    rootDir:'src', // 配置客户端根目录
    prefixCDN:'/', // 构建后静态资源CDN地址前缀
    prefixRouter: '', // 页面路由前缀
    ssrIngore: null or new RegExp() // 指定某一个或者多个page项目不采用服务端渲染
}
```

# 更多
- [入口文件和路由](./doc/page-router.md)
- [自定义页面模板](./doc/htmlTemplate.md)
- [自定义webpack](./doc/webpackconfig.md)
- [typescript](./doc/typescript.md)
- [SEO自定义TDK](./doc/seo.md)

---
_Source: https://npm.io/package/mini-next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._