typescript版的react服务端渲染

typescript-koa-ssr-react-boilerplate

项目地址：https://github.com/m-Ryan/typ...

特色

• 前后端分离
• typeScript
• 服务端渲染
• react-router按需加载
• redux
• 使用最新的react v.16.4

---

服务端渲染实现

router.tsx 路由

    ...
    function RouterConfig() {
        return (
            
                
                
                
            
        );
    }

---

ssr.tsx 匹配路径

...
export default (url: string | Object, context: any,store: any)=>{
   return  
            
                
              
          
}

---

renderFullPage.ts 渲染页面

...
const renderFullPage = (ctx : IRouterContext, newState:Object ) => {
    let context  = {}
    const myHtml = fs.readFileSync("app/web/assets/dist/templete.html", 'utf-8');
    // 得到初始 state 创建新的 Redux store 实例
    const store = createStore(reducers, newState);
    // 从 Redux store 得到初始 state,注入到window
    const finalState = store.getState()
    let initState = ``;
    //根据路由获取html并注入到
，将 initState 插到该节点后面
    const html = ReactDOMServer.renderToString(ssr(ctx.req.url, context, store));
    let renderPage = myHtml.replace(/(\)(.|\n|\r)*(\<\/div\>)/i, "$1" + html + "$3" + initState);
    ctx.type = 'html';
    ctx.body = renderPage;
}

export default renderFullPage;

index.tsx 前端的路由处理

...
const preloadedState =  window.__INITIAL_STATE__ || {} //
// 使用初始 state 创建 Redux store
const store = createStore(reducers, preloadedState)
render(
  
    
        
    
  ,
  document.getElementById('root')  as HTMLElement
)

---

1..redux方面，先创建新的 Redux store 实例，将我们需要初始的state合并到 store

2.通过 store.getState() 获取最终的finalState

3.通过 StaticRouter 可以获取路径匹配的页面组件，并通过 ReactDOMServer.renderToString 转化为HTML元素

ssr.tsx 主要做了两件事：
1.将初始的 store 注入redux
2.返回带有 store 数据的路径匹配的页面组件，也就是说这个页面已经是有初始数据了

4.将读取的html模板注入数据，在这里我们需要通过简单的正则替换一下

在

中插入我们的html元素
在

后面插入

5.将这个页面发送出去

6.js加载的时候会读取 window.__INITIAL_STATE__ 的数据，合并到 store

注意：这里 我们是用 fs模块 读取 html模板，而不是直接使用 类似以下函数

export default (html, finalState)=>(
    `
    
    
    
        
        
        
        
        
        
    

    
        
${html}
        window.__INITIAL_STATE__ = ${JSON.stringify(finalState)}
    
    

    `
)

原因主要是因为打包得到的 js、css 需要有hash值来管理版本缓存，所以是不能直接写死的

---

怎么使用

git clone [email protected]:m-Ryan/typescript-koa-ssr-react-boilerplate.git
cd typescript-koa-ssr-react-boilerplate

前端

• cd app/web 首次使用，先 npm install
• 开发环境 npm start
• 生产环境 npm run build

后台（前后端是分离的，使用前，前端要先打包）

• 首次使用，先 npm install
• 开发环境 npm start
• 生产环境 npm run build

考虑到前后端分离，这里没有使用 webpack-middleware

打算在之后的项目中使用，但目前还没开始。不确定有没有bug，仅供参考