在前端开发中，使用同构渲染技术可以提高网页的首屏展示速度和 SEO 优化效果。其中一个常用的工具就是 iso。
安装
npm install iso --save
使用
服务端渲染
在服务端引入 iso 并调用 render() 方法：
const Iso = require('iso'); const myComponent = require('./myComponent.jsx'); let data = { foo: 'bar' }; let html = Iso.render(React.renderToString(myComponent(data)), data); // 返回 HTML console.log(html);
Iso.render() 方法根据组件生成 HTML，并在 HTML 中嵌入初始化数据（即第二个参数）。客户端在加载这个 HTML 后，可以直接从文档解析出初始数据并复用，避免了再次请求网络或重复渲染页面。
客户端渲染
在客户端引入 iso 并调用 hydrate() 方法：
const Iso = require('iso'); const myComponent = require('./myComponent.jsx'); let data = JSON.parse(document.querySelector('[data-initial-state]').innerHTML); React.render(myComponent(data), document.getElementById('app')); Iso.hydrate();
Iso.hydrate() 方法将前端组件和服务端生成的 HTML 进行对比，如果存在差异，则更新前端组件以保证和服务端一致。
实践
下面是一个简单的示例，演示如何使用 iso 进行同构渲染：
服务端代码
-- -------------------- ---- ------- ----- --- - --------------- ----- ----- - ----------------- ----- -------------- - ---------------------------- ----- ------------ - -- ---- -- -- - ---------- ------------- -- --- ---- - - ----- ------- -- --- ---- - ------------------------------------------------------ --------- ---- ------ ------------------ -- -- ----展开代码
客户端代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ ------------- ------- ------ ---- -------- ---------------------------- ---------------- ------- ------------------------- ------- -------展开代码
const Iso = require('iso'); const React = require('react'); const ReactDOM = require('react-dom'); const HelloMessage = require('./HelloMessage.jsx'); let data = JSON.parse(document.querySelector('[data-initial-state]').innerHTML); ReactDOM.render(<HelloMessage {...data} />, document.getElementById('app')); Iso.hydrate();
总结
iso 是一个非常方便的工具，可以帮助我们快速地实现同构渲染。只需要在组件中添加一些统一的标记，然后在服务端和客户端分别调用 render() 和 hydrate() 方法即可。同时，iso 也提供了丰富的 API，可以支持更高级的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56633
