DEV Community: Martin Klingenberg

Testing RXJS Observables, the easy way

Martin Klingenberg — Tue, 24 Jun 2025 15:09:55 +0000

Introduction

I really love reactive programing. Especially when working on frontend applications. I know this is a hot topic and we will not discuss the strengths and weaknesses of RxJS in this post. However, one of the weaknesses is truly that testing becomes more complicated. More complicated code, more complicated test. This article shows what means we have to testing today, and how I implemented an easier patter to really boost productivity.

What tools do we already have?

RxJS actually comes with a really nice set of tools to test observables. Example below is from RxJS documentation and if some of you are like me, they would say it is quite complicated.
Most of my observables emit simple values, and I usually do not test the exact timings. Usually you want to test that for a given input A you end up with exactly one result of B. Maintaining tests like the ones below, is a bit harder than it should. Even though I look upon my own RxJS skills as above average, this is still quite hard to read.

// This test runs synchronously.
it('generates the stream correctly', () => {
  testScheduler.run((helpers) => {
    const { cold, time, expectObservable, expectSubscriptions } = helpers;
    const e1 = cold(' -a--b--c---|');
    const e1subs = '  ^----------!';
    const t = time('   ---|       '); // t = 3
    const expected = '-a-----c---|';

    expectObservable(e1.pipe(throttleTime(t))).toBe(expected);
    expectSubscriptions(e1.subscriptions).toBe(e1subs);
  });
});

I have used the marble diagram for testing production code once. And most of the time, I have been writing tests using lastValueFrom in combination with await. That creates a lot of clutter in the tests and is also quite hard to follow. It is also hard to test when an observable completes using that method.

Lets get inspired by Dart

I wrote some apps in dart, and while doing so I was impressed by the amazing tooling dart has created for testing streams. Streams in dart are quite comparable to RxJS. RxDart is a package basically just extending the existing Stream-class found in Dart. And testing streams in Dart is awesome. Just look at this example.

final stream = Stream.fromIterable([
    'This.',
    'Is',
    'Very readable!!!!!!',
  ]);

expect(
  stream,
  emitsInOrder([
    'This',
    'Is',
    'Very readable!!!!!'
  ]),
);

This is very simple. Define expected outputs and the stream. In many cases, this is more than enough and it makes the tests very readable. This is what we want in typescript!

Lets make our own!

The experience I want, is shown below

describe('simple tests', () => {
    it('double stream', async () => {
        const source = from([1, 2, 3, 4]);
        const double$ = source.pipe(map((value) => value * 2));

        expectEmitsInOrder(double$, [2, 4, 6, 8, StreamComplete]);
    });
});

describe('pattern used when testing services and similar', () => {
    it('double stream', async () => {
        const source = new BehaviorSubject(0);
        const double$ = source.pipe(map((value) => value * 2));

        expectEmitsInOrder(double$, [0, 40, 80]);

        source.next(20);
        source.next(40);
    });
});

describe('We want to test that things fail as they should', () => {
    it('double stream', async () => {
        const backendError = new Error('Backend is at fault!!!!');
        const source = from([1, 2, 3, 4, '5' as unknown as number]);
        const double$ = source.pipe(
            map((value) => {
                if (typeof value === 'number') {
                    return value * 2;
                }

                throw backendError;
            }),
        );
        expectEmitsInOrder(double$, [
            2,
            4,
            6,
            8,
            {
                error: backendError,
            },
        ]);
    });
});

The spec I wanted is simple

Should be possible to test simple sequences
Easy to read
Can test completions
Can test for errors

Implementation

Implementation below is not too complicated. Please feel free to come with suggestions to how we can make developer experience event better 🔥

I could put this code into a small node-package, however it is better if you just put it into your project. The code below should work with Vitest and Jest. Hope this simplifies your RxJS testing as much as it has done for me. Happy hacking.

import {
    type Observable,
    lastValueFrom,
    take,
    switchMap,
    catchError,
    timeout,
    tap,
    of,
    TimeoutError,
} from 'rxjs';

type StreamEvent<T> =
    | { type: 'VALUE'; value: T }
    | { type: 'ERROR'; error: unknown }
    | { type: 'TIMEOUT' }
    | { type: 'COMPLETION' };

