umi-server v1.2.3

umi-server

🚀 A runtime render tool for Umijs Server-Side Rendering.

Quick Start

(config + ctx) => htmlString

npm install umi-server -S

const server = require('umi-server');
const http = require('http');
const { createReadStream } = require('fs');
const { join, extname } = require('path');

const root = join(__dirname, 'dist');
const render = server({
  root,
})
const headerMap = {
  '.js': 'text/javascript',
  '.css': 'text/css',
  '.jpg': 'image/jpeg',
  '.png': 'image/jpeg',
}

http.createServer(async (req, res) => {
  const ext = extname(req.url);
  const header = {
    'Content-Type': headerMap[ext] || 'text/html'
  }
  res.writeHead(200, header);

  if (!ext) {
    // url render
    const ctx = {
      req,
      res,
    }
    const { ssrHtml } = await render(ctx);
    res.write(ssrHtml);
    res.end()
  } else {
    // static file url
    const path = join(root, req.url);
    const stream = createReadStream(path);
    stream.on('error', (error) => {
      res.writeHead(404, 'Not Found');
      res.end();
    });
    stream.pipe(res);
  }

}).listen(3000)

console.log('http://localhost:3000');

Visit http://localhost:3000.

Usage

First, you need require/import umi-server.

const server = require('umi-server');
// ES6 / TypeScript
import server from 'umi-server';

Enable SSR config

set ssr: true in Umi's configuration file.

// .umirc.js
export default {
+  ssr: true
}

then run umi build to generate the files by default:

.
├── dist
│   ├── index.html
│   ├── ssr-client-mainifest.json
│   ├── umi.js
│   └── umi.server.js
└── pages
    └── index.js

Initialize render

You need to configure the resources needed for SSR.

server(options)

const server = require('umi-server');
const render = server({
  // you should make sure that `umi.server.js` and `ssr-client-mainifest.json` in the same location.
  root: join(__dirname, 'dist'),
});

Client utils

umi-server provide the following utils like isBrowser:

import React from 'react';
import { isBrowser } from 'umi-server';

export default () => {
  const env = isBrowser() ? 'client' : 'server';
  return (
    <p>current env {env}</p>
  )
}

options

render Component/Page

server-side render using current req.url to match the current page or component.

Result = render(ctx, renderOpts)

(req, res) => {
  const ctx = {
    req: {
      url: req.url,
    },
    res,
  }
  const { ssrHtml } = await render(ctx);
  res.write(ssrHtml);
}

Custom Render

umi-server supports custom render function by user. see ssr-customRender/index.test.ts.

ctx

the request and reponse render context, req and res will pass down into getInitialProps.

renderOpts

the render runtime opts like default polyfill for different pages.

more example usages in test cases.

TODO

• Serverless
• Support stream render
• Support react-helmet and react-document-title handler
• Better performance