我想在服务器端为我的React应用程序进行初始渲染,但是在导入和使用React组件时却没有使用babel/register
(not suitable for production)之类的东西。
我宁愿不必编译我的服务器端代码进行生产,但 喜欢加载一个适合节点的React组件,通过res.send(React.createElement(Html))
发送给客户端。
当我跑步时,我得到......
意外的令牌<
我认为这是因为我的组件render方法返回<!doctype html>...</html
。
有没有办法让Node渲染一个React组件而不必在部署之前使用babel / compiling代码?
答案 0 :(得分:0)
我有没有办法让Node渲染一个没有的React组件 在部署之前使用babel /编译代码?
没有。由于JSX不是真正的JavaScript,因此您需要在某个时刻(在构建脚本中)或在运行时(使用babel-register
)进行转换。
我个人忽略了babel的建议,即不在生产中使用babel-register。它工作正常,我总是缓存+素数响应,因此性能不相关。我很乐意听到为什么与babel-register进行转换很糟糕。
答案 1 :(得分:0)
简短的回答,是的。
这是来自官方文档:
ReactDOMServer
react-dom / server包允许你渲染你的 服务器上的组件。
ReactDOMServer.renderToString
string renderToString(ReactElement element)
将ReactElement渲染为其初始HTML。这应该只 在服务器上使用。 React将返回一个HTML字符串。您可以使用 此方法在服务器上生成HTML并向下发送标记 加快页面加载和允许搜索引擎的初始请求 为搜索引擎优化目的抓取您的网页。
如果在已有此节点的节点上调用ReactDOM.render() 服务器呈现的标记,React将保留它并仅附加事件 处理程序,允许您具有非常高性能的首次加载 经验。
ReactDOMServer.renderToStaticMarkup
string renderToStaticMarkup(ReactElement element)
与renderToString类似, 除了这不会创建额外的DOM属性,如data-react-id, React在内部使用。如果要将React用作,则此选项非常有用 一个简单的静态页面生成器,剥离额外的属性 可以节省很多字节。
但是,如果你想使用JSX,你必须使用babel,否则,你可以使用Reacts JS语法。
以下是一个示例的链接: