0
# Application Entry Points
1
2
Core components for initializing Remix applications on both client and server sides, providing the foundation for React-based full-stack web applications.
3
4
## Capabilities
5
6
### RemixBrowser
7
8
The main entry point for Remix applications on the client side. This component handles client-side hydration and sets up the React Router for browser navigation.
9
10
```typescript { .api }
11
/**
12
* The main entry point for Remix applications on the client side
13
* Handles client-side hydration and sets up React Router for browser navigation
14
* @returns React element for client-side rendering
15
*/
16
function RemixBrowser(): ReactElement;
17
18
interface RemixBrowserProps {}
19
```
20
21
**Usage Example:**
22
23
```typescript
24
import { RemixBrowser } from "@remix-run/react";
25
import { hydrateRoot } from "react-dom/client";
26
27
// Basic usage - configuration is handled via global __remixContext
28
hydrateRoot(document, <RemixBrowser />);
29
```
30
31
### RemixServer
32
33
The main entry point for Remix applications on the server side. This component handles server-side rendering and provides the initial HTML for client hydration.
34
35
```typescript { .api }
36
/**
37
* The main entry point for Remix applications on the server side
38
* Handles server-side rendering and provides initial HTML for client hydration
39
* @param props - Server rendering configuration and context
40
* @returns React element for server-side rendering
41
*/
42
function RemixServer(props: RemixServerProps): ReactElement;
43
44
interface RemixServerProps {
45
/** Entry context containing route data, assets manifest, and server state */
46
context: EntryContext;
47
/** Request URL for the current page */
48
url: string | URL;
49
/** Timeout in milliseconds for aborting deferred data requests */
50
abortDelay?: number;
51
/** Nonce value for Content Security Policy */
52
nonce?: string;
53
}
54
```
55
56
**Usage Example:**
57
58
```typescript
59
import { RemixServer } from "@remix-run/react";
60
import { renderToString } from "react-dom/server";
61
import type { EntryContext } from "@remix-run/react";
62
63
export default function handleRequest(
64
request: Request,
65
responseStatusCode: number,
66
responseHeaders: Headers,
67
remixContext: EntryContext
68
) {
69
const markup = renderToString(
70
<RemixServer
71
context={remixContext}
72
url={request.url}
73
abortDelay={5000}
74
nonce="csp-nonce-value"
75
/>
76
);
77
78
responseHeaders.set("Content-Type", "text/html");
79
80
return new Response(`<!DOCTYPE html>${markup}`, {
81
status: responseStatusCode,
82
headers: responseHeaders,
83
});
84
}
85
```
86
87
## Types
88
89
### EntryContext
90
91
The context object passed to the server entry point containing all necessary data for server-side rendering.
92
93
```typescript { .api }
94
interface EntryContext {
95
/** Assets manifest containing information about static assets */
96
manifest: AssetsManifest;
97
/** Route modules for the current request */
98
routeModules: RouteModules;
99
/** Critical CSS for above-the-fold content */
100
criticalCss?: string;
101
/** Server handoff string for client hydration */
102
serverHandoffString?: string;
103
/** Static handler context from React Router */
104
staticHandlerContext: StaticHandlerContext;
105
/** Future flags configuration */
106
future: FutureConfig;
107
/** Whether the app is in SPA mode */
108
isSpaMode: boolean;
109
}
110
```
111
112
### Future Configuration
113
114
Configuration for enabling future Remix features and behaviors.
115
116
```typescript { .api }
117
interface FutureConfig {
118
/** Enable single fetch optimization */
119
unstable_singleFetch?: boolean;
120
/** Enable fog of war route loading */
121
unstable_fogOfWar?: boolean;
122
/** Enable optimized Link prefetching */
123
unstable_optimizeDeps?: boolean;
124
}
125
```
126
127
## Implementation Notes
128
129
- **Client Hydration**: `RemixBrowser` automatically handles the hydration of server-rendered content
130
- **Error Boundaries**: Both components include built-in error boundary handling for route-level errors
131
- **Asset Loading**: Server component manages critical CSS and asset preloading for optimal performance
132
- **Context Passing**: Entry components handle the passing of server context to client components during hydration
133
- **Development Mode**: Components include development-specific features like live reload integration