> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.
# Server-Side Rendering
> Render JSX to HTML strings on the server with Hono's efficient SSR implementation
Hono's server-side JSX rendering (`hono/jsx`) converts JSX components directly to HTML strings. This approach is optimized for server performance and integrates seamlessly with Hono's request/response model.
## Setup
Configure your `tsconfig.json` for server-side JSX:
```json tsconfig.json theme={null}
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
```
## Using c.html() with JSX
The `c.html()` method accepts JSX and returns an HTML response:
```tsx theme={null}
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.html(
My App
Hello, Hono JSX!
)
})
export default app
```
## Functional Components
Create reusable components as functions:
```tsx theme={null}
import type { FC } from 'hono/jsx'
type PageProps = {
title: string
description?: string
}
const Page: FC = ({ title, description, children }) => {
return (
{title}
{description && }
{children}
)
}
app.get('/', (c) => {
return c.html(
Welcome!
This is the homepage.
)
})
```
## Props and Type Safety
Hono JSX is fully type-safe with TypeScript:
```tsx theme={null}
type ButtonProps = {
variant: 'primary' | 'secondary' | 'danger'
size?: 'sm' | 'md' | 'lg'
disabled?: boolean
onClick?: string // Event handler as string for server-side
children: any
}
const Button: FC = ({
variant,
size = 'md',
disabled = false,
onClick,
children
}) => {
const className = `btn btn-${variant} btn-${size}`
return (
)
}
// Usage with type checking
app.get('/button', (c) => {
return c.html(
)
}
// Set default props
Alert.defaultProps = {
type: 'info'
}
```
Source: [src/jsx/base.ts:17-21](https://github.com/honojs/hono/blob/main/src/jsx/base.ts#L17-L21)
## Context API
Share data across components without prop drilling:
```tsx theme={null}
import { createContext, useContext } from 'hono/jsx'
import type { FC } from 'hono/jsx'
type Theme = 'light' | 'dark'
// Create a context
const ThemeContext = createContext('light')
const ThemedButton: FC = ({ children }) => {
const theme = useContext(ThemeContext)
return (
)
}
const ThemedCard: FC = ({ children }) => {
const theme = useContext(ThemeContext)
return (
{children}
)
}
app.get('/themed', (c) => {
return c.html(
Dark Theme Card
Dark Button
)
})
```
Source: [src/jsx/context.ts:15-50](https://github.com/honojs/hono/blob/main/src/jsx/context.ts#L15-L50)
## Memo for Performance
Memoize components to avoid re-rendering:
```tsx theme={null}
import { memo } from 'hono/jsx'
import type { FC } from 'hono/jsx'
type ExpensiveProps = {
data: number[]
multiplier: number
}
const ExpensiveComponent: FC = ({ data, multiplier }) => {
const result = data.reduce((sum, n) => sum + n * multiplier, 0)
return
)
})
```
Source: [src/jsx/base.ts:423-440](https://github.com/honojs/hono/blob/main/src/jsx/base.ts#L423-L440)
## Children Utilities
Manipulate children with the Children API:
```tsx theme={null}
import { Children } from 'hono/jsx'
const List: FC = ({ children }) => {
const items = Children.toArray(children)
return (
{items.map((child, index) => (
{child}
))}
)
}
app.get('/list', (c) => {
return c.html(
Item 1Item 2Item 3
)
})
```
## Handling Events (Server-Side)
On the server, event handlers are rendered as string attributes:
```tsx theme={null}
const InteractiveButton = () => {
return (
)
}
const FormWithHandler = () => {
return (
)
}
```
For interactive client-side handlers, use `hono/jsx/dom` for client-side rendering.
## SVG Support
Render SVG elements with proper namespace handling:
```tsx theme={null}
const Icon = () => {
return (
)
}
```
Source: [src/jsx/base.ts:335-345](https://github.com/honojs/hono/blob/main/src/jsx/base.ts#L335-L345)
## Async Components
Components can be async for data fetching:
```tsx theme={null}
type Post = {
id: number
title: string
body: string
}
const fetchPost = async (id: number): Promise => {
const res = await fetch(`https://api.example.com/posts/${id}`)
return res.json()
}
const PostDetail: FC<{ id: number }> = async ({ id }) => {
const post = await fetchPost(id)
return (
)
})
```
For streaming async components, see the [Streaming](/jsx/streaming) documentation.
## Raw HTML
Insert raw HTML strings:
```tsx theme={null}
import { raw } from 'hono/helper/html'
const RawContent = () => {
const htmlContent = 'Bold text'
return (
)
})
```
## Best Practices
Define proper types for all component props to catch errors at compile time.
```tsx theme={null}
type Props = {
name: string
age: number
}
const User: FC = ({ name, age }) => {
return
{name} is {age} years old
}
```
Components should be pure functions that return consistent output for the same input.
```tsx theme={null}
// Good: Pure component
const Greeting = ({ name }: { name: string }) => {
return
Hello, {name}!
}
// Avoid: Side effects in render
const BadComponent = () => {
console.log('Rendering...') // Side effect
return
Content
}
```
Break down complex UIs into smaller, reusable components.
```tsx theme={null}
// Instead of one large component
const Page = () => (
)
```
Context is great for global data, but overusing it can make components less reusable.
```tsx theme={null}
// Good: Use context for truly global data
const ThemeContext = createContext('light')
// Avoid: Passing down local state via context
// Instead, use props for component-specific data
```
## Next Steps
Learn about client-side rendering with hono/jsx/dom
Stream HTML responses with Suspense
Use the html helper for template rendering
Use the JSX renderer middleware