術(shù)與器：React 服務(wù)端渲染和靜態(tài)站點(diǎn)生成

import React from 'react'
// 類組件class ListPage extends React.Component {  render(){    return <div>      <h3 >ListPageh3>      <h4>服務(wù)器數(shù)據(jù)：h4>      {/* 類組件的方式展示數(shù)據(jù)內(nèi)容 */}      <p> {this.props.data[0].name} p>    div>  }}
// // 函數(shù)組件// function ListPage({data}){//   return (//     
//       
ListPage//       
服務(wù)器數(shù)據(jù)：//       {/* 類組件的方式展示數(shù)據(jù)內(nèi)容 */}//       
 {data[1].name} //     
//   )// }
// Node 環(huán)境下執(zhí)行// 文件讀寫(xiě)，數(shù)據(jù)庫(kù)鏈接，網(wǎng)絡(luò)通信// export async function getStaticProps(){  export async function getServerSideProps(){    const res = await fetch('http://localhost:80/');      const backData = await res.json();      const data = JSON.parse(backData);      console.log(data);      return {        props:{data}      }  }
export default ListPage

import React from 'react'import Axios from "axios"
// 類組件class ListPage extends React.Component {  render(){    return <div>      <h3 >ListPageh3>      <h4>服務(wù)器數(shù)據(jù)：h4>      {/* 類組件的方式展示數(shù)據(jù)內(nèi)容 */}      <p> {this.props.data[0].name} p>    div>  }}
// // 函數(shù)組件// function ListPage({data}){//   return (//     
//       
ListPage//       
服務(wù)器數(shù)據(jù)：//       {/* 類組件的方式展示數(shù)據(jù)內(nèi)容 */}//       
 {data[1].name} //     
//   )// }
// Node 環(huán)境下執(zhí)行// 文件讀寫(xiě)，數(shù)據(jù)庫(kù)鏈接，網(wǎng)絡(luò)通信export async function getStaticProps(){  const d3 = await Axios.get('http://localhost:80/');  const data = JSON.parse(d3.data);  console.log(data)  // 返回的 Props 屬性的值會(huì)傳遞給組件  return {    props:{data}  }}
export default ListPage

import React from 'react'import Axios from "axios"
// 類組件class ListPage extends React.Component {  render() {    return <div>      <h3 >ListPage - Classh3>      <p>{this.props.backData.name}p>    div>  }}
// 根據(jù)客戶端參數(shù)生成靜態(tài)頁(yè)面export async function getStaticPaths() {  return {    // 匹配客戶端請(qǐng)求的 id 值     paths: [{ params: { id: "1" } }, { params: { id: "2" } }],    fallback: false  }}
// 自動(dòng)調(diào)用當(dāng)前方法，將客戶端參數(shù)傳入; { params } 接受到的客戶端參數(shù)export async function getStaticProps({ params }) {  const d3 = await Axios.get('http://localhost:80/');  const data = JSON.parse(d3.data);  console.log(params)  // 循環(huán)服務(wù)器數(shù)據(jù)，獲取  for (let i = 0; i < data.length; i++) {    // console.log(data[i].id)    if (params.id == data[i].id) {      // 返回對(duì)應(yīng)數(shù)據(jù)      const backData = data[i];      return {        props: { backData }      }    }  }}
export default ListPage

"scripts": {    "dev": "next dev",    "build": "next build",    "start": "next start",    "export": "next build && next export"  },