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

ServerRenderer

????????????library of server side render for React

Example

https://github.com/wokeyi/music

ๅฎ‰่ฃ…

$ yarn add server-renderer react react-dom
$ yarn add typescript tslib @types/react .... -D

็”จๆณ•

็›ฎๅฝ•็ป“ๆž„

????server-renderer-example
 โ”ฃ ????src
 โ”ƒ โ”ฃ ????pages
 โ”ƒ โ”ƒ โ”ฃ ????Home
 โ”ƒ โ”ƒ โ”ƒ โ”ฃ ????Home.scss
 โ”ƒ โ”ƒ โ”ƒ โ”— ????index.tsx
 โ”ƒ โ”ƒ โ”ฃ ????Other.tsx
 โ”ƒ โ”ƒ โ”ฃ ????Notfound.tsx
 โ”ƒ โ”ƒ โ”— ????index.ts
 โ”ƒ โ”ฃ ????App.tsx
 โ”ƒ โ”ฃ ????index.html
 โ”ƒ โ”ฃ ????index.tsx
 โ”ƒ โ”— ????routes.ts
 โ”— ????package.json

src/pages/Home/index.tsx

import * as React from 'react'
import { Link, router } from 'server-renderer'
// CSS Modules
import classes from './Home.scss'

interface HomeProps {
  data: any
}

const Home: React.FunctionComponent<HomeProps> = (props) => {
  const handler = () => router.push('/others')
  return (
    <div className={classes.container}>
      <p className={classes.content}>
        <Link to='/others'>to others page</Link>
      </p>
      <p onClick={handler}>{JSON.stringify(props.data)}</p>
    </div>
  )
}

Home.getInitialProps = async () => {
  try {
    const data = await fetch('https://api.com/xxx').then(res => res.json())
    return { data }
  } catch (error) {
    return { data: JSON.stringify(error) }
  }
}

export default Home

src/routes.tsx

import * as React from 'react'
import * as pages from './pages'
import { Route } from 'server-renderer'

const routes: Route[] = [
  { 
    name: 'home',
    path: '/',
    component: pages.Home,
  },
  {
    name: 'others',
    path: '/others',
    component: pages.Other,
  },
  {
    path: '*',
    name: '404',
    component: pages.Notfound,
  },
]

export default routes

src/App.tsx

import * as React from 'react'
import { AppProps, Params } from 'server-renderer'

class App extends React.Component<AppProps<{ data: any }> {

  public static async getInitialProps({ url, Component }: Params) {
    if (Component.getInitialProps) {
      const data =  await Component.getInitialProps({ url })
      return { data }
    }
    return {
      data: {},
    }
  }

  public render() {
    const { Component, data } = this.props
    return (
      <Component 
        {...data}
      />
    )
  }

}

export default App

src/index.tsx

import { render } from 'server-renderer'
import { Error } from 'path/to/your/components'
import routes from './routes'
import App from './App'

render({
  container: '.app-container',
  App,
  Error,
  routes,
})

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="app-container"></div>
</body>
</html>

่‡ชๅฎšไน‰้…็ฝฎ

const merge = require('webpack-merge')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
  webpack(config, { isServer, isDev }) {
    if (!isDev && !isServer) {
      return merge(config, {
        plugins: [
          new BundleAnalyzerPlugin()
        ]
      })
    }
    return config
  }
}

package.json

{
  "name": "server-renderer-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "server-renderer dev",
    "build": "server-renderer build",
    "start": "server-renderer start"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "server-renderer": "^0.2.10"
  },
  "devDependencies": {
    "@types/history": "^4.7.2",
    "@types/react": "^16.8.8",
    "@types/react-dom": "^16.8.2",
    "@types/react-router-dom": "^4.3.1",
    "tslib": "^1.9.3",
    "tslint": "^5.14.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^3.6.0",
    "typescript": "^3.3.3333"
  }
}

ๅผ€ๅ‘

$ yarn dev

็”Ÿไบง็Žฏๅขƒๆž„ๅปบ

$ yarn build
$ yarn start

Dockerfile

FROM node
WORKDIR /path/to/workdir
COPY . /path/to/workdir
RUN yarn install
RUN yarn build
EXPOSE 3030
CMD yarn start

Current Tags

  • 0.3.3                                ...           latest (2 months ago)
  • 0.2.11                                ...           router (6 months ago)

29 Versions

  • 0.3.3                                ...           2 months ago
  • 0.3.1                                ...           4 months ago
  • 0.3.0                                ...           4 months ago
  • 0.2.15                                ...           4 months ago
  • 0.2.14                                ...           4 months ago
  • 0.2.13                                ...           4 months ago
  • 0.2.12                                ...           6 months ago
  • 0.2.11                                ...           6 months ago
  • 0.2.10                                ...           6 months ago
  • 0.2.9                                ...           6 months ago
  • 0.2.8                                ...           6 months ago
  • 0.2.7                                ...           6 months ago
  • 0.2.6                                ...           6 months ago
  • 0.2.5                                ...           6 months ago
  • 0.2.4                                ...           6 months ago
  • 0.2.3                                ...           6 months ago
  • 0.2.2                                ...           6 months ago
  • 0.2.1                                ...           7 months ago
  • 0.2.0                                ...           7 months ago
  • 0.1.7                                ...           7 months ago
  • 0.1.6                                ...           7 months ago
  • 0.1.5                                ...           7 months ago
  • 0.1.4                                ...           7 months ago
  • 0.1.3                                ...           7 months ago
  • 0.1.2                                ...           7 months ago
  • 0.1.1                                ...           7 months ago
  • 0.1.0                                ...           7 months ago
  • 0.0.2                                ...           7 months ago
  • 0.0.1                                ...           7 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 21
Dependencies (24)
Dev Dependencies (24)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |