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 contentBuilt-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-remix
command 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.js
These settings can now be removed from the file.
-
v2_dev
, the new development server, with HMR + HDR, can be promoted to the rootfuture.v2_dev
object in .future.v2_dev.port
remix.config.js
dev
-
v2_errorBoundary
, removedCatchBoundary
in favor of a singleErrorBoundary
-
v2_headers
, modified the header logic in the nested routing scenario -
v2_meta
, modifiedmeta()
return format -
v2_normalizeFormMethod
,formMethod
normalize 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
browserBuildDirectory
renamed toassetsBuildDirectory
-
delete
devServerBroadcastDelay
-
will be
devServerPort
renamed 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
serverModuleFormat
fromcjs
toesm
-
delete
serverBuildTarget
-
will be
serverBuildDirectory
changed toserverBuildPath
-
Node built-in modules are no longer enabled by default on the server
polyfill
and mustserverNodeBuiltinsPolyfill
be opted in viapolyfill
-
@remix-run/react
-
delete
useTransition
-
Delete
fetcher.type
and compressfetcher.submission
-
<fetcher.Form method="get">
is now more accurately classified asstate:“loading”
, instead ofstate:“submitting”
, to better align with the underlying GET request -
Required
camelCased
versionimagesrcset/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
browserNodeBuiltinsPolyfill
opted in through the optionpolyfill
-
If the configuration file is present,
PostCSS/Tailwind
it will be enabled by default, this feature can be disabled via the postcss and tailwind flags -
@remix-run/cloudflare
-
Delete
createCloudflareKVSessionStorage
method -
@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
, adddev.port
or--port
-
Delete
--no-restart/restart
flag, add--manual/manual
-
Delete
--scheme/scheme
and--host/host
, addREMIX_DEV_ORIGIN
-
Delete
codemod
command -
@remix-run/eslint-config
-
Delete
@remix-run/eslint-config/jest
configuration -
Remove magic
imports
ESLint warning -
@remix-run/netlify
-
@remix-run/netlify
The adapter has been removed, it is recommended to use Netlify official adapter -
@remix-run/node
-
By default, it is no longer
fetch
performedpolyfill
. The application needs to callinstallGlobals()
to installpolyfills
-
Instead of
@remix-run/node
exportingfetch
and 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-serve
will selected -
Integrated manual mode
-
Delete unrecorded
createApp Node API
-
Keep dynamic imports in
remix-serve
for use by external bundles -
@remix-run/vercel
-
@remix-run/vercel
The adapter has been removed, it is recommended to use the functions officially provided by Vercel -
create-remix
-
Stop passing
isTypeScript
toremix.init
script -
remix
-
remove magic
exports
(3) Changes in damage type
-
future.v2_meta
Removed the prefix from typesV2_
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
unknown
withany
the underlying React Router types: -
Renamed
useMatches()
the return typeRouteMatch
fromUIMatch
-
Rename
LoaderArgs
/ActionArgs
toLoaderFunctionArgs
/ActionFunctionArgs
-
Change the
AppData
type fromany
unknown
-
Change the type of
Location["state"]
(useLocation.state
) fromany
unknown
-
Change the type of
UIMatch["data"]
(useMatches()[i].data
) fromany
unknown
-
Change the type of
UIMatch["handle"]
(useMatches()[i].handle
) from{ [k: string]: any }
unknown
-
Change the type of
Fetcher["data"]
(useFetcher().data
) fromany
unknown
-
MetaMatch.handle
(meta()
used in a function)any
was changed from type tounknown
-
AppData
/RouteHandle
are no longer exported as they are justunknown
aliases for
new features
-
New
create-remix
command line interface tools -
The most notable change is that instead of using drop-down menus to select templates/stacks, you use
--template
parameters and a growing list of available templates. -
New
--overwrite
parameters -
Support
bun
package managers -
build.mode
Build patterns by detecting -
Supports editing Node global objects through
serverNodeBuiltinsPolyfill.globals
/browserNodeBuiltinsPolyfill.globals
polyfill
-
New
redirectDocument
utility to implement redirection by reloading the document -
Add in
meta
parameterserror
so error headers etc. can be rendered -
unstable_createRemixStub
meta/links
Adding functions on stubbed Remix routes is now supported -
unstable_createRemixStub
Using attributes on routes is no longer supportedelement/errorElement
. Must be usedComponent/ErrorBoundary
to match what is exported from the Remix routing module.
Other updates
-
Remix now internally uses React Router's
route.lazy
methods to load routing modules when navigating. -
Removed the polyfills
@remix-run/node
inatob/btoa
and used the built-in version instead. -
Decouple
@remix-run/dev
packages from@remix-run/css-bundle
their contents. -
Now,
@remix-run/css-bundle
the 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/dev
without upgrading .@remix-run/css-bundle
-
remix-serve
A free port will now be selected (if port 3000 is occupied). -
If the PORT environment variable is set, r
emix-serve
will use that port. -
Otherwise,
remix-serve
a free port will be selected (unless port 3000 is already occupied). -
Updated dependencies:
-
@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.
Fined 200 yuan and more than 1 million yuan confiscated You Yuxi: The importance of high-quality Chinese documents Musk's hard-core migration server Solon for JDK 21, virtual threads are incredible! ! ! TCP congestion control saves the Internet Flutter for OpenHarmony is here The Linux kernel LTS period will be restored from 6 years to 2 years Go 1.22 will fix the for loop variable error Google celebrates its 25th anniversary Svelte has built a "new wheel" - runes