Remix on Launch

Remix is a full-stack web framework that enhances user experience by leveraging web standards for a fast, slick, and resilient interface.

This document covers the key Remix features supported in Contentstack Launch, including Server-Side Rendering (SSR), caching, runtime environments, and application specifications.

Launch fully supports Remix’s Server-Side Rendering (SSR) approach, which improves SEO performance by rendering pages on the server before sending them to the client.

After the server sends the pre-rendered page to the client, Remix hydrates the application, enabling interactivity and dynamic behavior.

Additional Resource: Follow the Quick Start Guide with Remix for a step-by-step walkthrough to deploy your Remix project on Launch as an SSR-based application.

Launch applications must respond to incoming HTTP requests within 30 seconds. If a request exceeds this limit, it will time out and return an HTTP 500 error.

Note: For error code 500, please refer to the timed-out errors in the Server Logs tab to understand and address the issue.

The memory size for a Launch application is 1024 MB.

The Launch runtime environment leverages Node.js to power its execution environment.

The Launch Remix file system refers to the Launch application's ability to interact with the file system, including read and write operations. By default, Launch applications operate on a read-only file system, except for the designated /tmp directory, which allows write operations as needed.

The /tmp directory is a temporary file system accessible to every Launch serverless runtime, offering up to 500 MB of storage.

Note: The data stored in /tmp is non-persistent and is automatically deleted upon request completion.

The Launch application supports the x86_64 instruction set.

By default, when deploying Remix with Server-Side Rendering (SSR) on Launch, pages are cached on Launch’s CDN. This allows subsequent requests to the same page to be served quickly from the cache, reducing load times and improving performance without regenerating the page on each request.

You can configure this behavior by returning appropriate cache headers from your server-side implementation in Remix. In the following example, we modify the Express.js route that handles Remix engine requests in server.ts to regenerate the page every 5 minutes. You can set a different cache setting for each route as well. You can learn more about it here.

// server.ts

import { json } from "@remix-run/node"; 

import type { LoaderArgs } from "@remix-run/node"; 


export const loader = async ({ request }: LoaderArgs) => {

  const htmlContent = "Your rendered page content"; // Respond with cache-control headers (max-age=0 and s-maxage=300) 

  return new Response(htmlContent, { 

    headers: { 

      "Cache-Control": "max-age=0, s-maxage=300", // Cache for 5 minutes 

      "Content-Type": "text/html", // Ensure proper content type 

    }, 

  }); 

};

As a Remix SSR user, you can also leverage Launch’s cache revalidation feature to render new content updates on demand.

Note: Please ensure that you revalidate the cache for both the data endpoint backing the content and the page URL. This is important if you have cached API endpoints delivering data for the page.