Coder Social home page Coder Social logo

react-ssr-demo's Introduction

同构

基于同构,浏览器和服务端可以运行同一份代码,服务端直出组件后,浏览器接管页面,然后剩下的工作由浏览器来完成。
服务端渲染完成页面结构,客户端绑定事件。
spa基础上利用服务端直出首屏,解决了单页面应用首屏渲染慢的问题

!!!服务端与浏览器端都要运行React

├── src
│   ├── client
│   │   ├── index.js // 客户端业务入口文件
│   ├── server
│   │   └── index.js // 服务端业务入口文件
│   ├── container    // React 组件
│   │   └── Home
│   │       └── Home.js
│   │
├── config // 配置文件夹
│   ├── webpack.client.js // 客户端配置文件
│   ├── webpack.server.js // 服务端配置文件
│   ├── webpack.common.js // 共有配置文件
├── .babelrc // babel 配置文件
├── package.json
 

概览

浏览器请求 --> 服务端运行react,返回html --> 显示网页内容 --> 浏览器加载js文件 --> 绑定DOM事件,客户端接管界面 --> 客户端路由跳转,无需请求后台

isomorphic-style-loader vs style-loader

style-loader把生成的css动态插入到html,服务端渲染没办法操作dom

react-ssr-demo's People

Contributors

yibs2016 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.