Remix 2.0 is officially released, a modern full-stack web framework!

On September 16, the full-stack web framework Remix officially released version 2.0. After nearly 2 years of continuous efforts after the release of version 1.0, the Remix team released 19 minor versions, more than 100 patch versions, and solved thousands of issues. Issues and pull requests, finally the second major version!

Remix has the following features:

Pursue speed, user experience (UX), support any SSR/SSG, etc.

Based on basic Web technologies, such as HTML/CSS, HTTP and Web Fecth API, it can run without relying on JavaScript in most cases, so it can run in any environment, such as Web Browser, Cloudflare Workers, Serverless or Node.js, etc.

The client and server have a consistent development experience. The client code and the server code are written in one file for seamless data interaction. At the same time, based on TypeScript, type definitions can be shared across the client and server.

Built-in files are routing, dynamic routing, nested routing, resource routing, etc.

Remove any loading status such as Loading, skeleton screen, etc., all resources in the page can be preloaded (Prefetch), and the page can be loaded almost immediately

Say goodbye to the previous waterfall data acquisition method. Data is acquired in parallel on the server side to generate a complete HTML document, similar to the concurrency features of React.

Provides all the states needed to develop web pages, out-of-the-box; provides all components needed, including <Links>, <Link>, <Meta>, <Form>, <Script/>, for processing meta-information, scripts, CSS, routing and form-related content

Built-in error handling, for unexpected error handling <ErrorBoundary>and error handling thrown by developers<CatchBoundary>

Remix is a full-stack framework based on React and TypeScript developed by the React Router development team. In November 2021, Remix was officially open sourced and has received 24.6k stars on Github so far. When Remix was officially open sourced, it attracted a lot of attention in the front-end circle. It was generally considered a strong rival of Next.js. Two years later, how was the "competition" between it and Next.js?

Currently, Next.js has 112k stars, which is nearly 5 times that of Remix. Next.js has 2.79 million weekly downloads, while Remix has only 14,000. Next.js is nearly 200 times that of Remix. It can be seen that Remix has not become a strong competitor of Next.js as everyone expected, and it only has a small market share in the developer community. Despite this, Remix still attracts some developers and has its advantages and applicability in specific fields or projects.

Let’s take a look at the updates in Remix 2.0!

Updates since v1.0

In v1.8 and v1.10, Remix is aligned with React Router v6. When development of Remix began, the promise was that it would make React Router even better. This release truly delivers on that promise and aligns both libraries to use the same underlying dependencies.
In v1.11, "promises over the wire", lazy loading of modules, was released. Now, if you really want to add a loading icon to your Remix app, you can do so!
In v1.11, the "flat" route was added to simplify using nested layouts without the need for nested directories, and this became the default in v2.
In v1.13 and v1.16, Remix's support for various CSS strategies has been improved, including PostCSS, CSS modules, vanilla extract, and CSS side-effect (global) imports.
In v1.14 and v1.18, a new development server was released that supports hot updates (HMR) and hot data reload (HDR). This new development server becomes the default for v2 releases.
In the v2 version, one of the most important highlights is the new create-remixcommand line tool experience.

Updates for v2.0

major changes

Upgrade dependency requirements

Remix v2 has upgraded its minimum version support for React and Node and officially supports the following versions:

React 18
Node 18 or higher

Remove future logo

The following future flags have been removed and their behavior is now default. remix.config.jsThese settings can now be removed from the file.

v2_dev, the new development server, with HMR + HDR, can be promoted to the root future.v2_devobject in .future.v2_dev.portremix.config.jsdev
v2_errorBoundary, removed CatchBoundaryin favor of a singleErrorBoundary
v2_headers, modified the header logic in the nested routing scenario
v2_meta, modified meta()return format
v2_normalizeFormMethod, formMethodnormalize to uppercase
v2_routeConvention, routes now use the flat routing convention by default

Breaking changes/API removal

Other breaking changes/API removals in Remix v1 with deprecation warnings are listed below. If you are using the latest 1.19.3 version and don't have any console warnings, you may be able to continue doing all of this!

(1) Destructive changes/API removal

remix.config.js
will be browserBuildDirectoryrenamed toassetsBuildDirectory
deletedevServerBroadcastDelay
will be devServerPortrenamed todev.port
If this option is selected in a 1.x version, the configuration tag will be future.v2_dev.port, but in a stable 2.x version, it will bedev.port
Change the default serverModuleFormatfrom cjstoesm
deleteserverBuildTarget
will beserverBuildDirectory changed toserverBuildPath
Node built-in modules are no longer enabled by default on the server polyfilland must serverNodeBuiltinsPolyfillbe opted in viapolyfill
@remix-run/react
deleteuseTransition
Delete fetcher.typeand compressfetcher.submission
<fetcher.Form method="get">is now more accurately classified as state：“loading”, instead of state：“submitting”, to better align with the underlying GET request
Required camelCasedversionimagesrcset/imagesizes

(2) No deprecation warning

This version does not receive deprecation warnings on every breaking change or API removal. Here is a list of remaining changes you may want to review in order to upgrade to v2:

