Two deployment modes for React Router
React Router can be deployed in two ways: Fullstack Hosting or Static Hosting. When deploying to static hosting, React Router can be deployed the same as any other single page application with React.
React Router · Getting started · all subjects
deployment
42 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Node.js with Docker template deployment platforms
The Node.js with Docker template containerized application can be deployed to: AWS ECS, Google Cloud Run, Azure Container Apps, Digital Ocean App Platform, Fly.io, or Railway.
Node with Docker Custom Server template creation command
To create a Node with Docker Custom Server template, run: npx create-react-router@latest --template remix-run/react-router-templates/node-custom-server. This template includes Server Rendering, Tailwind CSS, and a custom express server for more control.
Node with Docker Custom Server deployment platforms
The Node with Docker Custom Server containerized application can be deployed to: AWS ECS, Google Cloud Run, Azure Container Apps, Digital Ocean App Platform, Fly.io, or Railway.
Node with Docker and Postgres template creation command
To create a Node with Docker and Postgres template, run: npx create-react-router@latest --template remix-run/react-router-templates/node-postgres. This template includes Server Rendering, Postgres Database with Drizzle, Tailwind CSS, and a custom express server for more control.
Node with Docker and Postgres deployment platforms
The Node with Docker and Postgres containerized application can be deployed to: AWS ECS, Google Cloud Run, Azure Container Apps, Digital Ocean App Platform, Fly.io, or Railway.
React Router templates available on GitHub
Official React Router templates are available at https://github.com/remix-run/react-router-templates to help bootstrap an application or be used as a reference.
Vercel guide for React Router deployment
Vercel maintains their own template for React Router with a guide available at https://vercel.com/templates/react-router/react-router-boilerplate.
Cloudflare Workers guide for React Router deployment
Cloudflare maintains their own template for React Router with a guide available at https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/.
Netlify guide for React Router deployment
Netlify maintains their own template for React Router with a guide available at https://docs.netlify.com/build/frameworks/framework-setup-guides/react-router/.
EdgeOne Pages guide for React Router deployment
EdgeOne Pages maintains their own template for React Router with a guide available at https://pages.edgeone.ai/document/framework-react-router.
DeployHQ guide for React Router deployment
DeployHQ maintains a guide for deploying React Router to your own server available at https://www.deployhq.com/guides/deploy-react-router-from-github.
Hostinger Node.js hosting for React Router
Hostinger supports deploying React Router applications with server rendering on its managed Node.js hosting, including automatic deployments from GitHub. More information is available at https://www.hostinger.com/web-apps-hosting/react-router-hosting.
Pre-rendering static routes at build time
In react-router.config.ts, add a `prerender` array to pre-render certain URLs as static HTML at build time. Example: `prerender: ["/about"]`. Pre-rendered pages load without a loading spinner on refresh. This requires removing any `clientLoader` from the root to work properly.
Server-side rendering configuration
In react-router.config.ts, set `ssr: true` to enable server-side rendering. By default, Single Page Apps use `ssr: false`. With SSR enabled, data can still be fetched on client with `clientLoader` or on server with `loader`. Both rendering strategies are first-class citizens in React Router.
serverBuildFile config option
The serverBuildFile option specifies the file name of the server build output. This file should end in a .js extension and should be deployed to your server. It defaults to 'index.js'.
prerender config option
The prerender option is an array of URLs to prerender to HTML files at build time. It can be specified as a static array like ['/','about','/contact'], as a dynamic function that returns paths, or as an object with paths array and concurrency number for concurrent prerendering.
What pre-rendering does
Pre-rendering allows you to speed up page loads for static content by rendering pages at build time instead of at runtime.
Enable pre-rendering with prerender config
Pre-rendering is enabled via the prerender config in react-router.config.ts. The simplest configuration is a boolean true which will pre-render all of the application's static paths based on routes.ts.
Boolean true prerender does not include dynamic paths
When prerender is set to boolean true, it will not include any dynamic paths (i.e., /blog/:slug) because the parameter values are unknown.
Prerender with array of specific paths
To configure specific paths including dynamic values, you can specify prerender as an array of paths. This allows you to manually define which paths should be pre-rendered, including those with dynamic segments.
Prerender with function and getStaticPaths
You can provide prerender as a function that returns an array of paths. This function receives a getStaticPaths method that you can use to automatically include all static paths in your application without manually adding them.
Pre-rendering concurrency configuration
By default, pages are pre-rendered one path at a time. To enable concurrency, move the prerender config into a prerender.paths field and specify concurrency in prerender.concurrency. The concurrency value controls how many paths are pre-rendered in parallel.
Pre-rendering with ssr:true
When pre-rendering with ssr:true (the default), you have a runtime server but choose to pre-render certain paths for quicker response times. Routes that are not pre-rendered will still be server rendered as usual when requests come to the deployed server.
Pre-rendered routes use same loader functions as server rendering
There is no extra application API for pre-rendering. Routes being pre-rendered use the same route loader functions as server rendering. Instead of a request coming to your route on a deployed server, the build creates a new Request() and runs it through your app just like a server would.
Pre-rendering static file output format
The rendered result is written to the build/client directory. Two files are generated for each path: [url].html (HTML file for initial document requests) and [url].data (file for client side navigation browser requests).
Pre-rendering development behavior
During development, pre-rendering doesn't save the rendered results to the public directory. This only happens when running react-router build.
Pre-rendering with ssr:false
To disable runtime server rendering and configure pre-rendering to be served from a static file server, set ssr:false. When ssr:false is set without a prerender config, this is referred to as SPA Mode.
SPA Mode rendering behavior
In SPA Mode (ssr:false without prerender), a single HTML file is rendered that is capable of hydrating for any application path. It renders only the root route into the HTML file and determines which child routes to load based on the browser URL during hydration. A loader is permitted on the root route only in SPA Mode.
Pre-rendering with ssr:false restrictions
You cannot include actions or headers functions in any routes when ssr:false is set because there will be no runtime server to run them on. When pre-rendering paths with ssr:false, matched routes can have loaders.
Pre-rendering with SPA fallback
You can combine ssr:false with a limited prerender config to pre-render some paths while using a SPA fallback for others. React Router outputs a SPA Fallback HTML file that can be served to hydrate any non-pre-rendered paths.
SPA fallback file location rules
The SPA fallback will be written to build/client/index.html if the / path is not pre-rendered, or to build/client/__spa-fallback.html if the / path is pre-rendered.
Invalid exports when ssr:false
When pre-rendering with ssr:false, React Router errors at build time if you have invalid exports. Headers and action functions are prohibited in all routes. When using ssr:false without prerender (SPA Mode), a loader is permitted on the root route only. When using ssr:false with prerender, a loader is permitted on any route matched by a prerender path.
Parent loaders with pre-rendered child routes
If you use a loader on a pre-rendered route that has child routes, you must ensure the parent loaderData can be determined at run-time by either pre-rendering all child routes so the parent loader is called at build-time for each child route path and rendered into a .data file, or by using a clientLoader on the parent that can be called at run-time for non-pre-rendered child paths.
Static pre-rendering definition
Static pre-rendering is a technique that renders pages at build time instead of at runtime, allowing them to be served as static HTML files. This speeds up page loads for static content.
Pre-rendering configuration example with boolean true
Example configuration: export default { prerender: true, } satisfies Config; This will pre-render all static paths based on routes.ts.
Pre-rendering configuration example with path array
Example configuration: export default { prerender: [ "/", "/blog", ...slugs.map((s) => `/blog/${s}`), ], } satisfies Config; This allows you to pre-render specific paths including dynamic values.
Pre-rendering configuration example with async function
Example configuration: export default { async prerender({ getStaticPaths }) { let slugs = await getPostSlugsFromCMS(); return [ ...getStaticPaths(), ...slugs.map((s) => `/blog/${s}`), ]; }, } satisfies Config; This uses getStaticPaths to include all static paths and adds dynamic paths from an async source.
Pre-rendering configuration example with concurrency
Example configuration: export default { prerender: { paths: [ "/", "/blog", ...slugs.map((s) => `/blog/${s}`), ], concurrency: 4, }, } satisfies Config; This enables pre-rendering of multiple paths in parallel with a concurrency of 4.
Pre-rendering with ssr:true configuration example
Example configuration: export default { ssr: true, prerender: ["/", "/blog", "/blog/popular-post"], } satisfies Config; This pre-renders specific paths while maintaining a runtime server for other paths.
Pre-rendering with ssr:false configuration example
Example configuration: export default { ssr: false, prerender: true, } satisfies Config; This disables runtime server rendering and pre-renders all static routes for deployment to a static file server.
Pre-rendering with SPA fallback configuration examples
Example 1: export default { ssr: false, prerender: ["/about-us"], } satisfies Config; SPA fallback is written to build/client/index.html. Example 2: export default { ssr: false, prerender: ["/", "/about-us"], } satisfies Config; SPA fallback is written to build/client/__spa-fallback.html.