@remix-run/server-runtime
Advanced tools
@remix-run/server-runtime is a package that provides server-side utilities and abstractions for building web applications with Remix. It allows developers to handle server-side rendering, data loading, and other server-side logic in a structured and efficient manner.
Server-Side Rendering
This feature allows you to handle server-side rendering with Remix. The `createRequestHandler` function is used to create a request handler that can be integrated with an Express server.
const { createRequestHandler } = require('@remix-run/server-runtime');
const express = require('express');
const app = express();
app.all('*', createRequestHandler({
getLoadContext() {
// Provide context for loaders
return {};
}
}));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});Data Loading
This feature allows you to load data on the server side before rendering a page. The `json` function is used to return JSON responses from loaders.
const { json } = require('@remix-run/server-runtime');
async function loader({ request }) {
const data = await fetchDataFromAPI();
return json(data);
}Error Handling
This feature allows you to handle errors in your server-side logic. The `json` function can be used to return error responses with appropriate status codes.
const { json } = require('@remix-run/server-runtime');
async function loader({ request }) {
try {
const data = await fetchDataFromAPI();
return json(data);
} catch (error) {
return json({ error: error.message }, { status: 500 });
}
}Next.js is a popular React framework that provides server-side rendering, static site generation, and API routes. It offers a more opinionated and integrated approach compared to @remix-run/server-runtime, which is more focused on providing utilities for server-side logic in Remix applications.
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. While it does not provide server-side rendering out of the box, it can be used in conjunction with other libraries to achieve similar functionality to @remix-run/server-runtime.
Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. Like Express, it does not provide server-side rendering out of the box but can be extended with middleware to achieve similar functionality.
Remix supports multiple server runtimes:
Support for each runtime is provided by a corresponding Remix package:
This package defines a "Remix server runtime interface" that each runtime package must conform to.
Each Remix server runtime package MUST:
interface.tsreexport.tsEach Remix server runtime package MAY:
v2.2.0
Date: 2023-10-31
Remix 2.2.0 adds unstable support for Vite for Node-based apps! See our announcement blog post and the Future > Vite page in the Remix docs for more details.
You can try it out today with two new (unstable) templates:
# minimal server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite
# custom server (Express example)
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express
@remix-run/dev
unstable_vitePlugin: The new Remix Vite pluginunstable_createViteServer: Creates a Vite server in middleware mode for interop with custom serversunstable_loadViteServerBuild: Allows your custom server to delegate SSR requests to Vite during developmentcreateRequestHandler: Now also allows the build argument to be a function that will be used to dynamically load new builds for each request during developmentnpm interopPer this RFC, we've introduced some new APIs that give you more granular control over your fetcher behaviors:
useFetcher({ key: string }), which allows you to access the same fetcher instance from different components in your application without prop-drillinguseFetchers so that they can be looked up by keyForm and useSubmit now support optional navigate/fetcherKey props/params to allow kicking off a fetcher submission under the hood with an optionally user-specified key
<Form method="post" navigate={false} fetcherKey="my-key">submit(data, { method: "post", navigate: false, fetcherKey: "my-key" })useFetchers() or useFetcher({ key }) to look it up elsewherePer the same RFC as above, we've introduced a new future.v3_fetcherPersist flag that allows you to opt-into the new fetcher persistence/cleanup behavior. Instead of being immediately cleaned up on unmount, fetchers will persist until they return to an idle state. This makes pending/optimistic UI much easier in scenarios where the originating fetcher needs to unmount.
useFetchers() API was always supposed to only reflect in-flight fetcher information for pending/optimistic UI -- it was not intended to reflect fetcher data or hang onto fetchers after they returned to an idle stateuseFetchers() after completion - they served no purpose in there since you can access the data via useFetcher().dataidle state
useFetchers while in-flight so you can still access pending/optimistic data after unmountkey, then it's result will be processed, even if the originating fetcher was unmountedvite support (#7590)key APIs and navigate/fetcherKey params for navigational APIs (#10960)future.v3_fetcherPersist flag (#10962)@remix-run/express: Allow the Express adapter to work behind a proxy when using app.enable('trust proxy') (#7323)
req.get('host') to construct the Remix Request, but that does not respect X-Forwarded-Hostreq.hostname which will respect X-Forwarded-Host@remix-run/react: Fix warning that could be inadvertently logged when using route files with no default export (#7745)create-remix: Support local tarballs with a .tgz extension which allows direct support for pnpm pack tarballs (#7649)create-remix: Default the Remix app version to the version of create-remix being used (#7670)
npm create remix@nightlycreate-remix@remix-run/architect@remix-run/cloudflare@remix-run/cloudflare-pages@remix-run/cloudflare-workers@remix-run/css-bundle@remix-run/deno@remix-run/dev@remix-run/eslint-config@remix-run/express@remix-run/node@remix-run/react@remix-run/serve@remix-run/server-runtime@remix-run/testingFull Changelog: v2.1.0...v2.2.0
FAQs
Server runtime for Remix
The npm package @remix-run/server-runtime receives a total of 670,761 weekly downloads. As such, @remix-run/server-runtime popularity was classified as popular.
We found that @remix-run/server-runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.