server-renderer
library of server side render for React
Last updated 2 days ago by it-wokeyi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install server-renderer 
SYNC missed versions from official npm registry.

ServerRenderer@Alpha

DEMO

https://github.com/wokeyi/games-club

安装

$ yarn add react react-dom server-renderer@alpha

使用

import { render } from 'server-renderer'
import App from './App'
import routes from './routes'

render({
  // React 渲染节点
  container: '#root',
  // 可选
  App,
  // 可选,路由配置
  routes,
})
  • HTML 入口默认为 ${rootDir}/src/index.html

  • 客户端和服务端入口默认为 ${rootDir}/src/index.tsx

  • 路由配置

export interface Route {
  path: string
  component: ComponentType<any>
}

const routes: Route[] = []
  • Component.getInitialProps 获取数据
export interface GetInitialPropsParams {
  // 路由匹配到的组件
  Component: ComponentType<any> | null
  // 访问路径
  url: string
  res?: ServerResponse
  req?: IncomingMessage
}

调用 App.getInitialProps 时会默认传入 GetInitialPropsParams 结构的数据

  • 路由

路由主要依靠 history 建立

// history.push('/path')
export const history: History

// 返回当前路由对应的 Location 对象
export function useLocation(): Location<any>

// /path/:user/:id => { user: xxx, id: xxx }
export function useParams<T extends object>(): T
  • CSS

文件名以大写开头默认使用 CSS Module

{
  test: /\.s?css$/,
  oneOf: [
    {
      test: (modulePath: string) => {
        const basename = path.basename(modulePath)
        // 大写开头的就当做 css module
        return /^[A-Z]/.test(basename)
      },
      use: getStyleLoaders(isServer, true, config),
    },
    {
      use: getStyleLoaders(isServer, false, config),
    }
  ],
}
  • 自定义配置

路径:${rootDir}/ssr.config.js

可提供配置项

export interface Config {
  // 默认 process.env.NODE_ENV === 'development'
  isDev: boolean
  // 服务监听端口
  port: number
  // HTML 入口,默认 `${rootDir}/src/index.html`
  htmlTemplatePath: string
  // 打包输出目录
  distDir: string
  // 服务端入口(自定义服务端)
  serverEntry: string
  // 默认为 /public,静态文件默认加这个识别
  publicPath: string
  // 打包后输出的 HTML 文件路径
  builtHTMLPath: string
  // 重新编译是否清空控制台
  cleanConsoleOnRebuild: boolean
  // 是否对服务端直出的 HTML 做转译
  decodeEntities: boolean
  // 自定义 Webpack 配置
  configureWebpack?: webpack.Configuration 
    | ((webpackConfig: webpack.Configuration, isServer: boolean, config: Config) => webpack.Configuration)
}
  • renderToString
export function renderToString(req: IncomingMessage, res: ServerResponse, url: string, options: RenderOptions): Promise<string>

提供一个 renderToString 方法,可以更方便的自定义服务端的内容,如:

import express from 'express'
import path from 'path'
import { renderToString } from 'server-renderer'
import App from './App'

const app = express()
const router = express.Router()

router.get('*', async (req, res) => {
  const html = await renderToString(req, res, req.url, {
    container: '#root',
    App,
  })

  res.end(html)
})

app.use(router)

app.listen(3000)

Current Tags

  • 0.6.9-alpha                                ...           alpha (2 days ago)
  • 0.6.8-alpha                                ...           latest (2 days ago)
  • 0.2.11                                ...           router (a year ago)

60 Versions

  • 0.6.9-alpha                                ...           2 days ago
  • 0.6.8-alpha                                ...           2 days ago
  • 0.6.7-alpha                                ...           23 days ago
  • 0.6.6-alpha                                ...           23 days ago
  • 0.6.5-alpha                                ...           23 days ago
  • 0.6.4-alpha                                ...           23 days ago
  • 0.6.3-alpha                                ...           a month ago
  • 0.6.1-alpha                                ...           a month ago
  • 0.6.0-alpha                                ...           a month ago
  • 0.5.9-alpha                                ...           a month ago
  • 0.5.8-alpha                                ...           a month ago
  • 0.5.7-alpha                                ...           a month ago
  • 0.5.6-alpha                                ...           2 months ago
  • 0.5.3-alpha                                ...           2 months ago
  • 0.5.2-alpha                                ...           2 months ago
  • 0.5.1-alpha                                ...           2 months ago
  • 0.5.0-alpha                                ...           2 months ago
  • 0.4.14-alpha                                ...           2 months ago
  • 0.4.13-alpha                                ...           2 months ago
  • 0.4.12-alpha                                ...           2 months ago
  • 0.4.11-alpha                                ...           2 months ago
  • 0.4.10-alpha                                ...           2 months ago
  • 0.4.9-alpha                                ...           2 months ago
  • 0.4.8-alpha                                ...           2 months ago
  • 0.4.7-alpha                                ...           2 months ago
  • 0.4.6-alpha                                ...           2 months ago
  • 0.4.5-alpha                                ...           2 months ago
  • 0.4.4-alpha                                ...           2 months ago
  • 0.4.3-alpha                                ...           2 months ago
  • 0.4.1-alpha                                ...           2 months ago
  • 0.4.0-alpha                                ...           2 months ago
  • 0.3.3                                ...           7 months ago
  • 0.3.1                                ...           8 months ago
  • 0.3.0                                ...           8 months ago
  • 0.2.15                                ...           8 months ago
  • 0.2.14                                ...           8 months ago
  • 0.2.13                                ...           8 months ago
  • 0.2.12                                ...           10 months ago
  • 0.2.11                                ...           a year ago
  • 0.2.10                                ...           a year ago
  • 0.2.9                                ...           a year ago
  • 0.2.8                                ...           a year ago
  • 0.2.7                                ...           a year ago
  • 0.2.6                                ...           a year ago
  • 0.2.5                                ...           a year ago
  • 0.2.4                                ...           a year ago
  • 0.2.3                                ...           a year ago
  • 0.2.2                                ...           a year ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 57
This Month 194
Last Day 0
Last Week 0
Last Month 419
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |