Skip to content
useEffect, useState... là các hook chỉ chạy được ở client-sidecách viết code sẽ giống với Node.js, Express...cấu trúc file khácvì là SSR
Share
Explore
React Router: Framework Mode
Server-side Rendering: Pages loaded from server.
NHỚ. Đến đây thì các hàm React đã học sẽ không chạy được ở server-side:
Làm dự án blog bằng tên miền marketervietnam.
Tạo 1 dự án mới
npm create cloudflare@latest -- my-react-router-app
// react-router.config.ts
import type { Config } from "@react-router/dev/config";
export default {
ssr: true,
future: {
unstable_viteEnvironmentApi: true,
},
} satisfies Config;
// package.json
{
"name": "marketeremix",
"private": true,
"type": "module",
"scripts": {
"build": "react-router build",
"cf-typegen": "wrangler types",
"deploy": "npm run build && wrangler deploy",
"dev": "react-router dev",
"postinstall": "npm run cf-typegen",
"preview": "npm run build && vite preview",
"typecheck": "npm run cf-typegen && react-router typegen && tsc -b"
},
"dependencies": {
"isbot": "^5.1.31",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router": "^7.9.2"
},
"devDependencies": {
"@cloudflare/vite-plugin": "^1.13.5",
"@react-router/dev": "^7.9.2",
"@tailwindcss/vite": "^4.1.13",
"@types/node": "^22",
"@types/react": "^19.1.13",
"@types/react-dom": "^19.1.9",
"tailwindcss": "^4.1.13",
"typescript": "^5.9.2",
"vite": "^7.1.7",
"vite-tsconfig-paths": "^5.1.4",
"wrangler": "^4.40.0"
}
}
// typescript config
{
"files": [],
"references": [
{ "path": "./tsconfig.node.json" },
{ "path": "./tsconfig.cloudflare.json" }
],
"compilerOptions": {
"checkJs": true,
"verbatimModuleSyntax": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true
}
}
// file structure
/app/
-- /routes/
---- /home.tsx
-- app.css
-- root.tsx
-- routes.ts
tsconfig.json
tsconfig.cloudflare.json
react-router.config.ts
package.json
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.