FastBoot — SSR for Ember

ember-cli-fastboot runs your Ember app on Node, rendering the first page server-side for SEO and TTFB.

4 min read Level 3/5 #ember#fastboot#ssr

What you'll learn

Install ember-cli-fastboot
Recognize the browser vs server execution split
Guard browser-only code with the fastboot service

FastBoot is Ember’s SSR layer. It renders the initial page on the server, ships HTML to the browser, then hydrates the Ember app for the SPA experience.

Install

ember install ember-cli-fastboot
ember serve   # now serves SSR'd HTML

ember build --environment=production produces a dist/ ready to be served by a FastBoot host (e.g. fastboot-app-server or hosted via Vercel/Render adapters).

The Server/Browser Split

Server has no window, document, localStorage. Some addons are not FastBoot-safe; many are. When in doubt, guard:

import Service from '@ember/service';
import { service } from '@ember/service';

export default class TrackingService extends Service {
  @service fastboot;

  track(event) {
    if (this.fastboot.isFastBoot) return;
    window.analytics?.track(event);
  }
}

Reading Headers and Cookies

@service fastboot;

get host() {
  if (!this.fastboot.isFastBoot) return window.location.host;
  return this.fastboot.request.host;
}

this.fastboot.request exposes URL, headers, cookies during SSR.

Setting the Response Status

// app/routes/post.js
model({ id }) {
  return this.store.findRecord('post', id).catch((err) => {
    if (this.fastboot.isFastBoot && err.status === 404) {
      this.fastboot.response.statusCode = 404;
    }
    throw err;
  });
}

Useful for proper HTTP status codes, redirects, and cache headers.

Engines — In-App Boundaries →