Server-Side Page Generation
<!--- Example:
function htmlLayout(props: { body: string }) {
return `
<!DOCTYPE html>
<html>
<head>
<title>${props.title}</title>
</head>
<body>${props.body}</body>
</html>
`
}
app.html('/', async ctx => {
const date = new Date().toISOString()
return htmlLayout({
title: 'Page Title',
body: `
<h1>Example of a page returned from the server</h1>
<p>Current time: ${date}</p>
`,
})
})
The page is returned as a string generated by the developer. This is the fastest way to serve static pages. -->
If the file has a .jsx or .tsx extension, the JSX transformer will be applied. Don't forget to import the jsx factory from @app/html-jsx.
Example usage:
import { jsx } from '@app/html-jsx'
interface HtmlLayoutProps {
title?: string
}
function HtmlLayout(props: HtmlLayoutProps, ...children: any) {
return (
<html>
<head>{props.title && <title>{props.title}</title>}</head>
<body>{children}</body>
</html>
)
}
app.html('/', async ctx => {
const date = new Date().toISOString().slice(0, 19).replace('T', ' ')
return (
<HtmlLayout title={'Page Title'}>
<h1>Example of a page returned from the server</h1>
<p>Current time: {date}</p>
</HtmlLayout>
)
})
A component is a function that takes the attributes of a JSX element as its first argument and nested components as the remaining arguments.
Component names are conventionally written with an uppercase letter.
function MyComponent(props, ...children) {
return (
<div>
This is the body of the component, and this is what was passed to it:
<div>{children}</div>
</div>
)
}
You can use such a component like this:
<div>
Main code of the page and component:
<MyComponent
title={'Hello'}
subTitle={'World'}
count={200}
checked
>
<div>First line</div>
<div>Second line</div>
</MyComponent>
</div>
Thus, the props parameter in the MyComponent function will have the following values:
{
"title": "Hello",
"subTitle": "World",
"count": 200,
"checked": true
}
In children, there will be an array of elements:
[
<div>First line</div>,
<div>Second line</div>,
]
