umi-server
🚀 A runtime render tool for Umijs Server-Side Rendering.
Quick Start
(config + ctx) => htmlString
npm install umi-server -S
const server = ;const http = ;const createReadStream = ;const join extname = ; const root = ;const render = const headerMap = '.js': 'text/javascript' '.css': 'text/css' '.jpg': 'image/jpeg' '.png': 'image/jpeg' http console;
Visit http://localhost:3000.
Usage
First, you need require/import umi-server
.
const server = ;// ES6 / TypeScript;
Enable SSR config
set ssr: true
in Umi's configuration file.
// .umirc.jsexport 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 = ;const render = ;
Client utils
umi-server
provide the following utils like isBrowser
:
;; { const env = ? 'client' : 'server'; return <p>current env env</p> }
options
Parameter | Description | Type | Optional Value | Default |
---|---|---|---|---|
root | prefix path for filename and manifest , if both in the same directory |
string | -- | undefined |
filename | umi ssr server-side file | string | -- | ${root}/umi.server.js |
manifest | umi ssr manifest file | string | -- | ${root}/ssr-client-mainifest.json |
dev | whether in development env | boolean | -- | process.env.NODE_ENV === 'development' |
polyfill | whether use polyfill for server-render | boolean | { host: string } | -- |
staticMarkup | use renderToStaticMarkup | boolean | -- | false |
postProcessHtml | handler function for user to modify render html accounding cheerio | ($, args) => $ | Array | -- |
customRender | custom Render function | (IResult) => Promise | -- | |
stream | use renderToNodeStream, better perf | Boolean | -- | false |
render Component/Page
server-side render using current req.url
to match the current page or component.
Result = render(ctx, renderOpts)
{ const ctx = req: url: requrl res const ssrHtml = await ; res;}
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
.
Parameter | Description | Type | Optional Value | Default |
---|---|---|---|---|
req | http Request obj, must include url |
Request | -- | undefined |
res | http Reponse obj | -- |
renderOpts
the render runtime opts like default polyfill for different pages.
Parameter | Description | Type | Optional Value | Default |
---|---|---|---|---|
polyfill | same as the options#polyfill | -- | false | |
runInMockContext | runtime global object mock, for mock window.location , etc. |
-- | false |
more example usages in test cases.
TODO
- Serverless
- Support stream render
- Support
react-helmet
andreact-document-title
handler - Better performance