# useRuntimeContext

该函数主要用于获取 Runtime 上下文，只能在函数组件中使用。

## 使用姿势

```tsx
import { useRuntimeContext } from '@modern-js/runtime';

export function App() {
  const runtimeContext = useRuntimeContext();
  return <div>Hello World</div>
}
```

## 函数签名

```ts
type RuntimeContext = {
  context: RequestContext;
};
```

### context

用于获取[请求上下文](#请求上下文)。

## 使用示例

### 区分运行环境

```ts
function App() {
  const { context } = useRuntimeContext();

  if (context.isBrowser === true) {
    // 浏览器端执行逻辑
    console.log('browser render')
  } else {
    // 服务器端执行逻辑 logger 功能需开启
    context.logger.info('server render')
  }
}
```

### 请求上下文

开启 SSR 时，在 Node 环境和浏览器端环境可以获取到同构的请求上下文。

稍有不同的是 Node 环境还支持设置响应头、响应码，并提供了 Logger 日志与 Metrics 打点。

:::tip
当 SSR 未开启时，仅包含可在浏览器端获取的部分信息。

:::

import { Tabs, Tab as TabItem } from "@theme";

<Tabs
  defaultValue="RequestContext"
  values={[
    { label: 'RequestContext', value: 'RequestContext', },
    { label: 'ServerContext', value: 'ServerContext', },
    { label: 'ClientContext', value: 'ClientContext', },
  ]
}>
<TabItem value="RequestContext">

```ts
type RequestContext = ServerContext | ClientContext;
```

</TabItem>
<TabItem value="ServerContext">

```ts
interface ServerContext {
  isBrowser: false;
  request: {
    userAgent: string;
    cookie: string;
    cookieMap: Record<string, any>;
    query: Record<string, any>;
    url: string;
    host: string;
    headers?: IncomingHttpHeaders;
  };
  response: {
    setHeader: (key: string, value: string) => void;
    status: (code: number) => void;
  };
  logger: Logger;
  metrics: Metrics;
}
```

</TabItem>
<TabItem value="ClientContext">

```ts
interface ClientContext {
  isBrowser: true;
  request: {
    userAgent: string;
    cookie: string;
    cookieMap: Record<string, any>;
    query: Record<string, any>;
    url: string;
    host: string;
    headers?: IncomingHttpHeaders;
  };
}
```

</TabItem>
</Tabs>
