Kadira - Performance Monitoring for Meteor (you should try this)

Server Side Rendering for Meteor

Last weekend, I was able to spend enough time on hacking meteor specially to understand the state of the Server Side Rendering (SSR).

And luckily, I could be able to run blaze with it’s full power on the server after few hours of work. Let’s me show you what I’ve come up with and how useful it can be.

Idea

My initial idea was to replace fast-render by rendering whole initial set of templates on the server. So, my research goes towards that. And I wanted to implement this without forking meteor. So anyone can use it right-away by adding a package.

Success

I was able to load all the client side templates on the server. That means now we can write template helpers targeting server side and render those templates on the server.

For that you can use SSR.render api. Let’s give it a try:

Install the SSR package

meteor add meteorhacks:ssr

Template on the Client

Helpers written on the server

// server/posts.js
Template.posts.getPosts = function(category) {
  return Posts.find({category: category}, {limit: 20});
}

Render it on the server

// server/main.js

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

I did this, in order to get the initial HTML when the page loads for the first time. But, I couldn’t be able to get it working since it involves lot of other stuffs beside server side rendering. (Like routing, subscriptions and so on)

Challenges

What I build was a 98% working blaze in the server. That includes dynamic templates, template inclusion, mongo cursors inside helpers and few more stuff.

Most of the stuff has been already done by Meteor. But I had to change few things. Once such thing is the use of Tracker apis. It does not works well for our purpose. I also had to implement dynamic templates support for the Server Side as well.

Server Side only Templates

Normally, Meteor builds templates while you are bundling your app. But it does not build templates reside on your server directory. Because of that, we still needs to define our templates(only .html files) inside client directory, even though we only use them on the server.

So, I’ve made it simple by introducing another API called SSR.compileTemplate to compile templates on the server. In order to do that, you need to create your templates in the /private directory and you need to write .html files with just the template content.

Demo Time

Let’s say I need to create an email which contains a list of blog post titles created by a given user. This is how I’m gonna do that with SSR.

template on the /private directory (assets)

compile the template and create helpers

// compile the template
SSR.compileTemplate('posts', Assets.getText('posts.html'));

Template.posts.getPosts = function(owner) {
  return Posts.find({owner: owner}, {limit: 20});
}

get the html whenever you need it

var html = SSR.render('posts', {owner: '[email protected]'})

Future

I really like to see SSR(may be not this package) natively integrated into the Meteor core in the future. But there is a ton of more stuff needed to be done before that. So, I fear SSR won’t be implemented by Meteor very soon. (even if someone sends PRs)

Until that, we can use this package as a solution.

Things we can do with SSR

So, now we can do a lot of interesting stuff with SSR and Blaze. Here are some of them.

  • Easy emails with Blaze and inline CSS
  • PDF Rendering
  • Static Page Building
  • SEO without phantomjs and spiderable (I’m working on this for Telescope)
  • Iron Router integration (as an alternative to fast-render)

In the coming weeks, I’ll work on few demos and show you the power of this module. In the meantime, let me know, what do you think about this. If you build something with this, don’t forget to share it.

Meteor Explained Book Cover

All main chapters are available right now.

This book comes with a 100% money-back guarantee and I’ll refund without asking any questions.

You can purchase Meteor Explained for $29.

Table of Contents

1. Basics (Available Now)

  • 1.1 Client–Server Architecture
  • 1.2 DDP
  • 1.3 Fibers
  • 1.4 Introduction to Meteor’s Reactivity

2. Client-Side Reactivity (Available Now)

  • 2.1 Local Collections
  • 2.2 How Deps works
  • 2.3 How Blaze Works
  • 2.4 Blaze and Reactivity

3. DDP Implementation (Available Now)

  • 3.1 Default DDP Connection
  • 3.2 Processing Incoming DDP (Client Side)
  • 3.3 Processing Incoming DDP (Server Side)

4. Methods (Available Now)

  • 4.1 Introduction to Latency Compensation
  • 4.2 How Latency Compensation Works
  • 4.3 WriteFence and It’s Usage

5. Publish/Subscribe (Available Now)

  • 5.1 How Publish/Subscribe Works
  • 5.2 Cursors and Observers
  • 5.3 Merge Box
  • 5.4 Deps and Subscriptions

6. MongoDB and Meteor (Available Now)

  • 6.1 Intro to the mongo Package
  • 6.2 Polling Observe Driver
  • 6.3 Oplog Observe Driver
  • 6.3 MongoDB Write Operations

Purchase Now