export const StreamComplete = { type: 'COMPLETION' };
export const StreamTimeout = { type: 'TIMEOUT' };

type StreamEmissionEvent<T> = T | typeof StreamComplete | { error: unknown };

type StreamRecorderOptions = {
    timeout?: number;
};

async function streamEmitsInOrder<T>(
    stream$: Observable<T>,
    events: StreamEmissionEvent<T>[],
    options?: StreamRecorderOptions,
) {
    const actualEvents: StreamEvent<T>[] = [];

    const timeoutMilliseconds = options?.timeout ?? 2000;

    try {
        const innerStream = stream$.pipe(
            timeout({ each: timeoutMilliseconds }),
            tap({
                next: (valueEvent) =>
                    actualEvents.push({ type: 'VALUE', value: valueEvent }),
                complete: () => actualEvents.push({ type: 'COMPLETION' }),
                error: (e) => {
                    if (e instanceof TimeoutError) {
                        actualEvents.push({ type: 'TIMEOUT' });
                    } else {
                        actualEvents.push({ error: e, type: 'ERROR' });
                    }
                },
            }),
        );

        const expectingStream = of(0).pipe(
            switchMap(() => innerStream),
            take(events.length),
            catchError(() => of()),
        );

        await lastValueFrom(expectingStream);
    } catch {}

    return actualEvents;
}

export function expectEmitsInOrder<T>(
    stream$: Observable<T>,
    events: StreamEmissionEvent<T>[],
    options?: {
        timeout?: number;
    },
) {
    expect(streamEmitsInOrder(stream$, events, options)).resolves.toStrictEqual(
        streamEmissionEventToStreamEvent(events),
    );
}

function streamEmissionEventToStreamEvent<T>(events: StreamEmissionEvent<T>[]) {
    return events.map((event) => {
        if (event === StreamComplete) {
            return StreamComplete;
        }

        if (typeof event === 'object' && event && 'error' in event) {
            return { type: 'ERROR', error: event.error };
        }

        if (
            typeof event === 'object' &&
            event &&
            'type' in event &&
            event.type === 'TIMEOUT'
        ) {
            return { type: 'TIMEOUT' };
        }

        return { type: 'VALUE', value: event };
    });
}

If you love lit and RxJS

I really like writing Lit-elements. Mental model is simple, it is close to bare metal javascript. I have made quite a lot of applications using RxJS and Lit-element and I have taken my abstractions and put it into a simple node-package. Check out Litworks. It is basically RxJS-bindings, routing and simple authentication. Hope you enjoy.

What I should have known when starting to write angular 🔥

Martin Klingenberg — Tue, 02 May 2023 13:29:19 +0000

I have written angular for some years now and I am still learning. I know Angular is the framework everyone loves to hate, the Java of the frontend world. However, the likelyhood of ending up in an angular project is quite high. Let me take you through my most important tips to becoming a good angular developer.

No logic in your components

A component in angular has three files that should be focusing on rendering and only rendering. If you start adding a lot of business-logic into that component-code you will end up with code that is overly complicated and tests that are hard to maintain. If your component.ts-file exceeds 250 lines of code, it is time to rethink and refactor. Put logic into a service or event split the component into several smaller components.

Features === Modules

I remember my first angular project. It had one module in it. That is wrong on so many levels and my rule of thumb is that you should make modules for every new feature. And there should be no cross-feature imports.

RXJS is your friend

RXJS is a great tool for syncing major state of an application. State like the chosen project across the whole application. I remember doing a lot of subscriptions in my first application. And subscribing is not very good, let angular handle subscriptions. Below there are two examples:

Bad usage of observables

This example is using subscribe and is in my mind "duplicating" data and we even have a memory leak if the observable does not complete.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bad',
  template: `
  <ul>
    <li *ngFor="let idea of data ">{{ idea.name }}</li>
  </ul>
  `,
  styles: []
})
export class BadComponent  {

  data: Idea[];

  constructor(private ideaService: IdeaService) {
    this.data$ = ideaService.getGoodIdeasFromAlv().subscribe(data => this.data = data);
  }
}

Good usage of observables

This example is using the async-pipe and is much cleaner. No memory-leaks as angular is removing the subscription for us. the code is also more readable.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-good',
  template: `
  <ul>
    <li *ngFor="let idea of data$ | async">{{ idea.name}}</li>
  </ul>`,
  styles: []
})
export class GoodComponent  {

