Koa-ReactSSR
基于Koa 2.x 的React SSR 中间件(Reat SSR middleware for koa 2.x
)
installation
npm install koa-reactssr-middleware
用法
如果你需要运行在生产环境中,你需要先在package.json
文件中配置scripts
字段,
"scripts":
然后执行 npm run build
命令生成生产代码
const koa = ;const app = ;const koaRouter = ;const ssr = ; router;router; app;app;
-
app
koa 的app 实例 -
opts
配置选项Options
title
页面默认标题,默认为空;isProd
是否为生产模式,默认为false
,如果设置为true
,你需要先生成生产代码,为false
时,该中间件会使用webpack-hot-middleware
&webpack-dev-middleware
以实现热更新功能;templatePath
默认网页模板,默认为空,即使用内置的网页模板
你需要在项目根目录下有一个 .ssrconfig
作为配置文件,以下是配置例子
.ssrconfig
template
默认网页模板,默认为空,即使用内置的网页模板entry
当你想要使用内置webpack 配置文件的时候为必要选项。 webpack的入口js,client
是客户端入口文件,server
为服务端入口文件;output
如果你想使用内置webpack 配置文件的时候,你需要声明输出目录选项,path
为输出的文件夹目录,publicPath
是生成到模板中时的资源路径, 具体可以参考 webpack output 配置webpackConfig
如果你倾向于使用你自己的webpack 配置文件,你需要配置下列选项:client
客户端配置webpack 配置server
服务端配置webpack 配置
实际使用可以参考 Demo
目录结构示例
├── src app directory
│ ├── router/ route directory
│ ├── views/ views directory
│ ├── components/ compoennts directory
│ ├── App.js js file to export an App
│ ├── entry-server.js server side entry point
│ └── entry-client.js client side entry point
├── index.js server entry point
├── .ssrconfig SSR configuration file
├── ...
App.js 例子
PureComponent { return <div>test</div> }
entry-client.js 例子
const render = { const app = <App /> } if __DEV__ modulehotaccept'./App' render if !__DEV__ && locationprotocol === 'https:' || '127.0.0.1' 'localhost' && navigatorserviceWorker navigatorserviceWorker
entry-server.js 例子
async { const app = <App /> try await const status url = context if status || url return catch e return }