Server side rendering with Meteor and Meteorhacks:ssr and iron-router -
this came out recently: https://meteorhacks.com/server-side-rendering.html there doesn't seem total fledged illustration of how utilize iron-router.
if had template like: /private/post_page.html
{{title}} {{#markdown}} {{body}} {{/markdown}} how populate single records attributes request specific id ?
e.g page requested localhost:3000/p/:idofposthere how populate info , render in iron-router route / server side?
actually bit easier think (i followed arunoda's ssr illustration , converted iron-router you):
if(meteor.isserver) { template.posts.getposts = function(category) { homecoming 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); } }); }); it gets tricky if share same route client , server side example, if want render client-side based on user agent.
source: utilize strategy on our own apps.
updatewhile above code question asking for, can working follow google's ajax spec checking ?_escaped_fragment_= query string before reach client..
basically, don't know iron-router if have identical routes declared server , client, server-side route dispatched first , client-side.
here's main javascript (with annotations):
ssr_test.jsrouter.configure({ layout: 'default' }); posts = new mongo.collection('posts'); // test helper verify if area rendering client or server. ui.registerhelper('is_server', function(){ homecoming meteor.isserver ? 'from server' : 'from client'; }); myrouter = null; if(meteor.isserver) { // watch out mutual robot user-agent headers.. can add together more here. // taken mdg's spiderable package. var useragentregexps = [ /^facebookexternalhit/i, /^linkedinbot/i, /^twitterbot/i ]; // wire info context manually since can't utilize info alternative // in server side routes while overriding default behaviour.. // not way, @ to the lowest degree (with ssr). // utilize {{#with getpost}} template.view_post_server.helpers({ 'getpost' : function(id) { homecoming posts.findone({_id : id}); } }); router.map(function() { this.route('view_post', { path: 'post/:id', // post/:id i.e. post/123 where: 'server', // route runs on server action : function() { var request = this.request; // taken mdg's spiderable package. if (/\?.*_escaped_fragment_=/.test(request.url) || _.any(useragentregexps, function (re) { homecoming re.test(request.headers['user-agent']); })) { // meat of ssr rendering. render 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 client if don't need utilize ssr. } } }); }); } if(meteor.isclient) { router.map(function() { this.route('home'); this.route('view_post', { // same route server-side version path: 'post/:id', // , same request path match where: 'client', // run next action on client action : function() { this.render('view_post'); // yup, render client-side } }); }); } 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> the result: i uploaded app @ http://ssr_test.meteor.com/ see in action, seems crash when using ssr. sorry that. works fine if paste above on meteorpad though!
screens:
here's github repo instead:
https://github.com/electricjesus/ssr_test
clone , run!
meteor
No comments:
Post a Comment