  data$: Observable<Idea[]>;

  constructor(private ideaService: IdeaService) {
    this.data$ = ideaService.getGoodIdeasFromAlv();
  }
}

Quick tips about RXJS

Learn how to use map, switchMap, share, shareReplay mergeMap-operators
Learn why shareReplay can create memory-leaks
The less Behaviour-subjects / subjects you use, the better. Always rethink when adding new ones. You should hardly use any.
When using switchMap/mergeMap you should carry the initial state. Trust me, it will make code scale in the future.

class ExampleService {
  exampleId$ = BehaviourSubject(0);
  exampleResult$: Observable<{id: number, examples: string[]}>;

  constructor(private readonly httpClient: HttpClient) {
    this.exampleResult$ = this.exampleResultObservable();
  }

  private create exampleResultObservable() {
    exampleId.pipe(
      switchMap(id => this.httpClient.get(`somebackend/${id}`).pipe(map(response => ({
id,
examples: response,
}))
    )
  }

}

A few quick tips to complete the article

Use reactive forms

Your solution is not as good as what comes from @angular/forms

Give your loops an index

This increases rendering performance. Use the trackBy-directive and thank me when your project scales.

Use pipes instead of functions

If you have a function in your component, formatting values, consider using a pipe instead. It is reusable and the performance is better.

ChangeDetection set to `onPush`

If you manage to follow the "good" example above, all your component state will be reactive. Using onPush makes change detection more conservative and more efficient.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

Have I missed something?

Feel free to pass a comment and I might include your suggestions

Set up a flutter development environment on Linux

Martin Klingenberg — Sun, 30 Apr 2023 11:15:11 +0000

Flutter has been on top of the list of technologies I should learn. I found the setup of a flutter development environment a bit segmented and wanted to make life easier for others wanting to jump into flutter development.

This guide is distro-agnostic but is only confirmed to work on fedora 38.

Install android studio

I have had mixed success installing editors as flatpaks. Download android studio and unpack the tar https://developer.android.com/studio. Move the android studio files to a safe place. I choose $HOME/.android-studio. You can then start android studio by running \~/.android-studio/bin/studio.sh. Install flutter-plugin an in my case the ideaVIM-plugin.

When you have opened android-studio and done the setup, you can add a desktop entry. By clicking tools/Create Desktop Entry

Install Command-line-tools

Install the command line tools. These will come in handy when we set up flutter. Can be done as easily as this

Fetch some dependencies

RHEL Distros (Fedora, RedHat, CentOS)

sudo dnf install clang cmake ninja-build pkgconf-pkg-config gtk3-devel lzma-sdk-devel

Debian based distros (Ubuntu, Linux Mint etc)

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev liblzma-dev

Download the morst recent SDK

I would avoid using snap on Fedora and rather download the SDK and install manually. It is quite easy. Find the latest stable version here https://docs.flutter.dev/get-started/install/linux.

Extract and install

Personally I would just install this as I set up golang, basically just adding a folder to your home-directory.

cd; tar xf ~/Downloads/flutter_linux_[VERSION]]-stable.tar.xz

Update environment variables

If you use bash, execute the following to add flutter and android-commandline tools to the path

# IF YOU USE BASH
echo 'export PATH="$PATH:$HOME/flutter/bin"' >> $HOME/.bashrc
echo 'export PATH="$PATH:$HOME/Android/Sdk/cmdline-tools/latest/bin/"' >> $HOME/.bashrc

# IF YOU USE ZSH
echo 'export PATH="$PATH:$HOME/flutter/bin"' >> $HOME/.zshrc
echo 'export PATH="$PATH:$HOME/Android/Sdk/cmdline-tools/latest/bin/"' >> $HOME/.zshrc

# IF YOU USE FISH
echo 'set -xg PATH "$HOME/flutter/bin:$PATH"' >> $HOME/.config/fish/config.fish
echo 'set -xg PATH "$HOME/Android/Sdk/cmdline-tools/latest/bin:$PATH"' >> $HOME/.config/fish/config.fish

Agree to stuff you do not understand

If you want to do this step properly you should hire a lawyer and pay him what ever it takes to have him explain the terms of agreeing to the licsense

flutter doctor --android-licenses

And you are off to the races

Running the following command should give you an output looking like what I got below. And you should be able to launch your first app from android studio.

flutter doctor

I am really not a big fan of big editors and this article might get updated with a guide setting up the android SDK manually and use Emacs / VsCode / VIM instead.

How to use SSR with Gatsby

Martin Klingenberg — Wed, 31 Aug 2022 20:42:09 +0000

Introduction

Gatsby 4 came with new rendering methods. DSG (Deferred Static Generation) to render blog articles on the go and SSR (Server Side Rendering). However, the documentation and availability of good examples for using this new technology has been scarce, especially the limitations of the technology. Earlier this year, I took responsibility of developing my companies web pages and transitioned a lot of the page to use SSR. The process was confusing, frustrating and I want to help all developers in my situation. This article will focus on the SSR features of Gatsby, however most of the solutions will apply to DSG as well.

Why do I even want to use SSR?

The media-guy at my company wanted to make it easier to publish changes to specific parts of the website and wanted the changes published without any delay. And I do understand why dislikes waiting 10-15 minutes to publish changes. Why wait for a build when you can have the changes instantaneous. I haven’t converted the whole page to SSR as only parts of the page benefits from using the technology. Basically my first tip, is to identify the pages that benefits form SSR the most, then prioritize the pages with the product owner. Second tip is to do the transition to SSR gradually, one page at a time.

The coding begins

Fetching data

If you have an existing solution, you probably have some method of getting data already. That would be some sort of page queries or similar. And we are going to keep most of these queries. In my project, a lot of the data needed for the LayoutComponent, navigation etc, and the navgation was working perfectly and will rarely change, therefore there is no need for SSR. Blog articles and available positions are a different story. For those we need to fetch data on the go. And gatsby gives us no API for that. We must make our own method of fetching data.

Installing dependencies

In my case, I needed to fetch data from Sanity (A headless CMS). And Sanity provides a nice graphq-interface. Therefore we need to install a graphql-client in addition to the existing gatsby-source-sanity.

yarn add @apollo/client; npm install @apollo/client

Lets get some data

First we need to set up a graphql-client, capable of fetching data. It is no harder than the following.

src/server-side/client.js

import { ApolloClient, InMemoryCache } from '@apollo/client';
import config from '../config';

export const client = new ApolloClient({
  uri: `https://${config.SANITY_PROJECT_ID}.apicdn.sanity.io/v1/graphql/${config.SANITY_DATASET}/${config.SANITY_TAG}`,
  cache: new InMemoryCache(),
  headers: {
    Authorization: `Bearer ${config.SANITY_TOKEN}`,
  },
});

Now comes the sad part of the story. The queries you have built using the gatsby-graphql will not work anymore. There will be some changes but when you have rewritten your queries, the usage of the client is easy. As the example below shows, I like to put the logic for fetching data into it’s own file.

import { gql } from '@apollo/client';
import { createGatsbyImages } from '../server-side/imageCreator';
import { client } from '../server-side/client';
export async function getBlogDataServerSide() {
  const response = await client.query({
    fetchPolicy: 'no-cache',
    query: gql`
      {
       Write something clever here ;)
      }
    `,
  });
  response.data.articles.forEach((article) => {
    createGatsbyImages(article);
  });
  return response.data;
}

And then in your component you will have something that looks like this:

const Blog = ({ data, serverData }) => {
  return (
    <div>Some blog article templating</div>
  );
};

export default Blog;

export async function getServerData() {
  try {
    return {
      props: { articles: await getBlogDataServerSide() },
      status: 200,
    };
  } catch {
    return {
      articles: [],
      status: 500,
    };
  }
}
export const query = graphql`
{
   You might have some sort of page query here
 }
`;

And this is how easy it is. The page-query will only run once per build (obviously) and the serverdata will be fresh. And since the component exports a getServerData-method, gatsby knows that this is a serverSide-component.

Adding some gatsby-image support

Since we are no longer using a gatsby source, we will need to make our own gatsby-image objects. You might want to create something similar for another CMS. After reading the source code of gatsby-source-sanity I came up with the script below.

import { getGatsbyImageData } from 'gatsby-source-sanity';
import config from '../config';

function resolveNodeType(asset) {
  if (asset._ref) {
    return asset._ref;
  }

  if (asset.id) {
    return { _id: asset.id };
  }

  return asset.url;
}

function imageCreator(asset) {
  const node = resolveNodeType(asset);
  let assets = {};

  if (asset.metadata?.dimensions) {
    assets = {
      ...asset.metadata.dimensions,
    };
  }

  return getGatsbyImageData(node, assets, {
    projectId: config.SANITY_PROJECT_ID,
    dataset: config.SANITY_DATASET,
  });
}

export function createGatsbyImages(element) {
  if (!element) return;
  Object.keys(element).forEach((subElement) => {
    if (typeof element[subElement] === 'object') {
      createGatsbyImages(element[subElement]);
      return;
    }

    if (Array.isArray(element)) {
      element.forEach((childElement) => {
        createGatsbyImages(childElement);
      });
      return;
    }

    if (
      subElement === '__typename' &&
      element[subElement] === 'Image' &&
      element.asset
    ) {
      element.asset.gatsbyImageData = imageCreator(element.asset);
      return;
    }
    if (
      subElement === '_type' &&
      element[subElement] === 'image' &&
      element.asset
    ) {
      element.asset.gatsbyImageData = imageCreator(element.asset);
      return;
    }
  });
}

Adding dynamic routes

One of the weak spots in the Gatsby documentation, is the explanation of how the different routing options work in combination with SSR. However, you are not here for the rant. You are here for the solution. When publishing a new article we need to have routes with slugs in them. To make that work, we will use what Gatsby calls fallback routes. Basically, if you want a page named /blogg/:slug, you can make the following file /src/pages/[slug].js. The slug parameter will then be available in props.params['slug']. Easy as pie.

export async function getServerData(props) {
  const slug = props.params['slug'];
  // More ssr-code
}

Wait! What happened to our sitemap!?

Well if you have a plugin generating a sitemap for your page, you will experience that the articles are not showing up any more. The reason being that since there is really no actual route, there will be nothing to pick up the route.
Most plugins I have seen has an option to query the routes manually.

Time to deploy

If you have been deploying your web page on your own, you will need to make some changes to the environment. The most naive thing you can do is to try to use gatsby serve as a production server. Gatsby wants you to pay for their hosting-service and would not give you a production capable server for free. gatsby serve is slow and has a tendency to add some extra redirects, which totally kills your SEO score. We need to do something different. In my company we like to deploy our services into our own kubernetes cluster. That is pretty much total overkill and way more complicated than paying for gatsby cloud. However, it comes with the benefit of me and my colleagues learning kubernetes, docker and helm. Other reasons to choose self hosting can be to reduce cost of hosting. Another reason might be that you are not allowed to use hosting outside you own country. A lot of Norwegian governmental services cannot be hosted in public clouds.

The architecture suggested by me would be using Varnish + Nginx + Fastify. Varnish for caching, nginx to do some simple proxying and adding gzip and edge-ready-ness and fastify to serve our app.

Add fastify to our page

Lets start by adding some dependencies
npm install gatsby-plugin-fastify-klyngen fastify; yarn add gatsby-plugin-fastify-klyngen fastify.

Next add the plugin into gatsby-config.js.

plugins: [
    {
      resolve: `gatsby-plugin-fastify-klyngen`,
      options: {
        /* discussed below */
        features: {},
      },
    },
    ...otherPlugins
  ]

To find a good server to serve our page I had to use an existing server and adjust it. The gatsby-plugin-fastify needed some adjustments. I will make a pull-request to their repository with my small improvements. Until a new version arrives, I have forked their repository and made my own version. But I strongly recommend using the original package as it’s maintained by a larger team and I have no intention of maintaining a fastify server for very long.

When the server is configured you can easily try it out. Build your page before serving it yarn build; yarn gserve.

But how about performance?

It would be nice if there was a mechanism to cache the articles and other content. And then invalidate the cache when the content changes. Varnish is really good at just that. Varnish was originally made by the largest newspaper in Norway and as a proud Norwegian I think varnish is the perfect solution. In this case when using sanity, it is a good solution. I spoke with a dev-ops engineer to get some insights into how he would solve the problem and the recommendation was to put the page behind a CDN. In my case that was a bit difficult as there was no easy way of integrating Sanity with a proper CDN.

Varnish is easy to use but will require some reading to ensure that your cache is as performs as good as possible. I have come up with the following configuration. It is basic and cleans all the cache on every change. It has room for improvement but its a good starting point.

vcl 4.0;

backend default {
    .host = "localhost";
    .port = "8080";
}

sub vcl_recv {
    if (req.method == "PATCH") {
        ban("req.url ~ .");
        return (synth(200, "Full cache cleared"));
    }
    unset req.http.Cookie;
}

sub vcl_backend_response {
    set beresp.ttl = 2w;
}

The most important line of the config is unset req.http.Cookie; That tells varnish to cache content even though you have a cookies. The no cache when having a cookie is actually a clever default, but will not give you any cache using google analytics or similar products.

Nginx config

To tie everything together we need a simple nginx-config.

server {
  listen 8080;
  gzip on;
  gzip_vary on;
  gzip_min_length 1024;
  gzip_proxied expired no-cache no-store private auth;
  gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/javascript application/xml;
  gzip_disable "MSIE [1-6]\.";

  absolute_redirect off;

  error_page 404 /404.html;

  rewrite ^([^.\?]*[^/])$ $1/ permanent;

  location / {
    add_header Cache-Control "public";
    proxy_pass http://localhost:9000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_intercept_errors on;
    recursive_error_pages on;
  }
}

And lets wrap it all up with a docker image

FROM nginx:1.20.2-alpine as dev

# Install packages and dependencies
RUN apk update && apk add --no-cache supervisor python3 make gcc g++ && apk add --update nodejs yarn varnish

# Build
WORKDIR /app
RUN mkdir -p /app/packages/website
RUN mkdir -p /app/.yarn/releases

COPY package.json yarn.lock .yarnrc.yml /app/
COPY .yarn/releases /app/.yarn/releases/
COPY .yarn/plugins /app/.yarn/plugins/
COPY packages/website /app/packages/website/
COPY packages/shared-components /app/packages/shared-components/

RUN yarn
RUN yarn workspace website run disable-telemetry

# The build step shouldn't be cached since it's non determenistic
# As such we add the next line to try and do a cache bust
# Recommended by: https://stackoverflow.com/a/58801213/359825
#ADD "https://www.random.org/cgi-bin/randbyte?nbytes=10&format=h" skipcache

# Ensure that proper .env files exists before building
RUN test -f "/app/packages/website/.env.production"
RUN yarn workspace website run build

# Configuring NginX
COPY website.nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

# Configure varnish
COPY default.vcl /etc/varnish/

# Configure supervisor
COPY supervisord.conf /app/supervisord.conf
CMD ["supervisord","-c","/app/supervisord.conf"]

Wrapping up

Hope this is helpful for the other people using gatsby. This may not be the perfect solution, but it is working well. If you want to see the whole solution, our website is open source and is available at Alv Website. Fill the comment-section with questions and feedback. It’s appreciated.

DEV Community: Martin Klingenberg

Testing RXJS Observables, the easy way

Introduction

What tools do we already have?

Lets get inspired by Dart

Lets make our own!

Implementation

If you love lit and RxJS

What I should have known when starting to write angular 🔥

No logic in your components

Features === Modules

RXJS is your friend

Bad usage of observables

Good usage of observables

Quick tips about RXJS

A few quick tips to complete the article

Use reactive forms

Give your loops an index

Use pipes instead of functions

ChangeDetection set to onPush

Have I missed something?

Set up a flutter development environment on Linux

Install android studio

Install Command-line-tools

Fetch some dependencies

RHEL Distros (Fedora, RedHat, CentOS)

Debian based distros (Ubuntu, Linux Mint etc)

Download the morst recent SDK

Extract and install

Update environment variables

Agree to stuff you do not understand

And you are off to the races

How to use SSR with Gatsby

Introduction

Why do I even want to use SSR?

The coding begins

Fetching data

Installing dependencies

Lets get some data

Adding some gatsby-image support

Adding dynamic routes

Wait! What happened to our sitemap!?

Time to deploy

Add fastify to our page

But how about performance?

Nginx config

And lets wrap it all up with a docker image

Wrapping up

ChangeDetection set to `onPush`