好吧。由于 SEO 的原因，我需要修改在expressjs/Ractive 中完成的应用程序以支持服务器端渲染。
前端部分使用 gulp 进行打包，所有内容都组织成一个干净的嵌套组件结构。
是否有任何方法可以利用现有的大部分内容来在服务器上呈现其中一些组件？我一直在使用 ractive-render 进行黑客攻击，但文档还有很多不足之处，老实说，我担心它最终会让我陷入困境。
我的组件在大多数情况下包含太多模板，无法内联到组件定义上。它们按文件夹层次结构组织，最低级别是包含 index.js 组件定义和 template.html 模板文件的单独组件文件夹。我用ractivate让 gulp/browserify 进程在构建时提取这些 .html 模板文件。
我正在寻找一种解决方案，允许我打包组件以与 browserify/gulp 以及 ractive-render 之类的东西一起使用，以快速渲染它们。
如果这是不可能的，那很酷，但到目前为止我的研究一直让我头疼。
最佳答案
这是可能的 - examples.ractivejs.org site 是一个 Express 应用程序，可在服务器上呈现 Ractive 组件。 (FWIW 存储库是 here ，尽管它是一个永久的正在进行中的工作，除了表明它是可能的之外可能没有特别的启发性 - shared 文件夹包含一些在两者上呈现的组件服务器和客户端)。
本质上，您只是实例化一个 Ractive 实例，与在浏览器中完全相同，只是您不提供 el 属性或调用 ractive.render(el )。相反，您可以调用ractive.toHTML()。
因此，您的 Express 应用程序的片段可能如下所示:
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。这是我们计划在未来版本中解决的问题。
关于express - 渲染和重用 RactiveJS 组件/模板的简洁方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32190544/