An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
react-ssr-lazy-loading
English document
An introduction to
Welcome to React-SSR-lazy-Loading documentation!
description
Cost learning, API is almost the same as REACT API
Pages are loaded on access and loaded on demand, cut from code
Realize the isomorphism of routing, rendering, data and Ajax.
Use webpack-dev-middleware and Webpack-hot-server-middleware to realize hot start compiled memory access
Upgrade of SSR + SPA experience.
Good scalability. React-ssr-lazy-loading is a project constructed by REACT + Webpack. The required plugins and loaders can be matched according to your needs
System requirements
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
git clone https://github.com/qq281113270/react-ssr-lazy-loading.git
cd react-ssr-lazy-loadingnpm i# oryarn
After the installation is complete
Install the required dependencies
npm install
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
npm run start:client:dev
Packaging does not require the SSR server's render online packaging command
npm run build:client:prod
SSR server render command
SSR server render development package command : start:ssr:dev
npm run start:ssr:dev
SSR server render line pack command build:ssr:prod
npm run build:ssr:prod
This command is used to start the SSR server start:server
npm run start:server
Project directory Structure
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
Page configuration and routing
page
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
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
import { getHaoKanVideo } from "../assets/js/request/requestApi";// The routing configurationexport 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 }];
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
{ path: "/", # exact: true, # react exact name: "home", # react name entry: "/pages/Home/index.js", # }
You can do this using route forwarding
this.pushRoute('home')
If you need to pass parameters get pass parameters
this.pushRoute({ name:'home', query:{ age:18, name:'yao guan shou' }})
Jump for the http://localhost:3002?age=18&name=yaoGuanShou
We can also pass parameters by address
Route Path Configuration
path: "/:id/:name",
this.pushRoute({ name:'home', params:{ age:18, name:'yao guan shou' }})
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
{ 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 },
Create a new home.js in redux --> models --> home.js to store the Ajax request data.
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: { }});
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.
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> );};
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
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 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
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> )}
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:
"cross-env target='ssr' npx babel-node -r @babel/register ./dist/server/index.js -r dotenv/config dotenv_config_path=.env.xxxx ",
If you feel good move your finger and click starred for me thank you
Original Link: https://dev.to/qq281113270/react-ssr-lazy-loading-122d
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To