Javascript 玉石结合_Javascript_Node.js_Express_Pug_Reactjs

Javascript 玉石结合

javascript node.js express reactjs

Javascript 玉石结合,javascript,node.js,express,pug,reactjs,Javascript,Node.js,Express,Pug,Reactjs,我正在使用express+react开发一个同构javascript应用程序。我们最初使用jade作为静态内容的服务器端模板，但将两者结合起来很快就会变得很难处理。我们的结局是这样的：在快线： router.get("/", function(req, res) { var webpackStats = require('../../config/webpack-stats.json'); var reactHtml = React.renderToString(HiwApp({}))

我正在使用express+react开发一个同构javascript应用程序。我们最初使用jade作为静态内容的服务器端模板，但将两者结合起来很快就会变得很难处理。我们的结局是这样的：

在快线：

router.get("/", function(req, res) {
  var webpackStats = require('../../config/webpack-stats.json');
  var reactHtml = React.renderToString(HiwApp({}));
  var slideshowHtml = React.renderToString(slideshowApp({}));
  var config = {
    webpackStats: webpackStats,
    reactOutput: reactHtml,
    slideshowHtml: slideshowHtml
  };
  res.render("how_it_works/howitworks", config);
});

玉器：

body
  .company-logo.center
  #react-main-mount
    != reactOutput
  include ./content_block_1.jade

  include ./content_block_2.jade

  #slideshow-main-mount
    != slideshowHtml

这是非常脆弱的，如果我们想要jsx，然后一个玉模板，然后更多的jsx，我们必须确保我们得到正确的订单

我的想法是使用jsx来完成这一切。我知道这类东西有React.renderToStaticMarkup，但这并不能解决动态页面与静态页面混合的问题

最大的问题是：如果我们决定用jsx（比如包含所有组件的layout.jsx）完成所有这些，那么调用

React.renderToString（App（{}）

，这会对性能造成重大影响吗？如果会，有没有更好的方法来轻松组合静态块和动态块？

我们成功的方法是使用

React.renderToStaticMarkup（）在服务器上呈现JSX外壳模板（Html.JSX
）

然后将其作为对每个服务器端快速路由请求的响应发送，该请求旨在向浏览器发送一些HTML。

HTML.jsx

只是一个包含HTML标题信息和GA脚本等的shell。它不应包含布局

// Html.jsx
render(){
  return (
    <html>
      <head>
        // etc.
      </head>
      <body>
        <div
          id="app"
          dangerouslySetInnerHTML={{__html: this.props.markup}}>
        </div>
      </body>
      <script dangerouslySetInnerHTML={{__html: this.props.state}</script>
      <script>
        // GA Scripts etc.
      </script>
    </html>
  )
}

//Html.jsx
render（）{
返回(
//等等。
尽管这可能有点离题：我们坚持使用jade模板。
基本上，我们希望能够灵活地在需要时为站点的各个区域使用非反应+流量架构。我们的站点基本上由许多较小的SP应用程序组成：站点、用户帐户、团队和管理员
我们为什么这样做？

对于不访问站点所有部分的用户，文件大小和开销更小
如果需要，选择“退出”反应和通量
更简单的服务器端身份验证
我们最终使用react router对所有内容执行了类似于您的html.jsx的操作。对于所有使用jade但未使用react router的内容，我们将其移动到jsx，安装在一个节点上，但没有注意到巨大的性能损失。很好。大约花费了您多少时间？您对体系结构的运行情况感到满意吗？实际上，we最终进行了100%的react构建。后端API用PHP编写，通过JWT进行身份验证。回答得好，我也有同样的问题，你的前两个参数也出现在我的脑海中。但是：服务器端身份验证与模板引擎有什么关系？更多的是关于应用程序架构，身份验证在SP应用程序。虽然这篇文章是React制作的，但有这么多选项可以简化这一过程。使用ReactrenderToString
呈现整个文档是完全可以的。初始页面加载呈现会受到惩罚，尽管这非常小。考虑到您最有可能构建SP应用程序，这对于用户来说确实是一个微不足道的问题仅访问初始页面生成一次。