\n \n ;\n};\n\nconst app = new Koa();\n\napp.use(ssrsxKoa({\n development: true,\n app: \n}));\n\napp.listen(3000);\n\n```\n\n-----\n\n## with Client script\n\n### create client script folder\n\n```bash\nmkdir src\nmkdir src/client\n```\n\n### client script\n\n- `[client module name].js` is a client script file.\n\n```ts\n// src/client/test.js\nconst onClick = (e: Event) => {\n alert('from js://onClick@test');\n};\n\nexport { onClick }; // need export! important!\n```\n\n### server side\n\n- `js://` is a protocol to call client script function from ssrsx.\n\n `js://[exported function name]@[client module name]`\n\n```tsx\n// index.tsx\nimport Koa from 'koa';\nimport { ssrsxKoa, useGlobalStyle } from '@maskedeng-tom/ssrsx';\n\nconst App = () => {\n\n useGlobalStyle({\n '.clickable': {\n cursor: 'pointer',\n color: 'blue',\n textDecoration: 'underline',\n },\n });\n\n return \n \n \n Ssrsx\n \n \n
\n\n
\n Run inline js\n
\n
\n Run outside client js (src/client/test.client.js -> onClick)\n
\n\n
\n \n ;\n};\n\nconst app = new Koa();\n\napp.use(ssrsxKoa({\n development: true,\n clientRoot: 'src/client', // client script root\n app: \n}));\n\napp.listen(3000);\n```\n\n-----\n\n## with jQuery\n\nThis is a sample using jQuery. External libraries are loaded using requirejs. Specify the root folder of the client script in clientRoot and the path to place modules such as jQuery in requireJsRoot.\n\n- [requirejs](https://requirejs.org/)\n- [requirejs with jQuery](https://requirejs.org/docs/jquery.html)\n\n### install jQuery and create client script folder\n\n```bash\nnpm install @maskedeng-tom/ssrsx\nnpm install koa @types/koa\nnpm install jquery @types/jquery\n\nmkdir src\nmkdir src/client\n```\n\n### copy jQuery script to client script folder\n\n```bash\ncp node_modules/jquery/dist/jquery.min.js src/client\n```\n\n### client script with jQuery\n\n```ts\n// src/client/test.client.js\nimport $ from 'jquery';\n\nconst onClick = (e: Event) => {\n const input = $('#username');\n alert(input.val());\n};\n\nexport { onClick };\n```\n\n### server side with jQuery\n\n```tsx\n// index.tsx\nimport Koa from 'koa';\nimport { ssrsxKoa } from '@maskedeng-tom/ssrsx';\n\nconst App = () => {\n return \n \n \n Ssrsx\n \n \n
\n\n
\n \n
\n\n \n\n
\n \n ;\n};\n\nconst app = new Koa();\n\napp.use(ssrsxKoa({\n development: true,\n clientRoot: 'src/client',\n requireJsRoot: 'src/client', // for requirejs\n requireJsPaths: { // for requirejs.config paths\n 'jquery': 'jquery.min', // define for jquery (cut '.js' extension)\n },\n app: \n}));\n\napp.listen(3000);\n```\n\n-----\n\n## with jQuery from CDN\n\nIf you want to use a CDN, specify the same version of jQuery as the one you installed with `npm install jquery`.\n\n```tsx\n// index.tsx\n...\napp.use(ssrsxKoa({\n development: true,\n clientRoot: 'src/client',\n requireJsRoot: 'src/client',\n requireJsPaths: {\n 'jquery': 'https://code.jquery.com/jquery-3.7.1.min',\n },\n app: \n}));\n...\n```\n\n-----\n\n## use POST method\n\nYou can get the data sent by the POST method by using the `useBody` function.\nand You need to add a `body parser` to get the data sent by the POST method.\n\n```tsx\n// index.tsx\nimport Koa from 'koa';\nimport bodyParser from 'koa-bodyparser'; // add body parser\nimport { ssrsxKoa, Router, Routes, Route, Link, useBody } from '../';\n\n////////////////////////////////////////////////////////////////////////////////\n\nconst LoginCheck = () => {\n // post body data\n const body = useBody<{username: string, password: string}>();\n //\n return <>\n
\n \n ;\n};\n\nconst App = () => {\n return \n \n \n Ssrsx\n \n \n \n \n \n \n \n \n \n \n \n ;\n};\n\nconst app = new Koa();\n\napp.keys = ['your custom secret']; // session key\napp.use(session(app)); // add session\n\napp.use(bodyParser());\n\napp.use(ssrsxKoa({\n development: true,\n clientRoot: 'test/client',\n app: \n}));\n\napp.listen(3000);\n```\n\n-----\n\n## with CSP (Content Security Policy)\n\nSetting CSP (Content Security Policy) requires allowing `ws://` to communicate with WebSocket for ssrsx HotReload (`development: true`).\n\nAlso, because inline scripts are used internally, you need to allow `'unsafe-inline'` or `'nonce-${nonce}'`.\n\n### CSP with Koa\n\n```tsx\n// index.tsx\nimport helmet from 'koa-helmet';\nimport crypto from 'crypto';\n...\nif(process.env.NODE_ENV === 'production'){\n app.use(helmet());\n app.use((ctx, next) => {\n // set nonce to state\n ctx.state.nonce = crypto.randomBytes(16).toString('base64');\n //\n return helmet.contentSecurityPolicy({ directives: {\n defaultSrc: ['\\'self\\'','ws'], // add 'ws'\n connectSrc: ['\\'self\\'','ws://*:*'], // add 'ws://*:*'\n scriptSrc: [\n '\\'self\\'',\n `'nonce-${ctx.state.nonce}'`, // add 'nonce-??' or 'unsafe-inline'\n ],\n }})(ctx, next) as Koa.Middleware;\n });\n}\n```\n\n### CSP with express\n\n```tsx\n// index.tsx\nimport helmet from 'helmet';\nimport crypto from 'crypto';\n...\nif(process.env.NODE_ENV === 'production'){\n app.use(helmet());\n app.use((req, res, next) => {\n // set nonce to locals\n (res as express.Response).locals.nonce = crypto.randomBytes(16).toString('base64');\n //\n helmet.contentSecurityPolicy({ directives: {\n defaultSrc: ['\\'self\\'','ws'], // add 'ws'\n connectSrc: ['\\'self\\'','ws://*:*'], // add 'ws://*:*'\n scriptSrc: [\n '\\'self\\'',\n // add 'nonce-??' or 'unsafe-inline'\n (req, res) => `'nonce-${(res as express.Response).locals?.nonce}'`,\n ],\n }})(req, res, next);\n });\n}\n...\n```\n\n-----\n\n## User Context\n\nUser context can be set with the `context` property of the `ssrsx(Koa or Express)` function.\n\nThe `context` function is called every time it is rendered.\n\nYou can use the `useContext` function to get the user context value.\n\n### for Koa\n\n```tsx\ninterface UserContext {\n lang: string;\n}\n\nconst App = () => {\n const user = useContext<{UserContext}>();\n return
;\n};\n\n...\n\napp.use(ssrsxExpress({\n ...\n context: (server): UserContext => {\n return {\n lang: 'en',\n };\n },\n}));\n```\n\n-----\n\n## async Component\n\nIn Ssrsx, you cannot perform asynchronous processing using `useState` or `useEffect` etc. , but you can create asynchronous components.\n\nThe ssrsx `context` function is called every time it is rendered, so when specifying something like a database instance, create the instance externally and specify it in the `context` function.\n\n```tsx\nimport { Redis } from 'ioredis';\n\ninterface UserContext {\n redis: Redis;\n}\n\nconst isAuthorized = async (username: string, password: string) => {\n const context = useContext();\n const value = await context.redis.get(username);\n return value === password;\n};\n\n// async component\nconst LoginCheck = async () => {\n // post body data\n const body = useBody<{username: string, password: string}>();\n\n // check login\n const isLogin = await isAuthorized(body.username, body.password);\n if(!isLogin){\n return ;\n }\n\n return <>\n