Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • icon picker
          React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
React Router: Framework Mode

React Router: Framework Mode

Server-side Rendering: Pages loaded from server.
File-routing & HTML Layouts
Server-side Data Query
Links & Navigation
Loaders
NHỚ. Đến đây thì các hàm React đã học sẽ không chạy được ở server-side:
useEffect, useState... là các hook chỉ chạy được ở client-side
cách viết code sẽ giống với Node.js, Express...
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
cấu trúc file khác
vì là SSR
// 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.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.