remix.config.js
Node built-in modules are no longer polyfilled in the browser by default and can be browserNodeBuiltinsPolyfillopted in through the optionpolyfill
If the configuration file is present, PostCSS/Tailwindit will be enabled by default, this feature can be disabled via the postcss and tailwind flags
@remix-run/cloudflare
Delete createCloudflareKVSessionStoragemethod
@cloudflare/workers-types v2 and v3 are no longer supported
@remix-run/dev
delete REMIX_DEV_HTTP_ORIGIN, addREMIX_DEV_ORIGIN
Delete REMIX_DEV_SERVER_WS_PORT, add dev.portor--port
Delete --no-restart/restartflag, add--manual/manual
Delete --scheme/schemeand --host/host, addREMIX_DEV_ORIGIN
Delete codemodcommand
@remix-run/eslint-config
Delete @remix-run/eslint-config/jestconfiguration
Remove magic importsESLint warning
@remix-run/netlify
@remix-run/netlifyThe adapter has been removed, it is recommended to use Netlify official adapter
@remix-run/node
By default, it is no longer fetchperformed polyfill. The application needs to call installGlobals()to installpolyfills
Instead of @remix-run/nodeexporting fetchand related APIs, apps should use versions in the global namespace
Applications need to call sourceMapSupport.install()to set up source mapping support
@remix-run/react
delete unstable_shouldReload, addshouldRevalidate
@remix-run/serve
If port 3000 is occupied and no PORT is specified, an available port remix-servewill selected
Integrated manual mode
Delete unrecordedcreateApp Node API
Keep dynamic imports in remix-servefor use by external bundles
@remix-run/vercel
@remix-run/vercelThe adapter has been removed, it is recommended to use the functions officially provided by Vercel
create-remix
Stop passing isTypeScriptto remix.initscript
remix
remove magicexports

(3) Changes in damage type

future.v2_metaRemoved the prefix from types V2_as they are now the default behavior.
V2_MetaArgs -> MetaArgs
V2_MetaDescriptor->MetaDescriptor
V2_MetaFunction->MetaFunction
V2_MetaMatch->MetaMatch
V2_MetaMatches->MetaMatches
V2_ServerRuntimeMetaArgs->ServerRuntimeMetaArgs
V2_ServerRuntimeMetaDescriptor->ServerRuntimeMetaDescriptor
V2_ServerRuntimeMetaFunction->ServerRuntimeMetaFunction
V2_ServerRuntimeMetaMatch->ServerRuntimeMetaMatch
V2_ServerRuntimeMetaMatches->ServerRuntimeMetaMatches
The following types have been adjusted to be used instead and to be consistent unknownwith anythe underlying React Router types:
Renamed useMatches()the return type RouteMatchfromUIMatch
Rename LoaderArgs/ ActionArgsto LoaderFunctionArgs/ActionFunctionArgs
Change the AppDatatype fromanyunknown
Change the type of Location["state"]( useLocation.state) fromanyunknown
Change the type of UIMatch["data"]( useMatches()[i].data) fromanyunknown
Change the type of UIMatch["handle"]( useMatches()[i].handle) from{ [k: string]: any }unknown
Change the type of Fetcher["data"]( useFetcher().data) fromanyunknown
MetaMatch.handle( meta()used in a function) anywas changed from type tounknown
AppData/ RouteHandleare no longer exported as they are just unknownaliases for

new features

New create-remixcommand line interface tools
The most notable change is that instead of using drop-down menus to select templates/stacks, you use --templateparameters and a growing list of available templates.
New --overwriteparameters
Support bunpackage managers
build.modeBuild patterns by detecting
Supports editing Node global objects through serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globalspolyfill
New redirectDocumentutility to implement redirection by reloading the document
Add in metaparameters errorso error headers etc. can be rendered
unstable_createRemixStubmeta/linksAdding functions on stubbed Remix routes is now supported
unstable_createRemixStubUsing attributes on routes is no longer supported element/errorElement. Must be used Component/ErrorBoundaryto match what is exported from the Remix routing module.

Other updates

Remix now internally uses React Router's route.lazymethods to load routing modules when navigating.
Removed the polyfills @remix-run/nodein atob/btoaand used the built-in version instead.
Decouple @remix-run/devpackages from @remix-run/css-bundletheir contents.
Now, @remix-run/css-bundlethe contents of the package are completely managed by the Remix compiler. Although it is still recommended that Remix dependencies share the same version, this change ensures no runtime errors when upgrading @remix-run/devwithout upgrading .@remix-run/css-bundle
remix-serveA free port will now be selected (if port 3000 is occupied).
If the PORT environment variable is set, r emix-servewill use that port.
Otherwise, remix-servea free port will be selected (unless port 3000 is already occupied).
Updated dependencies:
[email protected]
@remix-run/[email protected]
@remix-run/[email protected]
@remix-run/[email protected]
@remix-run/[email protected]

React Server Components？

Remix's support plan for React Server Components (RSC) is active. They hope to add support for RSC in Remix v3 and hope to demonstrate the capabilities of this technology across multiple frameworks.

RSC is an interesting and powerful feature, but Remix v2 is built on the current stable React features, so RSC is not included in Remix v2 yet. Once RSC is stable, Remix will support it.

However, "support for RSC" requires deeper integration than other previously supported React features. RSC's asynchronous components are very similar to Remix's loaders and components, and Remix decided to abandon the use of the third-party library useLoaderData in v3, so there may be differences in data loading. They hope that developers will only need to migrate existing loader code to the new asynchronous component, but need to be aware of the waterfall effect of data dependencies.

The Remix team hosted a panel with members of the React core team at Remix Conf earlier this year to discuss RSC and how we can work together to advance a stable release of the technology. They helped prepare RSC in various ways and hope to successfully integrate it into Remix.