in
.
```
This warning is caused by a mismatch between the React hydrate results and the SSR rendering results. Although the current page appears normal, complex applications may experience DOM hierarchy disruptions or style issues.
:::info
For more information on React hydrate logic, refer to [here](https://zh-hans.react.dev/reference/react-dom/hydrate).
:::
The application needs to maintain consistency between SSR and CSR rendering results. If inconsistencies occur, it indicates that some content should not be rendered by SSR. Modern.js provides the `
` utility component for such scenarios:
```ts
import { NoSSR } from '@modern-js/runtime/ssr';
```
Wrap elements that should not be server-side rendered with the `NoSSR` component:
```tsx
browser content
```
After modifying the code, refresh the page and notice that the previous warning has disappeared. Open the browser's developer tools and check the Network tab. The returned HTML document will not contain the content wrapped by the `NoSSR` component.
In practical scenarios, some UI displays might be affected by the user's device, such as [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) information. Modern.js also provides APIs like `use(RuntimeContext)`, allowing components to access complete request information and maintaining SSR and CSR rendering consistency. For detailed usage, please refer to [Runtime Context](/guides/basic-features/render/before-render.md#runtime-context).
### Attention to Memory Leaks
:::warning Alert
In SSR scenarios, developers need to pay special attention to memory leaks. Even minor memory leaks can significantly impact services after many requests.
:::
With SSR, each browser request triggers server-side component rendering. Therefore, you should avoid defining any data structures that continually grow globally, subscribing to global events, or creating non-disposable streams.
For example, when using [redux-observable](https://redux-observable.js.org/), developers accustomed to CSR might code as follows:
```tsx
/* Code is just an example and not executable */
import { createEpicMiddleware, combineEpics } from 'redux-observable';
const epicMiddleware = createEpicMiddleware();
const rootEpic = combineEpics();
export default function Test() {
epicMiddleware.run(rootEpic);
return Hello Modern.js
;
}
```
In this case, the `epicMiddleware` instance is created outside the component, and `epicMiddleware.run` is called within the component.
This code does not cause issues on the client-side. However, in SSR, the Middleware instance remains non-disposable. Each time the component renders, calling `epicMiddleware.run(rootEpic)` adds new event bindings internally, causing the entire object to grow continuously, ultimately affecting application performance.
Such issues are not easily noticed in CSR. When transitioning from CSR to SSR, if you're unsure whether your application has such hidden pitfalls, consider stress testing the application.
---
url: /guides/basic-features/render/streaming-ssr.md
---
# Streaming Server-Side Rendering
Streaming rendering is an advanced rendering method that progressively returns content during the page rendering process, significantly improving user experience.
In traditional SSR rendering, the page is rendered all at once, requiring all data to be loaded before returning the complete HTML. In streaming rendering, the page is rendered progressively, allowing content to be returned as it renders, so users can see initial content faster.
:::info Default Mode
**Streaming SSR is the default rendering mode for Modern.js SSR**. When you enable SSR, streaming rendering is available without additional configuration.
If you need to switch to traditional SSR mode (waiting for all data to load before returning at once), you can configure `server.ssr.mode` to `'string'`. For detailed information, refer to the [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr.md) documentation.
:::
Compared to traditional SSR rendering:
- **Faster Perceived Speed**: Streaming rendering can progressively display content, quickly rendering the home page.
- **Enhanced User Experience**: Users can see page content faster and interact without waiting for the entire page to render.
- **Better Performance Control**: Developers can better control the loading priority and order, optimizing performance and user experience.
- **Better Adaptability**: Streaming rendering adapts better to various network speeds and device performance, ensuring good performance across different environments.
## Enabling Streaming Rendering
Modern.js supports React 18+ streaming rendering. When you enable SSR, streaming rendering is enabled by default:
```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';
export default defineConfig({
server: {
ssr: true, // Streaming rendering enabled by default
},
});
```
If you need to explicitly specify streaming rendering mode, you can configure:
```ts title="modern.config.ts"
import { defineConfig } from '@modern-js/app-tools';
export default defineConfig({
server: {
ssr: {
mode: 'stream', // Explicitly specify streaming rendering mode
},
},
});
```
Modern.js streaming rendering is based on React Router and involves several key APIs:
- [`Await`](https://reactrouter.com/en/main/components/await): Used to render the asynchronous data returned by the Data Loader.
- [`useAsyncValue`](https://reactrouter.com/en/main/hooks/use-async-value): Used to fetch data from the nearest parent `Await` component.
## Fetching Data
```ts title="user/[id]/page.data.ts"
import { defer, type LoaderFunctionArgs } from '@modern-js/runtime/router';
interface User {
name: string;
age: number;
}
export interface Data {
data: User;
}
export const loader = ({ params }: LoaderFunctionArgs) => {
const userId = params.id;
const user = new Promise(resolve => {
setTimeout(() => {
resolve({
name: `user-${userId}`,
age: 18,
});
}, 200);
});
return defer({ data: user });
};
```
Here, `user` is a Promise object representing asynchronously fetched data, processed using `defer`. Notice that `defer` must receive an object parameter; a direct Promise cannot be passed.
Additionally, `defer` can receive both asynchronous and synchronous data. In the example below, short-duration requests are returned using object data, while longer-duration requests are returned using a Promise:
```ts title="user/[id]/page.data.ts"
export const loader = async ({ params }: LoaderFunctionArgs) => {
const userId = params.id;
const user = new Promise(resolve => {
setTimeout(() => {
resolve({
name: `user-${userId}`,
age: 18,
});
}, 2000);
});
const otherData = new Promise(resolve => {
setTimeout(() => {
resolve('some sync data');
}, 200);
});
return defer({
data: user,
other: await otherData,
});
};
```
This way, the application can prioritize displaying partially available content without waiting for the most time-consuming data requests.
## Rendering Data
To render the asynchronous data returned by the Data Loader, use the `Await` component. For example:
```tsx title="user/[id]/page.tsx"
import { Await, useLoaderData } from '@modern-js/runtime/router';
import { Suspense } from 'react';
import type { Data } from './page.data';
const Page = () => {
const data = useLoaderData() as Data;
return (
User info:
loading user data ...
}>
{user => {
return (
name: {user.name}, age: {user.age}
);
}}
);
};
export default Page;
```
The `Await` component needs to be wrapped inside a `Suspense` component. The `resolve` prop of `Await` should be the asynchronously fetched data from the Data Loader. When the data is fetched, it will be rendered using the [Render Props](https://zh-hans.react.dev/reference/react/cloneElement#passing-data-with-a-render-prop) pattern. During data fetching, the content set by the `fallback` prop of `Suspense` is displayed.
:::warning Warning
When importing types from the `page.data.ts` file, use `import type` to ensure only type information is imported, preventing Data Loader code from being bundled into the frontend.
:::
In the component, you can also fetch asynchronous data returned by the Data Loader using `useAsyncValue`. For example:
```tsx title='page.tsx'
import { useAsyncValue } from '@modern-js/runtime/router';
const UserInfo = () => {
const user = useAsyncValue();
return (
name: {user.name}, age: {user.age}
);
};
const Page = () => {
const data = useLoaderData() as Data;
return (
User info:
loading user data ...
}>