How SolidCache Improves WebAssembly Performance in Rails Apps

WebAssembly delivers high-speed execution in the browser, but performance bottlenecks can still arise when handling complex computations, large images, or repeated operations.

SolidCache—a lightweight, highly optimized caching layer—helps minimize redundant computations, reducing load times and enhancing the responsiveness of a WebAssembly-powered Rails app.

1. Why WebAssembly Needs Caching in a Rails App

Consider a scenario where a user applies a filter to an image using WebAssembly. If another user applies the same filter to the same image, the browser executes the WebAssembly module again, wasting computation power. Caching helps by storing processed results, ensuring that duplicate requests are instantly served from memory instead of reprocessing.

Without SolidCache, this is what happens:

With SolidCache, the second request is nearly instant:

2. Implementing SolidCache in a WebAssembly-Powered Rails App

SolidCache is part of the Solid Trifecta and seamlessly integrates into a Rails 8 app. Since our WebAssembly runs in the browser, caching primarily happens on the Rails side after the image is processed.

Here’s how we cache processed images:

Step 1: Configure SolidCache 

#Gemfile
gem "solid_cache"

Run the install command:

rails solid_cache:install

This creates the necessary database tables for SolidCache.

Step 2: Store Processed Images in the Cache

When WebAssembly finishes processing an image, we store it in SolidCache so that subsequent requests for the same filter and image don’t require reprocessing.

Modify the Rails controller to check for cached results before storing new ones:

class ProcessedImagesController < ApplicationController
  def create
    key = cache_key(params[:image_id], params[:filter_type])

    # Return cached image if available
    if SolidCache.read(key)
      render turbo_stream: turbo_stream.replace("processed_image", partial: "processed", locals: { image_url: SolidCache.read(key) })
      return
    end

    # Save processed image in cache
    processed_image_url = params[:image_url]
    SolidCache.write(key, processed_image_url, expires_in: 1.hour)

    render turbo_stream: turbo_stream.replace("processed_image", partial: "processed", locals: { image_url: processed_image_url })
  end

  private

  def cache_key(image_id, filter_type)
    "processed_image:#{image_id}:#{filter_type}"
  end
end

Step 3: Checking for Cache Before Sending WebAssembly Requests

We modify the StimulusJS controller to check with Rails if a processed image is already cached before executing WebAssembly.

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["image", "output"];

  applyFilter(event) {
    event.preventDefault();
    const imageId = this.imageTarget.dataset.id;
    const filterType = event.target.dataset.filter;

    fetch(`/processed_images/check_cache?image_id=${imageId}&filter_type=${filterType}`)
      .then(response => response.json())
      .then(data => {
        if (data.cached) {
          this.outputTarget.src = data.image_url; // Load cached image
        } else {
          this.runWebAssembly(imageId, filterType);
        }
      });
  }

  runWebAssembly(imageId, filterType) {
    let processedImage = WebAssemblyProcessor.applyFilter(this.imageTarget, filterType);

    fetch("/processed_images", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ image_id: imageId, filter_type: filterType, image_url: processedImage }),
    });

    this.outputTarget.src = processedImage; // Show processed image immediately
  }
}

Note:- The above example is NOT tested as yet. So, it might not work as expected.

3. How SolidCache Improves Performance

By implementing SolidCache, our Rails app intelligently serves cached WebAssembly outputs, eliminating unnecessary processing and ensuring a smoother experience.