- Английский документ
- Введение в
- описание：
- Системные требования
- Установите необходимые зависимости
- Команды клиента
- Если вам не нужен SSR рендеринг, вы можете выбрать start:client:dev
- Упаковка не требует команды SSR сервера рендеринга онлайн упаковки
- Команда рендеринга сервера SSR
- Команда разработки пакета рендеринга сервера SSR : start:ssr:dev
- Команда линейного пакета рендеринга сервера SSR: build:ssr:prod
- Эта команда используется для запуска сервера SSR start:server
- Структура каталога проекта：
- Конфигурация и маршрутизация страниц
- страница
- Маршрутизатор
- Получить данные
- Получение данных и redux
- node ssr get per-page data
- Узел SSR Получение публичных данных
- получение данных клиента
- Поддержка CSS
- Переменная окружения
- Если вы чувствуете себя хорошо двигаться ваш палец и нажмите звезду для меня спасибо
Английский документ
Введение в
Добро пожаловать в документацию по React-SSR-lazy-Loading!
описание：
-
Обучение не требует больших затрат, API почти такой же, как и REACT API
-
Страницы загружаются при доступе и загружаются по требованию, вырезаются из кода
-
Осознайте изоморфизм маршрутизации, рендеринга, данных и Ajax.
-
Использование webpack-dev-middleware и Webpack-hot-server-middleware для реализации горячего старта компилированного доступа к памяти
-
Улучшение опыта SSR + SPA.
-
Хорошая масштабируемость. React-ssr-lazy-loading — это проект, построенный на REACT + Webpack. Необходимые плагины и загрузчики могут быть подобраны в соответствии с вашими потребностями
Системные требования
-
Node.js 12.22.0Or выше
-
Поддержка MacOS, Windows (включая WSL) и Linux
Мы рекомендуем создать новое приложение, которое настроит все автоматически. Чтобы создать проект, выполните：
git clone https://github.com/qq281113270/react-ssr-lazy-loading.git
cd react-ssr-lazy-loading
npm i
# or
yarn
После завершения установки ，
Установите необходимые зависимости
npm install
Команды клиента
Если вам не нужен SSR рендеринг, вы можете выбрать start:client:dev
Запуск команд разработки, которые не требуют выбора SSR сервера
npm run start:client:dev
Упаковка не требует команды SSR сервера рендеринга онлайн упаковки
npm run build:client:prod
Команда рендеринга сервера SSR
Команда разработки пакета рендеринга сервера SSR : start:ssr:dev
npm run start:ssr:dev
Команда линейного пакета рендеринга сервера SSR: build:ssr:prod
npm run build:ssr:prod
Эта команда используется для запуска сервера SSR start:server
npm run start:server
Структура каталога проекта：
├── README.md # documentation
├── bin # Script execution
│ ├── cmd.js # Script execution
│ └── index.js
├── client # Client Directory react code
│ ├── App
│ │ ├── App.js
│ │ ├── App.less
│ │ ├── CreateApp.js
│ │ └── index.js
│ ├── assets # Static resource directory
│ │ ├── css
│ │ ├── img
│ │ └── js
│ ├── component # Common Component Directory
│ │ ├── Head
│ │ ├── InitState
│ │ ├── LazyLoadingImg
│ │ ├── Loadable
│ │ ├── Loading
│ │ ├── Nav
│ │ └── Table
│ ├── index.js # Client entry JS
│ ├── pages # Route page Page directory
│ │ ├── Home
│ │ ├── User
│ │ └── marketing
│ ├── public # Webpack introduces an HTML template directory
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ └── logo512.png
│ ├── redux # react-redux directory
│ │ ├── index.js
│ │ ├── initComponentState.js
│ │ └── models
│ ├── router # react directory
│ │ ├── Routers.js
│ │ ├── addRouterApi.js
│ │ ├── history.js
│ │ ├── historyPush.js
│ │ ├── index.js
│ │ ├── react-router-dom
│ │ ├── routePaths.js
│ │ ├── routesComponent.js
│ │ └── routesConfig.js
│ ├── static # webpack Do not package static resource directories
│ └── utils # Some tools and methods
│ ├── CheckDataType.js
│ ├── FloatingBall.js
│ ├── SubscribePublished.js
│ ├── createStore.js
│ ├── ergodic.js
│ ├── getBaseInitState.js
│ ├── getCssAttr.js
│ ├── index.js
│ ├── regular.js
│ ├── resolvePath.js
│ ├── setInitData.js
│ ├── stringToObject.js
│ ├── throttlingStabilization.js
│ └── transformRoutePaths.js
├── dist # Build Code Package directory
│ ├── client # Client code Build directory
│ └── server # Server code Build directory
├── node_modules #node_modules
├── nodemon.json # nodemon.json Restarting the Node Configuration
├── package.json # npm Depend on the package
├── server # Code directory of the server
│ ├── app.js # Server KOA App
│ ├── controller # The controller
│ ├── index.js # Server entry execution file
│ ├── middleware # Middleware Addition Directory
│ │ ├── clientRouter
│ │ ├── index.js
│ │ └── webpackHot
│ ├── router # server Routing directory
│ │ ├── api.js
│ │ └── index.js
│ ├── service # service directory
│ │ └── user.js
│ └── utils # Some tool methods on the server side
│ ├── copyFile.js
│ ├── index.js
│ ├── readFile.js
│ └── watchFile.js
├── webpack # webpack The configuration directory
│ ├── config
│ │ ├── client # client webpack configuration
│ │ └── server # server webpack configuration
│ ├── defineLoader # define Loader
│ │ └── MyExampleWebpackLoader.js
│ ├── definePlugin # define Plugin
│ │ ├── HelloWorldCheckerPlugin
│ │ ├── MyExampleWebpackPlugin.js
│ │ ├── react-loadable
│ │ ├── react-loadable-ssr-addon
│ │ ├── webpack-plugin-copy-file
│ │ ├── webpack-plugin-no-require-css
│ │ ├── webpack-plugin-resolve-alias
│ │ └── webpack-plugin-router
│ ├── index.js # Webpack Export file
│ └── utils # Webpack tool method
│ ├── alias.js
│ ├── copyFile.js
│ ├── index.js
│ ├── readFile.js
│ ├── readWriteFiles.js
│ ├── stringToObject.js
│ └── watchFile.js
Конфигурация и маршрутизация страниц
страница
├── client # Client Directory code
│ ├── pages
├──Home # Home page
├── marketing # marketing Directory Secondary Route
├── pages
├── DiscountCoupon # DiscountCoupon page
├── router
├── routesConfig.js # Configuring Secondary Routes
│ ├── router # The routing configuration
├── routesConfig.js # Level-1 Route Configuration
Если нужно задать маршрут первого уровня, то файл конфигурации находится в client —> router —> routesConfig.js
Если это вторичный маршрут, то он находится в client —> pages —> marketing —> router —> routesConfig.js
содержимое routesConfig.js
import { getHaoKanVideo } from "../assets/js/request/requestApi";
// The routing configuration
export default [
{
path: "/", # Routing path
exact: true, # react Routing parameters exact
name: "home", # react routing name
entry: "/pages/Home/index.js", # Routing path
initState: async (parameter = {}) => { # Each page initialization data is used for Node background static request data, or the client has just completed the DOM initialization request data
const { page = 1, size = 10 } = parameter;
return await getHaoKanVideo({
page,
size
})
.then((res) => {
const { result: { list = [], total } = {} } = res;
return {
list: list.map((item) => ({
...item,
url: item.userPic
})),
total
};
})
.catch(() => {
// console.log("Error: ", err.message);
});
},
level: 1 # Routing Level 1 ROUTING, BECAUSE we render the routing points flat, so the level is identified by this number
},
{
path: "/user",
name: "user",
entry: "/pages/User/index.js",
level: 1
}
];
Если нам нужно добавить новые страницы, мы можем просто добавить параметр routesconfig.js в Client Pages после добавления компонента страницы.
Webpack автоматически генерирует файл RoutesComponent.js при упаковке и компиляции.
React получит файл routesComponent.js. Формирование адреса маршрутизации. Поддержка SSR и чисто клиентского режима разработки.
Маршрутизатор
В React Prop я ввожу два свойства маршрутизации. Одно из них — pushRoute. Одно — routePaths информация о параметрах адреса компонента маршрутизации.
Нам не нужно использовать this.props. History.push () в React при маршрутизации к переходу.
Вместо этого, допустим, имя главной страницы — home.
{
path: "/", # 路由路径
exact: true, # react 路由参数exact
name: "home", # react 路由 name
entry: "/pages/Home/index.js", # 路由路径
}
Это можно сделать с помощью переадресации маршрутов
this.pushRoute('home')
Если вам необходимо передать параметры, получите передачу параметров
this.pushRoute({
name:'home',
query:{
age:18,
name:'yao guan shou'
}
})
Перейти на сайт http://localhost:3002?age=18&name=yaoGuanShou
Мы также можем передавать параметры по адресу
Конфигурация пути маршрута
path: "/:id/:name",
this.pushRoute({
name:'home',
params:{
age:18,
name:'yao guan shou'
}
})
Перейти на сайт http://localhost:3002/18/yaoGuanShou
Получить данные
Получение данных и redux
node ssr get per-page data
Получение данных может быть преобразовано в HTML после запроса Node на получение данных и отправлено непосредственно на клиент, где может быть сделан запрос.
Настройте это, если вы хотите делать запросы на сервере Node. Настраивается в файле routesconfig.js
{
path: "/",
exact: true,
name: "home",
entry: "/pages/Home/index.js",
initState: async (parameter = {}) => { # ajax request
const { page = 1, size = 10 } = parameter;
# send ajax request
return await getHaoKanVideo({
page,
size
})
.then((res) => {
const { result: { list = [], total } = {} } = res;
return {
list: list.map((item) => ({
...item,
url: item.userPic
})),
total
};
})
.catch(() => {
// console.log("Error: ", err.message);
});
},
level: 1
},
Создайте новый home.js в redux —> models —> home.js для хранения данных Ajax-запроса.
import { setInitData } from "client/utils";
export default (global) => ({
state: {
initState: setInitData(global, "home"),
count: 0
},
reducers: {
setCount(state, newState) {
return {
...state,
count: newState
};
},
setInitState(state, newState) {
return {
...state,
...newState
};
}
},
effects: {
}
});
Когда пользователь запрашивает страницу, сервер node находит маршрут home, вызывает RoutesConfig.js для запроса initState, чтобы отправить Ajax-запрос, и сохраняет данные в redux initState.
Прочитайте данные initState. Import import {mapRedux} from «client/redux»; Декоратор mapRedux, который внедряет Redux в компонент.
import { mapRedux } from "client/redux";
const Index = (props) => {
let [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const {
dispatch: { home: { setInitState = () => {} } = {} } = {},
state: { home: { initState: { list = [] } = {} } = {} } = {}
} = props;
console.log("props=======", props);
return (
<div className="home"> home </div>
);
};
Выведите реквизиты, которые могут видеть реквизиты. Состояние. Home. Данные InitState.
Клиент обновляет initState. У вас есть setCount и setInitState в props. Dispatch. home. Это методы, определенные в redux —> models —> home.js.
Обновление initState
props.dispatch.home.setInitState(newData)
Узел SSR Получение публичных данных
Например, в заголовке клиента есть данные, которые нужны каждой странице, что мы можем сделать в методе redux -> models -> baseinitstate.js, определенном
import { getWeather } from "../../assets/js/request/requestApi";
const setInitData = (global, name) => {
let initState = {};
if (global && global.__INITIAL_STATE__ && global.__INITIAL_STATE__[name]) {
initState = global.__INITIAL_STATE__[name];
}
return initState;
};
export default (global) => ({
state: {
...setInitData(global, "baseInitState"),
menuActive: "/"
},
reducers: {
setInitState(state, newState) {
return {
...state,
...newState
};
},
setMenuActive(state, newState) {
return {
...state,
...newState
};
}
},
effects: (dispatch) => ({
async getWeatherAsync() {
return await getWeather({
key: "2d935fc56c5f9ab2ef2165822cedff56",
city: "440300",
extensions: "all"
})
.then((data) => {
dispatch.baseInitState.setInitState({
weather: data.forecasts[0]
});
return data;
})
.catch((err) => {
console.log("Error: ", err.message);
});
}
})
});
Effects определяет Ajax-запрос для getWeatherAsync, чтобы получить данные о погоде. GetNameAsync должен быть определен здесь.
Он начинается с get+name+Async и заканчивается функцией Async, потому что во фреймворке вы собираетесь сопоставить обычные функции, подобные этой, а затем вызвать этот метод и отправить запрос, а затем сохранить его в redux.
получение данных клиента
Чтобы получить данные клиента, используйте обратный вызов useEffect так же, как и в React API
function Profile() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch('/api/profile-data')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>Loading...</p>
if (!data) return <p>No profile data</p>
return (
<div>
<h1>{data.name}</h1>
<p>{data.bio}</p>
</div>
)
}
Поддержка CSS
Этот фреймворк был настроен с поддержкой CSS и LESS. Если вам нужен SASS, вы можете добавить SASS Loader в конфигурационный файл Webpack —> config.
Переменная окружения
.env файл конфигурации общедоступной переменной окружения
.env.development файл конфигурации переменной окружения разработки
.env.production файл конфигурации переменных окружения производства
Если вам нужны другие окружения, вы можете добавить файл.env.xxxx, а затем запустить shell-скрипт dotenv_config_path=.env.xxxx. Например:
"cross-env target='ssr' npx babel-node -r @babel/register ./dist/server/index.js -r dotenv/config dotenv_config_path=.env.xxxx ",
Если вы чувствуете себя хорошо двигаться ваш палец и нажмите звезду для меня спасибо