When the user requests the page, the node server matches the home route, invokes RoutesConfig.js to request initState to send the Ajax request, and stores the data in redux initState.
Read the initState data. Import import {mapRedux} from "client/redux"; The mapRedux decorator, which injects Redux into the component.
Print the props can see props. State. Home. InitState data.
The client updates initState. You have setCount and setInitState at props. Dispatch. home. These are the methods defined in redux --> models --> home.js.
Update initState
props.dispatch.home.setInitState(newData)
Node SSR Obtains public data
For example, the client header has a data that every page needs, which we can do in the redux -> models -> baseinitstate.js method defined
Effects defines an Ajax request for getWeatherAsync to get the weather data. GetNameAsync must be defined here
It starts with get+name+Async and ends with an Async function because in the framework you're going to match regular functions like this, and then you're going to call that method and send the request, and then you're going to store it in redux.
client get data
To obtain client data, use the useEffect callback just like the React API
ygs-code/react-ssr-lazy-loading
webpack react loadable redux ssr
English document
An introduction to
Welcome to React-SSR-lazy-Loading documentation!
description:
System requirements
Node.js 12.22.0Or higher
Supports MacOS, Windows (including WSL), and Linux
We recommend creating a new application that will set everything up for you automatically. To create a project, run:
After the installation is complete ,
Install the required dependencies
Client Commands
If you don't need SSR rendering, you can choose start:client:dev
Start development commands that do not require SSR server selection
Packaging does not require the SSR server's render online packaging command
SSR server render command
SSR server render development package command : start:ssr:dev
SSR server render line pack command build:ssr:prod
This command is used to start the SSR server start:ssr:prod
Project directory Structure:
Page configuration and routing
page
If it is to set the level 1 route, then the configuration file is in client --> router --> routesConfig.js
If it's a secondary route then it's in client --> pages --> marketing --> router --> routesConfig.js
routesConfig.js content
If we need to add new pages, we can simply add the routesconfig.js parameter to Client Pages after adding the page component.
Webpack automatically generates the RoutesComponent.js file when it is packaged and compiled.
React will fetch the routesComponent.js file. Forming a routing address. Support SSR and pure client development mode.
router
In React Prop, I inject two routing properties. One is pushRoute. One is routePaths routing component address parameter information.
We don't need to use this.props. History.push () in React when routing to a jump
Instead, let's say the name of the home page is home
You can do this using route forwarding
If you need to pass parameters get pass parameters
Jump for the http://localhost:3002?age=18&name=yaoGuanShou
We can also pass parameters by address
Route Path Configuration
Jump for the http://localhost:3002/18/yaoGuanShou
Get Data
Get data and redux
node ssr get per-page data
Data acquisition can be rendered into HTML after Node requests data acquisition and sent directly to the client, where the request can be made.
Configure this if you want to make requests on the Node server. Configured in routesconfig.js
Create a new home.js in redux --> models --> home.js to store the Ajax request data.
When the user requests the page, the node server matches the home route, invokes RoutesConfig.js to request initState to send the Ajax request, and stores the data in redux initState.
Read the initState data. Import import {mapRedux} from "client/redux"; The mapRedux decorator, which injects Redux into the component.
Print the props can see props. State. Home. InitState data.
The client updates initState. You have setCount and setInitState at props. Dispatch. home. These are the methods defined in redux --> models --> home.js.
Update initState
Node SSR Obtains public data
For example, the client header has a data that every page needs, which we can do in the redux -> models -> baseinitstate.js method defined
Effects defines an Ajax request for getWeatherAsync to get the weather data. GetNameAsync must be defined here
It starts with get+name+Async and ends with an Async function because in the framework you're going to match regular functions like this, and then you're going to call that method and send the request, and then you're going to store it in redux.
client get data
To obtain client data, use the useEffect callback just like the React API
The CSS support
This framework has been configured with CSS and LESS. If you need SASS, you can add SASS Loader in the configuration file of Webpack --> config.
The environment variable
.env file public environment variable configuration
.env.development file development environment variable configuration
.env.production file configuration of production environment variables
If you need other environments, you can add the.env.xxxx file and then run the shell script dotenv_config_path=.env.xxxx. Such as:
If you feel good move your finger and click starred for me。 thank you
thanks
under the MIT License Authored and maintained by yao guan shou.
中文文档
入门
欢迎来到 react-ssr-lazy-loading 文档!
说明:
带有测验的交互式课程将指导您了解使用 react-ssr-lazy-loading 所需的一切。
系统要求
Node.js 12.22.0或更高版本
支持 MacOS、Windows(包括 WSL)和 Linux
我们建议使用 创建一个新的 应用程序,它会自动为您设置所有内容。要创建项目,请运行:
安装完成后 ,
安装所需的依赖
客户端命令
如果不需要ssr渲染,可以选择 start:client:dev
启动 不需要 ssr 服务器选择的开发命令
打包 不需要 ssr 服务器的渲染的 线上打包命令
ssr 服务器渲染命令
ssr服务器渲染开发打包命令 : start:ssr:dev
ssr服务器渲染线上打包命令 build:ssr:prod
启动 ssr 服务器命令start:ssr:prod
项目目录结构:
页面配置与路由
页面
如果是设置一级路由那么 配置文件在 client --> router --> routesConfig.js 中
如果是二级路由那么是在 client --> pages --> marketing --> router --> routesConfig.js 中
routesConfig.js 内容
如果我们需要新加页面,只需要在 client pages中添加页面组件之后,配置 增加 routesConfig.js 参数即可。
webpack 打包编译的时候会自动生成routesComponent.js文件。
react会去取路由routesComponent.js文件。形成路由地址。支持ssr和单纯client开发模式。
路由
在react prop中我注入了两个 路由属性 一个是pushRoute 路由跳转函数。一个是routePaths 路由组件地址参数信息。
当路由跳转的时候我们不需要使用 react 中的 this.props.history.push()
我们可以这样 name 是路由的name ,比如当路由跳转的时候我们不需要使用 react 中的 this.props.history.push()
我们可以这样 name 是路由的name ,比如 home页面 的 name 是 home
使用路由跳转可以这样做
如果需要传参 get 传参
跳转则为 http://localhost:3002?age=18&name=yaoGuanShou
我们也可以通过地址传参
路由path配置
跳转则为 http://localhost:3002/18/yaoGuanShou
数据获取
数据获取与redux
node ssr获取每个页面数据
数据获取可以在node请求获取数据之后然后渲染成html直接发送给客户端,可以在客户端做请求。
如果希望在node服务端做请求那么这样配置。 在 routesConfig.js 中配置
在redux --> models --> home.js 新建一个home.js 用于存储ajax请求数据。
在用户请求页面的时候 node 服务器会 匹配到 home路由 会调用routesConfig.js 请求 initState 方法 发送ajax 请求,然后会把数据存放于 redux initState中。
读取 initState 数据. 引入 import { mapRedux } from "client/redux"; mapRedux 装饰器,把 redux 注入 组件中。
打印 props 可以看到props.state.home.initState 数据。
客户端 更新 initState 。在 props.dispatch.home 有setCount和setInitState。这两个方法就是刚才在redux --> models --> home.js定义的方法。
更新initState
node ssr 获取公共数据
比如客户端头部有个数据每个页面都需要的,这个我们可以这样做在 redux --> models --> baseInitState.js定义的方法。
在 effects 中定义 getWeatherAsync 获取 天气数据的ajax请求,这里定义一定要 getNameAsync
开头是get+name+Async 结尾是Async函数因为在框架中会匹配这样规则的函数,然后调用该方法发送请求,然后存到redux中。
client 获取数据
获取客户端数据,和react api一样使用 在useEffect回调即可
css支持
本框架已经配置了 css 与 less,如果需要sass可以在webpack --> config 的配置文件中添加 sass loader即可。
环境变量
.env 文件 公共环境变量配置
.env.development 文件 开发环境变量配置
.env.production 文件 生产环境变量配置
如果需要其他环境 可自行添加 .env.xxxx 文件 然后在运行shell脚本的时候 dotenv_config_path=.env.xxxx 即可。比如:
如果你对你有用,请移动你的手指,为我点击starred。谢谢你!
根据MIT许可证
作者 姚观寿 维护