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

  • 285
Loading comments...

More from Randy Lu