A progressive React server-side rendering framework
Text
https://serlina.js.org
github.com/djyde/serlina
https://trends.ucweb.com
https://github.com/zeit/next.js/
// pages/home.js
export default () => <div>Home</div>
$ next
http://localhost:3000/home
Next.js custom server
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = new Koa()
const router = new Router()
router.get('/a', async ctx => {
await app.render(ctx.req, ctx.res, '/b', ctx.query)
ctx.respond = false
})
router.get('/b', async ctx => {
await app.render(ctx.req, ctx.res, '/a', ctx.query)
ctx.respond = false
})
router.get('*', async ctx => {
await handle(ctx.req, ctx.res)
ctx.respond = false
})
server.use(async (ctx, next) => {
ctx.res.statusCode = 200
await next()
})
server.use(router.routes())
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`)
})
})
https://github.com/eggjs/egg/issues/328
next.js/core?
await app.prepare()
const rendered = await app.render('home')
rendered.body // => <!DOCTYPE html>...
const { Serlina } = require('serlina')
const path = require('path')
const http = require('http')
const serlina = new Serlina({
baseDir: path.resolve(__dirname, './')
})
serlina.prepare()
.then(() => {
http.createServer(async (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' })
if (req.url === '/page1') {
const rendered = await serlina.render('page1')
res.write(rendered.body)
} else {
res.write('works!')
}
res.end()
}).listen(8090)
})
.catch(console.error)
egg-serlina
https://github.com/serlina-community/egg-serlina
$ npm i egg-serlina
// config.js
exports.serlina = {
enable: true,
package: 'egg-serlina'
}
app.router('/home', async ctx => {
// render pages/home.js
const rendered = await ctx.app.serlina.render('home')
ctx.body = rendered.body
})
Hot Reload
// serlina.config.js
module.exports = {
webpack(webpack, options) {
return {
module: {
rules: [{
// ...
}]
}
}
}
}
Custom Webpack config
serlina.config.js
Plugin
Reusable config
https://github.com/serlina-community/serlina-plugins
// serlina.config.js
module.exports = {
webpack() {
return {
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.less$/,
use: [miniCSSLoader, {
loader: 'css-loader'
}, {
loader: "less-loader",
options: {
javascriptEnabled: true,
...options
}
}]
},
{
test: /\.tsx?$/,
exclude: /(node_modules)/,
use: [
isClient && { loader: SerlinaHotLoader, options: {
baseDir
} }
].filter(Boolean).concat([
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: !isClient,
useBabel: true,
useCache: true,
module: isClient ? 'commonjs' : 'esnext',
configFileName: path.resolve(baseDir, './tsconfig.json'),
babelOptions: {
ignore: /node_modules/,
presets: [require.resolve('babel-preset-es2015'), require.resolve('babel-preset-stage-2')],
plugins: [
ReactHotLoader
]
}
}
}, {
loader: 'ui-component-loader',
options: {
lib: 'antd',
libDir: isClient ? 'es' : 'lib',
camel2: '-',
style: 'style'
}
}])
}
]
},
plugins: [
new CheckerPlugin()
]
}
}
// serlina.config.js
const { withAntd } = require('serlina-plugin-antd')
module.exports = withAntd()
"Progressive"
await serlina.prepare()
const rendered = await serlina.render('home')
// output `rendered.body`
Use it, now!
Thanks!
https://serlina.js.org
github.com/djyde/serlina
Serlina - A progressive React server-side rendering framework
By Randy Lu
Serlina - A progressive React server-side rendering framework
- 951