This commit is contained in:
tao.chen
2026-07-31 09:35:53 +08:00
parent 62c7d7465e
commit 5c61f1814e
12 changed files with 737 additions and 259 deletions
+22
View File
@@ -16,6 +16,28 @@ server {
# 指定 Docker 内置 DNS 解析器,并设置 30 秒缓存
resolver 127.0.0.11 valid=30s ipv6=off;
location / {
root /usr/share/nginx/html; # 前端静态文件存放在容器中的路径
index index.html index.htm;
# 核心:支持 SPA 路由(前端 React Router / Vue Router 刷新不报 404
try_files $uri $uri/ /index.html;
}
#(可选)针对静态文件资源加长期缓存优化
# location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff|woff2)$ {
# root /usr/share/nginx/html;
# expires 2h; # 前端静态缓存2小时
# add_header Cache-Control "public, no-transform";
# }
location /api/ {
proxy_pass http://backend:8000/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# =========================================================================
# 1. RustFS 对象存储服务转发 (/storage/)
# =========================================================================
@@ -1,67 +0,0 @@
{
"cells": [
{
"cell_type": "markdown",
"id": "5f4293c4",
"metadata": {},
"source": [
"# 新建模型实验\\n在这里开始数据探索与模型构建。"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "694d9330",
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Hello, Model Platform!\n"
]
}
],
"source": [
"print('Hello, Model Platform!')"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "6c70739e-0bd2-413d-bb0e-68ed8951d4bb",
"metadata": {},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"id": "a1574172-4d3c-40cd-860e-f0f0b4822c49",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.13.11"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
@@ -1,9 +0,0 @@
"""模型实验开发平台构建脚本。"""
def main() -> None:
print("Hello, Model Platform!")
if __name__ == "__main__":
main()
@@ -1,89 +0,0 @@
{
"cells": [
{
"cell_type": "markdown",
"id": "5f4293c4",
"metadata": {},
"source": [
"# 新建模型实验\\n在这里开始数据探索与模型构建。"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "694d9330",
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Hello, Model Platform!\n"
]
}
],
"source": [
"print('Hello, Model Platform!')"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "6c70739e-0bd2-413d-bb0e-68ed8951d4bb",
"metadata": {},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": 3,
"id": "a1574172-4d3c-40cd-860e-f0f0b4822c49",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"'2026-07-30 10:38:49.218085'"
]
},
"execution_count": 3,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from datetime import datetime\n",
"str(datetime.now())"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "2d521122-0ee9-4f39-b0a2-6d3a3b004916",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.13.11"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
@@ -1,9 +0,0 @@
"""模型实验开发平台构建脚本。"""
def main() -> None:
print("Hello, Model Platform!")
if __name__ == "__main__":
main()
@@ -0,0 +1,122 @@
---
name: react-router
description: Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.
license: MIT
---
# React Router
React Router is mode-specific. Before changing an app, identify the mode, load the matching reference, then read the installed docs for the installed package version.
## Identify the Mode
Do not apply Framework/Data patterns to a Declarative app unless you are intentionally migrating modes.
### Framework Mode
Use Framework Mode guidance when you see:
- `@react-router/dev` in dependencies
- `react-router.config.ts`
- `app/routes.ts`
- `app/entry.server.tsx` and/or `app/entry.client.tsx` files
- route modules under `app/routes/`
- route exports like `loader`, `action`, `clientLoader`, `clientAction`, `ErrorBoundary`, `meta`, `links`, or `headers`
- imports from `./+types/...`
- the React Router Vite plugin from `@react-router/dev/vite`
Framework examples usually use the default `app/` directory, but check `react-router.config.ts` for a custom `appDirectory` before assuming exact paths.
Then read `references/framework-mode.md`.
### Data Mode
Use Data Mode guidance when you see:
- `createBrowserRouter`, `createHashRouter`, `createMemoryRouter`, or `createStaticRouter`
- `<RouterProvider router={router}>`
- route objects with properties like `path`, `children`, `loader`, `action`, `Component`, `ErrorBoundary`, or `lazy`
- data APIs without the Framework Vite plugin
Then read `references/data-mode.md`.
### Declarative Mode
Use Declarative Mode guidance when you see:
- `<BrowserRouter>`, `<HashRouter>`, or `<MemoryRouter>`
- `<Routes>` and `<Route>` JSX route configuration
- route components passed with `element={<Component />}`
- no data router, no route module convention, and no loaders/actions
Then read `references/declarative-mode.md`.
### RSC Framework and RSC Data Modes
React Server Components support is unstable and exists in both Framework and Data variants. Use RSC guidance when you see:
- `unstable_reactRouterRSC`
- `@vitejs/plugin-rsc`
- `unstable_RSCRouteConfig`
- RSC entry files such as `entry.rsc`
- `ServerComponent`, `ServerErrorBoundary`, `ServerLayout`, or `ServerHydrateFallback`
- React directives or boundary packages such as `"use client"`, `"server-only"`, or `"client-only"`
For RSC Framework, read both `references/framework-mode.md` and `references/rsc.md`.
For RSC Data, read both `references/data-mode.md` and `references/rsc.md`.
## Use Installed Docs as Source of Truth
React Router ships markdown docs in the package so guidance can match the installed version:
```txt
node_modules/react-router/docs/
```
Key docs paths:
```txt
node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/
```
When this skill references `react-router/docs/...`, read the matching file under `node_modules/react-router/docs/`. If the installed version does not include local docs, use the repo `docs/` directory when working inside the React Router repository; in a consuming app, fall back to version-matched website docs.
Most docs include a mode marker near the top:
```txt
[MODES: framework, data, declarative]
```
Only apply a doc when its mode marker matches the app mode. If a task spans modes, prefer the section or file that matches the current app.
RSC is documented primarily in:
```txt
node_modules/react-router/docs/how-to/react-server-components.md
```
## Skill References
Load the relevant reference after identifying the mode:
| Reference | Use When |
| -------------------------------- | --------------------------------------------- |
| `references/framework-mode.md` | Framework Mode or RSC Framework base behavior |
| `references/data-mode.md` | Data Mode or RSC Data base behavior |
| `references/declarative-mode.md` | Declarative Mode |
| `references/rsc.md` | Any unstable RSC app |
## Mode Migration Doc Index
If the user explicitly asks to switch modes, read the target mode reference plus the migration-relevant docs:
| Migration | Docs to read |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Declarative → Data | `react-router/docs/start/modes.md`, `react-router/docs/start/data/routing.md`, `react-router/docs/start/data/data-loading.md`, `react-router/docs/start/data/actions.md` |
| Declarative/Data → Framework | `react-router/docs/start/modes.md`, `react-router/docs/start/framework/routing.md`, `react-router/docs/start/framework/route-module.md`, `react-router/docs/how-to/route-module-type-safety.md` |
| Framework SPA/SSR/pre-render changes | `react-router/docs/start/framework/rendering.md`, `react-router/docs/how-to/spa.md`, `react-router/docs/how-to/pre-rendering.md`, `react-router/docs/start/framework/data-loading.md`, `react-router/docs/start/framework/actions.md` |
| Future flags/upgrades | `react-router/docs/upgrading/future.md` and relevant files under `react-router/docs/upgrading/` |
@@ -0,0 +1,165 @@
# Data Mode
Data Mode uses data routers such as `createBrowserRouter` and renders with `<RouterProvider>`. It gives an app route objects, loaders, actions, pending UI, fetchers, and SSR primitives without adopting the Framework Vite plugin or route-module file conventions.
Use this reference after the main skill identifies a Data Mode app.
## Read the Local Docs by Mode
Start with:
```txt
react-router/docs/start/modes.md
react-router/docs/start/data/index.md
```
Then use the Data docs under:
```txt
react-router/docs/start/data/
```
Those files cover installation, route objects, routing, data loading, actions, navigation, pending UI, and testing. For task-specific details, read relevant files in:
```txt
react-router/docs/how-to/
react-router/docs/explanation/
```
Always check the `[MODES: data, ...]` marker in a doc before applying it.
## Data Router Shape
Typical setup:
```tsx
import { createBrowserRouter, RouterProvider } from "react-router";
const router = createBrowserRouter([
{
path: "/",
Component: Root,
loader: rootLoader,
children: [
{ index: true, Component: Home },
{
path: "projects/:projectId",
Component: Project,
loader: projectLoader,
},
],
},
]);
root.render(<RouterProvider router={router} />);
```
Look for route object arrays and APIs such as:
- `createBrowserRouter`
- `createHashRouter`
- `createMemoryRouter`
- `RouterProvider`
- `loader`
- `action`
- `Component`
- `ErrorBoundary`
- `lazy`
- `children`
## Route Objects and Routing
Before editing route configuration, read:
```txt
react-router/docs/start/data/routing.md
react-router/docs/start/data/route-object.md
```
Rules:
- Keep route objects outside render when possible.
- Use nested routes for shared layouts and data boundaries.
- Use index routes for default child content.
- Use dynamic segments and splats according to route-object docs.
- Prefer `Component`/`ErrorBoundary` route object properties in Data Mode examples unless the existing app uses `element` consistently.
## Data and Mutations
Before working on data loading or mutations, read:
```txt
react-router/docs/start/data/data-loading.md
react-router/docs/start/data/actions.md
```
Rules:
- Load route data with route `loader` functions.
- Mutate route data with route `action` functions.
- Prefer loaders/actions over route-level `useEffect` fetching.
- Use `request`, `params`, and returned/throwable Responses as described in the docs.
- Let React Router revalidate after actions unless there is a documented reason to customize revalidation.
Common patterns:
- Validation failure from an action: return `data({ errors, values }, { status: 400 })`, then render errors with `useActionData()` or `fetcher.data`.
- Missing record in a loader: throw `data("Not Found", { status: 404 })` and render the route `ErrorBoundary`.
- Search/filter data: parse `new URL(request.url).searchParams` in the loader so the URL is shareable and bookmarkable.
## Forms, Fetchers, and Pending UI
For forms and pending UI, read:
```txt
react-router/docs/start/data/actions.md
react-router/docs/start/data/pending-ui.md
react-router/docs/how-to/fetchers.md
react-router/docs/explanation/form-vs-fetcher.md
```
Rules of thumb:
- Search/filter form that updates the URL: `<Form method="get">`.
- Mutation that should change URL/history or redirect after completion: `<Form method="post">`.
- Mutation that should keep the user on the same page: `useFetcher` / `<fetcher.Form>`.
- Optimistic UI: derive from `fetcher.formData` or `navigation.formData`.
## Navigation and URL State
Before changing navigation or search params, read:
```txt
react-router/docs/start/data/navigating.md
react-router/docs/how-to/search-params.md
react-router/docs/explanation/location.md
```
Rules:
- Use `<Link>`/`<NavLink>` for user-initiated internal navigation.
- Use `redirect` in loaders/actions when navigation follows data loading or mutations.
- Use `useNavigate` for imperative client-side event navigation.
- Treat URL params as strings and validate/parse them.
- Preserve unrelated search params unless intentionally resetting them.
## SSR in Data Mode
Data Mode SSR is manual and lower-level than Framework Mode. Before implementing or changing SSR, read the Data Mode custom/SSR docs and match existing server abstractions.
Start with:
```txt
react-router/docs/start/data/custom.md
```
Look for APIs like `createStaticHandler`, `createStaticRouter`, `StaticRouterProvider`, and hydration data handling in the current app before changing anything.
## RSC Data
If this Data Mode app uses `unstable_RSCRouteConfig`, RSC route config, or low-level RSC server APIs, also read:
```txt
references/rsc.md
react-router/docs/how-to/react-server-components.md
```
@@ -0,0 +1,123 @@
# Declarative Mode
Declarative Mode is React Router's simplest mode. It uses router components like `<BrowserRouter>` and JSX routes with `<Routes>`/`<Route>`. It does not provide loaders, actions, fetchers, or data-router pending UI.
Use this reference after the main skill identifies a Declarative Mode app.
## Read the Local Docs by Mode
Start with:
```txt
react-router/docs/start/modes.md
react-router/docs/start/declarative/index.md
```
Then use the Declarative docs under:
```txt
react-router/docs/start/declarative/
```
Those files cover installation, routing, navigation, and URL values. For conceptual details, read relevant files in:
```txt
react-router/docs/explanation/
```
Always check the `[MODES: declarative, ...]` marker in a doc before applying it.
## Declarative Router Shape
Typical setup:
```tsx
import { BrowserRouter, Routes, Route } from "react-router";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</BrowserRouter>
);
}
```
Look for APIs such as:
- `<BrowserRouter>`
- `<HashRouter>`
- `<MemoryRouter>`
- `<Routes>`
- `<Route>`
- `element={<Component />}`
- `useRoutes`
## Routing
Before editing routes, read:
```txt
react-router/docs/start/declarative/routing.md
```
Rules:
- Use `<Routes>` and `<Route>` for route configuration.
- Use nested routes with `<Outlet>` for shared layout.
- Use index routes for default child UI.
- Use route params and splats according to the declarative routing docs.
- Do not add route object loaders/actions to a Declarative router.
## Navigation
Before changing navigation, read:
```txt
react-router/docs/start/declarative/navigating.md
```
Rules:
- Use `<Link>` or `<NavLink>` for user-initiated internal navigation.
- Use `NavLink` when active styling matters.
- Use `useNavigate` for imperative navigation from event handlers or effects.
- Do not use plain `<a href>` for internal navigation unless intentionally forcing a full document navigation.
## URL Values
Before changing params, search params, or location state, read:
```txt
react-router/docs/start/declarative/url-values.md
react-router/docs/explanation/location.md
```
Rules:
- Use `useParams` for dynamic route params.
- Use `useSearchParams` for query string state.
- Use `useLocation` for the current location object and navigation state.
- Validate and parse URL params; they are strings and can be absent.
- Preserve unrelated search params unless intentionally resetting them.
## Mode Boundary
Declarative Mode does not have Data/Framework APIs such as:
- `loader`
- `action`
- `<Form>`
- `useFetcher`
- `useNavigation`
- route module exports
- generated `./+types` route types
If the user asks for route data loading, DB/API-backed data, CRUD, form mutations, validation returned from submissions, revalidation, pending UI, optimistic UI, or fetchers, recommend Data Mode or Framework Mode depending on how much structure they want. Ask before migrating unless they already requested it.
@@ -0,0 +1,213 @@
# Framework Mode
Framework Mode is React Router's full-stack mode. It uses the React Router Vite plugin, route config in `app/routes.ts`, route modules, generated route types, and rendering strategies such as SSR, SPA mode, and pre-rendering.
Use this reference after the main skill identifies a Framework Mode app.
## Read the Local Docs by Mode
Start with:
```txt
react-router/docs/start/modes.md
react-router/docs/start/framework/index.md
```
Then use the Framework docs under:
```txt
react-router/docs/start/framework/
```
Those files cover installation, routing, route modules, data loading, actions, navigation, pending UI, rendering, deploying, and testing. For task-specific details, read relevant files in:
```txt
react-router/docs/how-to/
react-router/docs/explanation/
```
Always check the `[MODES: framework, ...]` marker in a doc before applying it.
## Framework Shape
Examples usually assume the default `appDirectory` of `app`. Check `react-router.config.ts` before assuming exact paths.
Look for these files and conventions:
```txt
react-router.config.ts
app/root.tsx
app/routes.ts
app/routes/**/*.tsx
route modules importing from ./+types/...
```
Typical route module:
```tsx
import type { Route } from "./+types/product";
export async function loader({ params }: Route.LoaderArgs) {
return { product: await getProduct(params.productId) };
}
export default function Product({ loaderData }: Route.ComponentProps) {
return <h1>{loaderData.product.name}</h1>;
}
```
## Route Configuration
Framework apps use `app/routes.ts`. Many apps use file-system routing via `flatRoutes()`, but manual route config is also supported.
Before editing routes, read:
```txt
react-router/docs/start/framework/routing.md
```
If the app uses file-route conventions, read:
```txt
react-router/docs/how-to/file-route-conventions.md
```
## Route Modules
Route modules are the main unit of Framework Mode. Before adding or changing route exports, read:
```txt
react-router/docs/start/framework/route-module.md
```
Common exports include:
| Export | Use |
| --------------------------------- | ------------------------------------------------------------------- |
| `default` | Route component rendered for the match |
| `loader` | Server data loading for SSR/pre-rendering/server data requests |
| `clientLoader` | Browser-only data loading or supplementing server loader data |
| `action` | Server mutation called by `<Form>`, `useSubmit`, or fetchers |
| `clientAction` | Browser-only mutation or client-side wrapper around a server action |
| `ErrorBoundary` | UI for errors thrown by this route's loaders/actions/component |
| `HydrateFallback` | Initial fallback while client loader hydration runs |
| `links` / `meta` | Route document links and metadata |
| `handle` | Arbitrary route metadata consumed via `useMatches` |
| `shouldRevalidate` | Overrides default loader revalidation behavior |
| `middleware` / `clientMiddleware` | Server/client request pipeline hooks when enabled |
Use generated `Route.*` types from `./+types/<route>` for route module args and props.
## Layout and Root Route Rules
- `app/root.tsx` is the root route and should contain global document/app shell concerns.
- Put global providers, app-wide nav, app-wide footer, scripts/meta/links, and document structure in `root.tsx` when appropriate.
- Use nested routes/layout routes for section-specific layouts.
- Do not flatten routes that should share UI or data boundaries.
Useful docs:
```txt
react-router/docs/explanation/special-files.md
react-router/docs/start/framework/routing.md
```
## Data and Mutations
Before working on route data:
```txt
react-router/docs/start/framework/data-loading.md
react-router/docs/start/framework/actions.md
```
Framework rules:
- Load route data with `loader` or `clientLoader`.
- Mutate route data with `action` or `clientAction`.
- Prefer route loaders/actions over ad hoc `useEffect` fetching for route data.
- Use `data()`/Responses and redirects according to the docs.
- Let React Router revalidate after actions unless the docs point you to `shouldRevalidate`.
- In SSR/server data routes, keep Node-only/database code in server-only modules and call it from `loader`/`action`, not from browser-rendered component code.
Common patterns:
- Validation failure from an action: return `data({ errors, values }, { status: 400 })`, then render errors from `Route.ComponentProps["actionData"]` or `fetcher.data`.
- Missing record in a loader: throw `data("Not Found", { status: 404 })` and render the route `ErrorBoundary`.
- Search/filter data: parse the route request URL/search params in the loader so the URL is shareable and bookmarkable.
## Forms, Fetchers, and Pending UI
For forms and pending UI, read:
```txt
react-router/docs/start/framework/actions.md
react-router/docs/start/framework/pending-ui.md
react-router/docs/how-to/fetchers.md
react-router/docs/explanation/form-vs-fetcher.md
```
Rules of thumb:
- Search/filter form that updates the URL: `<Form method="get">`.
- Mutation that should change URL/history or redirect after completion: `<Form method="post">`.
- Mutation that should keep the user on the same page: `useFetcher` / `<fetcher.Form>`.
- Optimistic UI: derive from `fetcher.formData` or `navigation.formData`.
## Type Safety
Before changing generated route types or typed URL behavior, read:
```txt
react-router/docs/how-to/route-module-type-safety.md
react-router/docs/explanation/type-safety.md
```
Rules:
- Import types from `./+types/<route>`.
- Use `Route.LoaderArgs`, `Route.ActionArgs`, `Route.ComponentProps`, etc.
- Use type-only imports where appropriate.
- Do not edit generated `.react-router/types` files.
## Metadata
Before changing `meta`, read:
```txt
react-router/docs/how-to/meta.md
react-router/docs/start/framework/route-module.md
```
Important: `meta` receives `loaderData`; do not use deprecated `data` args.
## Rendering Strategy
Framework Mode can be SSR, SPA, pre-rendered, or mixed depending on config and route behavior. Before changing rendering behavior, read:
```txt
react-router/docs/start/framework/rendering.md
react-router/docs/how-to/spa.md
react-router/docs/how-to/pre-rendering.md
react-router/docs/explanation/hydration.md
```
## Middleware, Sessions, and Auth
Before implementing middleware or auth/session flows, read:
```txt
react-router/docs/how-to/middleware.md
react-router/docs/explanation/sessions-and-cookies.md
```
Middleware and context APIs are version/config sensitive. Check the installed React Router version and the app's `react-router.config.ts` before implementing.
## RSC Framework
If this Framework app uses `unstable_reactRouterRSC` or `@vitejs/plugin-rsc`, also read:
```txt
references/rsc.md
react-router/docs/how-to/react-server-components.md
```
@@ -0,0 +1,90 @@
# React Server Components (RSC)
React Router's RSC support is unstable and exists in two variants:
- **RSC Framework Mode**: Framework Mode with the unstable RSC Vite plugin.
- **RSC Data Mode**: lower-level RSC runtime APIs and manual bundler/server integration.
Use this reference in addition to `framework-mode.md` or `data-mode.md` after the main skill identifies an RSC app.
## Read the Local RSC Docs
Start with:
```txt
react-router/docs/how-to/react-server-components.md
```
Then read the relevant base mode docs:
```txt
react-router/docs/start/framework/
react-router/docs/start/data/
```
RSC docs may describe differences from non-RSC mode rather than repeating every Framework/Data concept, so keep both layers in mind.
## Detect RSC Framework Mode
Look for:
- `unstable_reactRouterRSC` imported from `@react-router/dev/vite`
- `@vitejs/plugin-rsc`
- `vite.config.ts` with `plugins: [reactRouterRSC(), rsc()]`
- Framework route modules plus RSC route exports
- RSC entry files such as `entry.rsc`
RSC Framework Mode uses a different Vite plugin from non-RSC Framework Mode. Do not swap it for the regular `reactRouter()` plugin.
## Detect RSC Data Mode
Look for:
- `unstable_RSCRouteConfig`
- route config passed to lower-level RSC APIs
- APIs such as `unstable_matchRSCServerRequest`, `unstable_routeRSCServerRequest`, `unstable_RSCHydratedRouter`, or `unstable_RSCStaticRouter`
- custom bundler/server setup around RSC
RSC Data Mode is more manual than RSC Framework Mode. Match the app's bundler and server abstractions before changing routes or entries.
## RSC Route Module Differences
In RSC Framework Mode, many normal Framework Mode concepts still apply, but routes can use server component exports.
Important route-module concepts from the RSC docs include:
- `ServerComponent` instead of the usual client `default` component
- `ServerErrorBoundary` paired with `ErrorBoundary`
- `ServerLayout` paired with `Layout`
- `ServerHydrateFallback` paired with `HydrateFallback`
- server-rendered React elements returned from loaders/actions
A route module cannot export both the normal client component and its server component counterpart for the same role. Read the RSC docs before adding these exports.
## Client/Server Boundaries
RSC code must respect React's client/server split:
- Use `"use client"` for components that need hooks, browser APIs, or event handlers.
- Use server-only modules for server data access and secrets.
- In RSC Framework Mode, prefer the `server-only` and `client-only` boundary imports described in the docs.
- Do not assume `.server`/`.client` file naming works the same way in RSC Framework Mode; read the RSC docs before relying on those conventions.
## Data Loading in RSC
RSC changes where data can be loaded:
- Server Components can fetch data directly on the server.
- Loaders/actions may still exist and can have RSC-specific behavior.
- Client components still need client-safe data and cannot directly access server-only modules.
When choosing between a server component fetch, a loader, and a client loader/action, follow the RSC docs and match existing app patterns.
## Stability
RSC APIs are explicitly unstable. Before implementing or refactoring RSC code:
- Check the installed React Router version.
- Check the installed `@vitejs/plugin-rsc` version.
- Read the app's existing RSC entry/config files.
- Prefer minimal changes that match current patterns.
+2 -2
View File
@@ -6,7 +6,7 @@ RUN pnpm install --frozen-lockfile
COPY frontend/ ./
RUN pnpm build
FROM nginx:1.27-alpine
COPY nginx/default.conf.template /etc/nginx/templates/default.conf.template
FROM nginx:alpine
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY --from=frontend-build /app/build/client /usr/share/nginx/html
EXPOSE 80
-83
View File
@@ -1,83 +0,0 @@
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream backend_upstream {
server backend:8000;
}
upstream runtime_upstream {
server runtime:8000;
}
upstream jupyter_upstream {
server jupyter:8888;
}
server {
listen 80;
server_name _;
client_max_body_size 100m;
location = /health {
default_type application/json;
return 200 '{"status":"ok","service":"gateway"}';
}
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend_upstream;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Request-ID $request_id;
}
location = /_jupyter_auth {
internal;
proxy_pass http://runtime_upstream/internal/v1/jupyter/authorize;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Original-URI $request_uri;
proxy_set_header X-Request-ID $request_id;
proxy_set_header X-Service-Token "${INTERNAL_SERVICE_TOKEN}";
}
location = /jupyter {
return 308 /jupyter/;
}
location ^~ /jupyter/ {
auth_request /_jupyter_auth;
auth_request_set $jupyter_authorization
$upstream_http_x_jupyter_authorization;
proxy_pass http://jupyter_upstream;
proxy_http_version 1.1;
proxy_set_header Authorization $jupyter_authorization;
proxy_set_header Host $http_host;
proxy_set_header Origin $http_origin;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Prefix /jupyter;
proxy_set_header X-Request-ID $request_id;
proxy_buffering off;
proxy_request_buffering off;
proxy_read_timeout 3600s;
proxy_send_timeout 3600s;
proxy_redirect off;
}
}