Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "Next.js scaffolding complete package case analysis", in the daily operation, I believe that many people in the Next.js scaffolding complete package case analysis problems, the editor consulted all kinds of data, sorted out a simple and useful method of operation, hope to answer the "Next.js scaffolding complete package case analysis" doubts will be helpful! Next, please follow the editor to study!

Running effect

The code implements import type {NextPage} from 'next'import Head from' next/head'import Image from 'next/image'import React, {useEffect, useState} from' react';import {useDispatch,useSelector} from 'react-redux'import fetch from' node-fetch';import api from. / http/api';import {changeUserAC} from ".. / redux/actions/index" import axios from 'axios';import Publish from'. / components/common/Publish/Publish';import {compileString} from 'sass' Const Home: NextPage = (props:any) = > {/ / Asynchronous requested data (client rendering); const [name,setName] = useState (") useEffect () = > {(async () = > {const res:any = await axios ({url:" https://api.apiopen.top/getSingleJoke?sid=28654780"}) setName (res.result.name) console.log ("data obtained by the client", res) Console.log ("data injected by the server", props);}) ();}, []) / / data requested asynchronously (client rendering); / / data inside the state machine; const stateData:any = useSelector (state= > {console.log ("state machine data", state); return state}) / / data inside the state machine; / / dispatch action to modify the data inside the state machine Const dispatch = useDispatch (); const changeRedux= () = > {dispatch (changeUserAC ("Li Hai"))} / / dispatch action to modify the data inside the state machine; / / call the encapsulated axios to get the background data const getData = async () = > {const res:any = await api.dataManage.GetCollectionData (); console.log ('request result', res); alert (`request result ${res.result.name} `)} / / call encapsulated axios to get background data const compareEffect=async () = > {_ window.location.reload ()} / / saga intercept const goToSaga= () = > {dispatch ({type:'changeUserData', payload:' Liu'})} / / saga intercept return (

Pre-rendered from server injection: {props.data.result.name}

Returned from asynchronous request: {name}

CompareEffect ()} > compare server rendering with client rendering

Data from Redux: {stateData.user.users}

ChangeRedux ()} > dispatch events to modify redux data

GetData ()} > call the encapsulated axios to get the background data

GoToSaga ()} > modify redux data after being intercepted by saga middleware

); } export async function getServerSideProps () {const res = await fetch (`https://api.apiopen.top/getSingleJoke?sid=28654780`) const data = await res.json () return {props: {data} / / export async function getStaticProps () {/ / const res = await fetch ('...') / / const posts = await res.json () / / return {/ / props: {props: {data}} / /} / /} / /} export default Home here On the "complete construction of Next.js scaffolding package case analysis" study is over, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.