Question

好的。我因为SEO的原因而负担修改在expressjs / Ractive中完成的app以支持服务器端渲染。

使用gulp将事物的前端打包，并将所有内容组织成干净的嵌套组件结构。

有没有办法利用现有的大部分内容来渲染服务器上的某些组件？我一直在用ractive-render进行黑客攻击，但是文档还有很多不足之处，说实话，我担心它会“3”。让我最终陷入困境。

在大多数情况下，我的组件包含太多模板以在组件定义上内联。它们按文件夹层次结构组织，最低级别是包含index.js组件定义和template.html模板文件的单个组件文件夹。我使用ractivate来获取gulp / browserify进程，以便在构建时提取这些.html模板文件。

我正在寻找一个解决方案，它允许我打包组件以使用browserify / gulp以及ractive-render之类的东西来表达它们。

如果不可能，这很酷，但到目前为止，我的研究很好地让我感到头痛。

Answer 1

可能 - examples.ractivejs.org网站是一个Express应用，可在服务器上呈现Ractive组件。（FWIW回购是here，虽然它是一项永久性的工作，除了表明它可能之外可能不是特别有启发性 - shared文件夹包含一些在服务器和客户端上呈现的组件。

基本上，您只是实例化与浏览器中完全相同的Ractive实例，除非您没有提供el属性或致电ractive.render(el)。而是致电ractive.toHTML()。

因此，您的快递应用的片段可能如下所示：

var Article = require( './components/Article' );
var fetchArticle = require( './utils/fetchArticle' );

var page = `
  <!DOCTYPE html>
  <html>
  <head>...</head>
  <body>
    <@content@>
    <script src='app.js'></script>
  </body>
  </html>`;

app.get( '/articles/:slug', function ( req, res ) {
  var slug = req.params.slug;

  fetchArticle( slug )
    .then( articleData => {
      var ractive = new Article({
        data: {
          article: articleData,
          user: userData
        }
      });

      var html = page
        .replace( '<@content@>', ractive.toHTML() );

      res.send( html );
    });
  });
});

当然，您每次也可以重新使用相同的实例，只需重置数据。

Ractive目前没有任何方法可以逐步增强服务器呈现的HTML - 换句话说，当您在客户端呈现组件时，您将废弃现有的DOM。这是我们计划在未来版本中解决的问题。

清晰的方式来渲染和重用RactiveJS组件/模板

1 个答案: