meteor - 使用 Meteor 和 Meteorhacks 进行服务器端渲染 :ssr and iron-router-6ren

meteor - 使用 Meteor 和 Meteorhacks 进行服务器端渲染 :ssr and iron-router

转载作者：行者123 更新时间：2023-12-04 01:24:41

25

4

最近发布:https://meteorhacks.com/server-side-rendering.html但似乎没有一个完整的例子来说明如何将其与iron-router一起使用。

如果我有一个像这样的模板:/private/post_page.html

{{title}}
{{#markdown}} {{body}} {{/markdown}}

如何使用特定 ID 请求中的单个记录属性填充它？

例如请求的页面是localhost:3000/p/:idofposthere如何用数据填充它并在该路由/服务器端的iron-router中呈现它？

最佳答案

实际上比你想象的要容易一些(我只是按照 Arunoda 的 SSR 示例并将其转换为 iron-router ):

if(Meteor.isServer) {
  Template.posts.getPosts = function(category) {
    return Posts.find({category: category}, {limit: 20});
  }
}

Router.map(function() {
  this.route('home');
  this.route('view_post', {
    path: 'post/:id',
    where:"server",    
    action : function() {

      var html = SSR.render('posts', {category: 'meteor'})
      var response = this.response;

      response.writeHead(200, {'Content-Type':'text/html'});
      response.end(html);
    } 
  });
});

如果您为客户端和服务器端共享相同的路由，例如，如果您希望它基于用户代理呈现客户端，那么事情就会变得棘手。

来源:我们在自己的应用程序上使用此策略。

更新

虽然上面的代码只是问题所要求的，但我们可以通过在到达客户端之前检查 ?_escaped_fragment_= 查询字符串来使其遵循 Google 的 Ajax 规范。

基本上，我们对 Iron-Router 最不了解的是，如果您为服务器和客户端声明了相同的路由，则首先调度服务器端路由，然后调度客户端路由.

这是主要的 javascript(带注释):

ssr_test.js

Router.configure({
  layout: 'default'
});

Posts = new Mongo.Collection('posts');

// Just a test helper to verify if we area actually rendering from client or server.
UI.registerHelper('is_server', function(){
  return Meteor.isServer ? 'from server' : 'from client';
});

myRouter = null;

if(Meteor.isServer) {

  // watch out for common robot user-agent headers.. you can add more here.
  // taken from MDG's spiderable package.

  var userAgentRegExps = [
    /^facebookexternalhit/i, 
    /^linkedinbot/i, 
    /^twitterbot/i
  ];

  // Wire up the data context manually since we can't use data option 
  //   in server side routes while overriding the default behaviour.. 
  //   not this way, at least (with SSR).
  //   use {{#with getPost}} to 
  Template.view_post_server.helpers({
    'getPost' : function(id) {
      return Posts.findOne({_id : id});
    }
  });

  Router.map(function() {    
    this.route('view_post', {
      path: 'post/:id',       // post/:id  i.e. post/123
      where: 'server',        // this route runs on the server
      action : function() {
          var request = this.request;

          // Also taken from MDG's spiderable package.
          if (/\?.*_escaped_fragment_=/.test(request.url) ||
          _.any(userAgentRegExps, function (re) {
            return re.test(request.headers['user-agent']); })) {          

            // The meat of the SSR rendering. We render a special template
            var html = SSR.render('view_post_server', {id : this.params.id});
            var response = this.response;
            response.writeHead(200, {'Content-Type':'text/html'});
            response.end(html);

          } else {
            this.next(); // proceed to the client if we don't need to use SSR.
          }         
      }
    });
  });          


}

if(Meteor.isClient) {
  Router.map(function() {
    this.route('home');
    this.route('view_post', { // same route as the server-side version
      path: 'post/:id',       // and same request path to match
      where: 'client',        // but just run the following action on client
      action : function() {
          this.render('view_post'); // yup, just render the client-side only 
      }
    });
  });
}

ssr_test.html

<head>
  <title>ssr_test</title>
  <meta name="fragment" content="!">
</head>
<body></body>
<template name="default">
    {{> yield}}
</template>
<template name="home">
</template>
<template name="view_post">
    hello post {{is_server}}
</template>
<template name="view_post_server">
    hello post server {{is_server}} 
</template>

结果:

我将应用程序上传到 http://ssr_test.meteor.com/看看它的实际效果，但使用 SSR 时似乎会崩溃。对于那个很抱歉。如果你把上面的内容粘贴到 Meteorpad 上就可以了!

屏幕:

Client-side Server-side

这是 Github 存储库:

https://github.com/electricjesus/ssr_test

克隆并运行!

关于meteor - 使用 Meteor 和 Meteorhacks 进行服务器端渲染 :ssr and iron-router，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26322794/

25

4

0

文章推荐： rest - odata 过滤器中是否有 LIKE 运算符？

文章推荐： python-3.x - 导入错误 : No module named 'keras.utils.visualize_util'

meteor - Meteor.com meteor 托管什么时候才能足够可靠以供生产使用？
我在尝试在 Meteor.com 上托管的经历非常复杂。我经常收到“此网站已关闭。稍后再试。”。一开始我不知道为什么，但后来我怀疑问题是我不小心恢复了“system.users”集合造成的。我尝试在
meteor - 通过 Meteor Up 或 tmux Meteor 部署 Meteor 应用程序
我有点好奇，与复制 Meteor 应用程序、启动 tmux session 并仅运行 meteor 相比，Meteor Up(或其他 Meteor 应用程序部署过程，如 Modulus)是否能做任何花
meteor - meteor 方法和 meteor 发布/订阅之间的差异
我与meteor 合作创建了一个应用程序。在 meteor Meteor.methods 和 Meteor.publish 用于执行数据库操作。 I know use of Meteor method
meteor - 如何确定我的 meteor 项目中使用了哪些 meteor 包
我有一个相当大的 meteor 项目并安装了几个 meteor 包。我这样做只是为了试用一个 meteor 包，看看它是否适用于我的项目。不幸的是，在确定我不需要在我的项目中安装这些包后，我没有卸载这
meteor - "meteor"与 "meteor bundle"用于生产
对于生产为什么我应该“捆绑” meteor 应用程序而不仅仅是复制服务器上的源使用“ meteor ”命令？基本上有什么区别: “meteor bundle app.tar.gz”，然后安装正确版
meteor - 使用 meteor 帐户在 Meteor 中为用户添加个人资料图片
我是 Meteor 的新手，我想知道我们如何要求用户在创建帐户时上传他的图片？我正在使用基本的 Meteor 帐户来创建用户帐户。我希望用户能够上传他的图片，并且还能够在他登录时和在我网站的登录页面上
meteor - angular2-meteor 样本在 meteor 更新后停止工作
我正在学习 Meteor Angular 2 教程。在第 6 步，我随机尝试了“ meteor 更新”，这使我的样本崩溃了。更新有效，服务器正在启动。然而，浏览器屏幕现在保持空白，并且在控制台中出现错
meteor - meteor 表排序
在我的 meteor app我需要实现表格排序。现在我正在做的是设置一个 session variable对于每个列并根据要排序的项目切换其值。任何人都可以提出更好的选择吗？最佳答案我推荐表格
meteor - meteor 中的重置密码问题
我向用户发送了注册电子邮件，当他输入密码和其他详细信息时，我试图重置密码，但它抛出错误 uncaught error extpected to find a document to change 正如
meteor - meteor 服务器什么时候重启？
我运行排行榜示例。然后我更改了 leaderboard.js 中的 names 变量(Meteor.startup 函数参数初始化的一部分)中的科学家条目之一并保存了文件。我应该期待 meteor
meteor - meteor 在哪里存放它的包裹？
我有一个 meteor 1.0 应用程序。我添加了一堆包，例如:meteor add kevohagan:ramda .但我在任何地方都找不到它。我什至无法在我的系统上找到它。在我的项目中: $>
meteor - meteor 中的页面转换？
我有一个 meteor 移动应用程序在结构上工作；我真的需要将 View 与一些页面转换拼接在一起。我看了iron-transitioner项目，但看起来开发已经停止？ (最后一次提交 6 个月前，
meteor - Meteor 上的手写笔问题
我在“发现 meteor ”一书之后构建了我的第一个 meteor 添加。但是我现在遇到了以下错误: 错误:在ian:accounts-ui-bootstrap-3 中没有找到accounts_ui
meteor - meteor 应用程序可以负载平衡吗？
是否可以在负载均衡器后面使用 Mongodb 运行 meteor 应用程序的多个实例？似乎如果一个应用程序的多个实例在不同的服务器上运行，那么它们就不会知道其他实例对 Mongo DB 所做的更改
meteor - 如何正确使用 Meteor.connect() 连接另一个 Meteor 服务器
我在/client/main.coffee 中的新客户端代码 Xingyun = Meteor.connect "localhost:3000" System = new Meteor.Collect
meteor - 在 Meteor 中，this.error 和在 Meteor.publish 中抛出新的 Meteor.Error 有什么区别？
在 Meteor.publish ，使用 this.error 有什么区别并简单地抛出 Meteor.Error ? 最佳答案 this.error仅在发布方法内可用。每 the docs : Sto
meteor - Meteor 的不同数据库和前端
假设我想在 Meteor 的后端使用与 Mongo 不同的数据库，并且还想在前端使用像 D3.js 这样的可视化库。目前有可能吗？如果不是我自己添加它会有多复杂？谢谢最佳答案 https://
meteor - Meteor 应用程序中的元素保存错误
我已经在 Meteor 中制作了一个 watch-as-I-type 实时聊天服务，但是我在 Meteor 中的内置元素保存功能方面遇到了麻烦。基本上，当输入的文本具有焦点时，我需要不更新当前的聊天消
meteor - 在离线模式下使用 Meteor
我想知道 Meteor 是否可以与我的用例一起使用。我有一个可在 App Store 上使用的移动应用程序。这个应用程序包含一个小调查，用户将在没有互联网连接的情况下做出回应。然后用户将关闭应用程序
meteor - 卸载 meteor
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 8年前关闭。 Improve this q

首页

博学

6Ren·AI

商城