仍是SPA
需要用到 react-router-config 这个库，它可以根据 route 匹配到对应的组件，拿到当前route对应的组件是实现路由同步的关键，再通过组件的静态API方法获取接口数据
主要是在服务端通过组件的静态API方法获取接口数据后创建store，再通过 window. store = store 传递给前端
主要是要将前端的 js 文件附加在服务端渲染的模板 html 文件中
服务端渲染的应用场景：一般只是对重要的页面，如首页才会做，可以提高首屏加载速度，利于SEO。其他页面实际上仍是CSR
预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。
1、SPA变为MPA
2、必须使用 History 路由，而不能使用 Hash 路由，所以对于没有做预渲染的页面往往需要服务器配置路由，如nginx 配置如下：
3、对于动态路由，如 /detail/:id ，是不支持的，不过可以换成 query 路由，如 /detail?id=
4、应用场景比较有限，能想到的就是骨架屏应用，比如首页，为了速度，我们会用一些骨架屏组件，如果不做预渲染，则骨架屏组件会等整个js文件加载完毕才开始渲染，体验不好。如果做了预渲染，则当html文件加载完毕时就会开始渲染了
服务端渲染与react没有直接关系,你可以理解为服务端渲染时一段js，引入到react或者vue里面都能使用，不引入也没关系。使用服务端渲染的场景是当我们要求渲染时间尽量快、页面响应速度快时（优点），才会采用服务器渲染，并且应该“按需”对页面进行渲染 ——“首次加载/首屏”。即服务端渲染的优势在于：由中间层( node端 )为客户端请求初始数据、并由node渲染页面。react 服务端渲染流程服务端渲染路线：2. 请求一个html ->2. 服务端请求数据( 内网请求快 ) ->3. 服务器初始渲染（服务端性能好，较快） ->4. 服务端返回已经有正确内容的页面 ->5. 客户端请求js/css文件 ->6. 等待js文件下载完成 ->7. 等待js加载并初始化完成 ->8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )react.js在服务器端渲染有什么好处？渲染是怎么个流程(1) web端 请求接口：[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<script type="text/jsx">
var TestRequest = React.createClass({
getInitialState: function() {
return {
}
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'text',
success: function(data) {
alert('aa' + data)
}.bind(this),
error: function(xhr, status, err) {
alert('err==='+err+"---status===="+status+"---")
}.bind(this)
})
},
render: function() {
return (
<div>
{this.state.response}
</div>
)
}
})
//https://api.github.com/users/octocat/gistshttp://localhost:8080/emalldemo/ProductsServlet?action=productlist
React.render(
<TestRequest url="http://localhost:8080/emalldemo/ProductsServlet" />,
document.body
)
</script>
</body>
</html>
(2) React Native 请求接口:
[html] view plain copy
var Follow = React.createClass({
//构造数据源
getInitialState: function() {
return {
}
},
componentDidMount:function(){
this.fetchData()
},
fetchData: function() {
fetch("http://localhost:8080/emalldemo/ProductsServlet?action=productlist")
.then(response =>response.text())
.then(responseText =>{
alert(responseText)
})
.catch((error) =>{
alert("error")
})
},
render: function() {
var HouseCell = require('./HouseCell')
var nav = this.props.navigator
return (
<ScrollView style = {styles.container}>
<HouseCell nav={nav} message= {datasource[0]}/>
</ScrollView>
)
}
})
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）