默认情况下,Remix 将为你处理客户端应用的 hydrating(水合)。如果你想自定义此行为,可以运行 npx remix reveal
来生成优先的 app/entry.client.tsx
(或 .jsx
)。此文件是浏览器的入口点,负责在你的 服务器入口模块 中对服务器生成的标记进行水合;但是,你也可以在此处初始化任何其他客户端代码。
¥By default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run npx remix reveal
to generate a app/entry.client.tsx
(or .jsx
) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your server entry module; however, you can also initialize any other client-side code here.
通常,此模块使用 ReactDOM.hydrateRoot
来补充已在服务器上生成的标记,并将其添加到你的 服务器入口模块 中。
¥Typically, this module uses ReactDOM.hydrateRoot
to hydrate the markup already generated on the server in your server entry module.
这是一个基本示例:
¥Here's a basic example:
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
这是在浏览器中运行的第一段代码。你可以初始化客户端库、添加仅客户端使用的提供程序等。
¥This is the first piece of code that runs in the browser. You can initialize client side libraries, add client-only providers, etc.