Response Overview
Building HTTP responses by hand means remembering the right Content-Type, setting the correct status code, and encoding the body properly. The response package provides helper functions that handle these details for you.
Available Helpers
| Helper | What It Does |
|---|---|
createHtmlResponse(body) | Returns a Response with Content-Type: text/html; charset=utf-8 and a <!DOCTYPE html> prefix. |
createFileResponse(file) | Returns a Response that streams a File (or LazyFile) with the correct Content-Type, Content-Length, and ETag. Supports range requests. |
createRedirectResponse(url, status?) | Returns a redirect Response with the Location header set. Defaults to 302. |
compressResponse(response, encoding) | Compresses a response body with gzip or brotli. |
Quick Example
ts
import { createHtmlResponse } from 'remix/response/html'
import { createFileResponse } from 'remix/response/file'
import { createRedirectResponse } from 'remix/response/redirect'
// HTML response
let html = createHtmlResponse('<html><body>Hello</body></html>')
// File response with automatic Content-Type and ETag
import { openLazyFile } from 'remix/fs'
let file = await openLazyFile('./public/report.pdf')
let fileResponse = createFileResponse(file)
// Redirect
let redirect = createRedirectResponse('/dashboard', 303)Key Concepts
- ETag -- An identifier for a specific version of a resource.
createFileResponsegenerates an ETag from the file's size and last-modified time. Browsers send the ETag back in subsequent requests (viaIf-None-Match) so the server can respond with 304 Not Modified instead of resending the file. - Range requests --
createFileResponseautomatically handlesRangeheaders, responding with status 206 and the requested byte range. This enables video seeking and resumable downloads. - Content negotiation --
compressResponsechecks the request'sAccept-Encodingheader and compresses with the best supported encoding.
Import Paths
Each helper has its own sub-export for tree-shaking:
ts
import { createHtmlResponse } from 'remix/response/html'
import { createFileResponse } from 'remix/response/file'
import { createRedirectResponse } from 'remix/response/redirect'
import { compressResponse } from 'remix/response/compress'Or import everything from the main export:
ts
import {
createHtmlResponse,
createFileResponse,
createRedirectResponse,
compressResponse,
} from 'remix/response'Related
- headers -- Typed header classes used internally by these helpers
- fs -- Open files from disk to pass to
createFileResponse - lazy-file -- Deferred file reading for efficient serving
- API Reference -- Full API documentation