该小demo直接使用了express生成脚手架,部分文件是没用的
- npm run build 正常打包
- main.js是正常页面入口,直接配置一个服务器(node,nginx)映射到dist目录访问index.html就可以了,像一般的SPA。 这里使用github服务器看看效果 https://gz-ted.github.io/myappssr/dist/index.html ,可以顺便看看页面源码。
如果不需要ssr,到这里就可以完成了
- 在客户端基础上,增加server.js,目前demo是写死打包js的路径
- npm run server 启动server.js,直出入口页面,代替了访问index.html
- 打开 http://localhost:3000/
- 查看
view-source:http://localhost:3000/
,可以看到直出的内容
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Hello HomePage</title></head><body><div id="app"><div data-reactroot=""><h3>Home Page!</h3><ul><li>点我看看</li></ul></div></div></body><script type="text/javascript" src="../dist/runtime.js"></script><script type="text/javascript" src="../dist/vendors.js"></script><script type="text/javascript" src="../dist/main.js"></script></html>
- 直出后,js代码会继续执行,完成绑定等操作
- renderToString:渲染的结果是带有data-reactid属性的,此时,在服务端的基础上,客户端的render不会重新渲染,只会执行组件componetDidmout中的业务,以及绑定事件等等。
- renderToStaticMarkup:渲染的结果是不带有data-reactid属性的,此时不管服务端有没有渲染,在客户端中都会重新渲染该组件。