ดาวน์โหลด egg react ssr - ดาวน์โหลดซอร์สโค้ด egg react ssr

ภาษาจีนง่ายๆ | ภาษาอังกฤษ

Egg + React + SSR Boilerplate

หมายเหตุ: เพื่อประโยชน์ของความสมบูรณ์และความสามารถในการบำรุงรักษา egg-react-ssr อีกต่อไป ตอนนี้ขอแนะนำให้ใช้เฟรมเวิร์ก ssr ล่าสุดที่สามารถรองรับการใช้สถานการณ์ React และ Vue2/3 ในเวลาเดียวกันและสนับสนุนการใช้ Vite เราขอแนะนำอย่างยิ่งให้คุณใช้เวอร์ชันที่ได้รับการอัพเกรดใหม่ซึ่งได้ปรับปรุงกลไกการแสดงผลอย่างมากความร่ำรวยและความสามารถในการบำรุงรักษาและได้รับการตรวจสอบโดยโครงการออนไลน์ขนาดใหญ่หลายโครงการ หากคุณต้องการประสบการณ์นอกกรอบและต้องการใช้ความสามารถแบบไม่มีเซิร์ฟเวอร์เพื่อปรับใช้แอปพลิเคชันในคลิกเดียวหรือใช้ Vue2/Vue3 สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ลิงค์โครงการ https://github.com/zhangyuan/ssr เอกสารทางการ http://doc.ssr-fc.com/ เราจะอัปเดตและบำรุงรักษาต่อไป

เทมเพลตแอปพลิเคชันแอปพลิเคชันการแสดงผลฝั่งเซิร์ฟเวอร์ที่สวยงามและสวยงาม

ขนาดเล็ก: วิธีการใช้งานนั้นง่ายชุดที่สร้างขึ้นในสภาพแวดล้อมการผลิตคือ 0.7 เท่าของโครงการถัดไป JS ของความซับซ้อนเดียวกันและจำนวนไฟล์ที่สร้างจะลดลงอย่างมากเมื่อเทียบกับถัดไป JS.
เต็ม: รองรับ HMR รองรับการสลับอย่างราบรื่นระหว่างการพัฒนาในท้องถิ่นและสภาพแวดล้อมการผลิต CSR/SSR รองรับโหมดการเรนเดอร์สำหรับส่วนประกอบที่กำหนดเองและรองรับรุ่น typeScript
เหม่ย: ขึ้นอยู่กับเฟรมเวิร์ก React และ EggJS มันมีระบบนิเวศปลั๊กอินที่แข็งแกร่งและได้รับการกำหนดค่าด้วยกล่องที่ไม่ใช่สีดำเพื่ออำนวยความสะดวกในการใช้ตรรกะส่วนบุคคลของธุรกิจปัจจุบัน

รายชื่อ บริษัท (แอพ) ที่ใช้โครงการนี้จัดเรียงตามเวลาใหม่ หากคุณใช้งาน แต่ไม่ได้อยู่ในรายการโปรดพูดถึงปัญหา ยินดีต้อนรับสู่การโปรโมตและแบ่งปัน

_{วิดีโอ Youku}	_{วิดีโอสั้น VMate}	_{Fire Star Prototype CRM}	_{Niu Niu}	_{ศูนย์ช่วยเหลือ Shivo}	_{การ์ด Tencent Wechat}	_{ชีพจรขนาดเล็ก}
_{Tencent Mobile Game Assistant}	_{ศูนย์การเกษตรและนวัตกรรมเทคโนโลยีการเกษตรและเทคโนโลยีแห่งชาติ}	_{หลักทรัพย์ Guosheng}	_{รหัส QR ความเร็ว}	_{100 การศึกษา}

เริ่มต้นอย่างรวดเร็ว

เราใช้ Create-SSR-APP เพื่อสร้างโครงการอย่างรวดเร็วและสนับสนุนการสร้างเทมเพลตแอปพลิเคชันที่รวมฟังก์ชั่นต่าง ๆ เช่น (js|ts|antd|dva)

$ npm init ssr-app my-ssr-project --template=ssr-with-js
$ cd my-ssr-project
$ npm install
$ npm start

หมายเหตุ: เมื่อเวอร์ชัน node.js> = 15, npm init ssr-app my-ssr-project -- --template=ssr-with-js ควรใช้ในการผ่านพารามิเตอร์

สคริปต์ NPM

1) เริ่มบริการ

เริ่มฟังพอร์ต 7001 ซึ่งใช้สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการแสดงผลฝั่งไคลเอ็นต์ โหมดการเรนเดอร์ถูกระบุผ่านแบบสอบถามหรือการกำหนดค่า

$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate

2) เฉพาะการเรนเดอร์ฝั่งเซิร์ฟเวอร์และเฉพาะด้านเซิร์ฟเวอร์ส่งออก HTML โดยตรงเท่านั้นไม่มีขั้นตอนในการผสมกับไคลเอนต์

$ npm run ssr

3) เริ่มการรวบรวมทรัพยากรแบบคงที่ไคลเอ็นต์

เฉพาะสำหรับการใช้การพัฒนาในท้องถิ่นเริ่มฟังใน 8000 พอร์ตโฮสติ้งทรัพยากรคงที่ส่วนหน้าเทียบเท่ากับรูปแบบการพัฒนานั่งร้าน CRA แบบดั้งเดิม

$ npm run csr

4) สนับสนุนสคริปต์

$ npm run prod    # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build   # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情

ฟังก์ชั่น/คุณสมบัติ

คุณลักษณะของเทมเพลต: การเขียนอย่างง่ายฟังก์ชั่นที่ทรงพลังทุกอย่างเป็นส่วนประกอบและรองรับการสลับอย่างราบรื่นระหว่างโหมดการเรนเดอร์ SSR/CSR

คุณสมบัติ/คุณสมบัติเพิ่มเติมมีดังนี้:

รวมกับ Serverless

SSR Framework ของเราในสถานการณ์ไร้เซิร์ฟเวอร์ได้รับการปล่อยตัวอย่างเป็นทางการหากคุณต้องการโซลูชันระดับสูงกว่าที่ราบรื่นนอกกรอบและหวังว่าจะสามารถปรับใช้ได้อย่างรวดเร็ว กรอบนี้แนะนำสำหรับการพัฒนา ไม่มีความขัดแย้งกับโครงการนี้เติมเต็มซึ่งกันและกัน

วิธีการเขียน

ในแง่ของการเขียน CSR และ SSR จะเป็นหนึ่งเดียวและ getInitialProps แบบคงที่คล้ายกับถัดไปใช้เป็นวิธีการเก็บข้อมูลข้อมูล

 function Page ( props ) {
  return < div > { props . name } </ div >
}

Page . getInitialProps = async ( ctx ) => {
  return Promise . resolve ( {
    name : 'Egg + React + SSR' ,
  } )
}

export default Page

คำอธิบายเฉพาะมีดังนี้

วิธีการแสดงผลมุมมองของ React
GetInitialProps เป็นวิธีการรับข้อมูลกำหนดค่าการส่งคืนให้กับสถานะส่วนประกอบ
- CSSR ถูกนำไปใช้ผ่านส่วนประกอบขั้นสูง
- SSR ดำเนินการผ่านโหนด

ที่รันไทม์แยกความแตกต่างผ่าน config.type เป็นโซลูชันการเรนเดอร์ isomorphic ที่ง่ายที่สุดในปัจจุบัน เมื่อการเริ่มต้นหน้าโหลด GetInitialProps จะโหลดบนเซิร์ฟเวอร์เท่านั้น ไคลเอนต์จะเรียกใช้งาน getInitialProps เมื่อเส้นทางกระโดด (การข้ามส่วนประกอบลิงก์หรือวิธี API กระโดด)

คุณสมบัติของวัตถุพารามิเตอร์ getInitialProps มีดังนี้:

CTX: บริบทของคำขอแอปพลิเคชันโหนด (มีเฉพาะในเฟส SSR เท่านั้น)
อุปกรณ์ประกอบฉากของเราเตอร์: มีคุณสมบัติของวัตถุการกำหนดเส้นทางรวมถึงประวัติพา ธ และประวัติพารามิเตอร์ของเราเตอร์ ฯลฯ สำหรับรายละเอียดโปรดดูเอกสาร React-Router

ทุกอย่างเป็นองค์ประกอบ

เทมเพลตพื้นฐานของเรา HTML เมตาและแท็กอื่น ๆ ถูกสร้างขึ้นโดยใช้ JSX เพื่อหลีกเลี่ยงการใช้ไวยากรณ์ของเครื่องยนต์เทมเพลตที่ยุ่งยาก

 const commonNode = ( props ) =>
  // 为了同时兼容ssr/csr请保留此判断，如果你的layout没有内容请使用 props.children ? { props.children } : ''
  props . children ? (
    < div className = "normal" >
      < h1 className = "title" >
        < Link to = "/" > Egg + React + SSR </ Link >
        < div className = "author" > by ykfe </ div >
      </ h1 >
      { props . children }
    </ div >
  ) : (
    ''
  )

const Layout = ( props ) => {
  if ( __isBrowser__ ) {
    return commonNode ( props )
  } else {
    const { serverData } = props . layoutData
    const { injectCss , injectScript } = props . layoutData . app . config
    return (
      < html lang = "en" >
        < head >
          < meta charSet = "utf-8" />
          < meta
            name = "viewport"
            content = "width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          < meta name = "theme-color" content = "#000000" />
          < title > React App </ title >
          { injectCss &&
            injectCss . map ( ( item ) => (
              < link rel = "stylesheet" href = { item } key = { item } />
            ) ) }
        </ head >
        < body >
          < div id = "app" > { commonNode ( props ) } </ div >
          { serverData && (
            < script
              dangerouslySetInnerHTML = { {
                __html : `window.__USE_SSR__=true; window.__INITIAL_DATA__ = ${ serialize (
                  serverData
                ) } ` ,
              } }
            />
          ) }
          < div
            dangerouslySetInnerHTML = { {
              __html : injectScript && injectScript . join ( '' ) ,
            } }
          />
        </ body >
      </ html >
    )
  }
}

วิธีเปลี่ยนโหมดการแสดงผล

ในระหว่างการพัฒนาในท้องถิ่นคุณสามารถเริ่มโหมดการแสดงผลทั้งสองของ SSR/CSR ในเวลาเดียวกันเพื่อดูความแตกต่าง ในสภาพแวดล้อมการผลิตคุณสามารถตั้งค่าแอตทริบิวต์ประเภทใน config เพื่อสลับโหมดการเรนเดอร์ที่แตกต่างกันหรือแบบสอบถามเพื่อสลับ เมื่อการรับส่งข้อมูลมีขนาดใหญ่คุณสามารถลดระดับเป็นโหมดการเรนเดอร์ CSR เอกสารอ้างอิงวิธีเปลี่ยนโหมดการแสดงผล

$ open http://localhost:7001/          # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式

สภาพแวดล้อมการดำเนินการ

Server Node.js> = 7.6 สำหรับการใช้งานดั้งเดิมของ Async/Await Syntax
รุ่นเบราว์เซอร์มากกว่าหรือเท่ากับ IE9 React รองรับ IE9 แต่เพื่อให้ใช้งานได้ดีขึ้นใน IE คุณอาจต้องแนะนำ polyfill

กระบวนการดำเนินการ

เรียกใช้การกำหนดค่า

เพื่อให้มีความยืดหยุ่นเพียงพอเราจะจัดหารายการคีย์ด้วยตัวเลือกที่กำหนดค่าได้ซึ่งสามารถกำหนดค่าได้ตามความต้องการที่แท้จริง หากไม่มีความต้องการพิเศษให้ใช้การกำหนดค่าเริ่มต้น เราวางข้อมูลการกำหนดค่าที่เกี่ยวข้องกับการเรนเดอร์เซิร์ฟเวอร์ใน config.ssr.js ที่นี่เราขอแนะนำไม่ให้การกำหนดค่าในไฟล์การกำหนดค่าของไข่เพื่อหลีกเลี่ยงชุดข้อมูลส่วนหน้ารวมถึงข้อมูลไฟล์การกำหนดค่าแบ็คเอนด์

 // config/config.ssr
const resolvePath = ( path ) => require ( 'path' ) . resolve ( process . cwd ( ) , path )

module . exports = {
    type : 'ssr' , // 指定运行类型可设置为csr切换为客户端渲染,此时服务端不会做获取数据生成字符串的操作以及不会使用hydrate API
    static : {
        // 设置Node应用的静态资源目录，为了生产环境读取静态资源文件
      prefix : '/' ,
      dir : resolvePath ( 'dist' )
    } ,
    routes : [
        // 前后端统一使用的路由配置文件，防止重复编写相同的路由
      {
        path : '/' , // 请求的path
        exact : true , // 是否精确匹配
        Component : ( ) => ( require ( '@/page/index' ) . default ) , // 这里使用一个function包裹为了让它延迟require, 否则Node环境无法识别前端组件中用到的import关键字会报错
        controller : 'page' , // 需要调用的controller
        handler : 'index' // 需要调用的controller中具体的method
      } ,
      {
        path : '/news/:id' ,
        exact : true ,
        Component : ( ) => ( require ( '@/page/news' ) . default ) ,
        controller : 'page' ,
        handler : 'index'
      }
    ] ,
    injectCss : [
    `/static/css/Page.chunk.css`
  ] , // 客户端需要加载的静态样式表
  injectScript : [
    `<script src='/static/js/runtime~Page.js'></script>` ,
    `<script src='/static/js/vendor.chunk.js'></script>` ,
    `<script src='/static/js/Page.chunk.js'></script>`
  ] , // 客户端需要加载的静态资源文件表
  serverJs : resolvePath ( `dist/Page.server.js` ) : string | function , // 打包后的server端的bundle文件路径支持传入CDN地址, 接受直接传入require后的function
  layout : resolvePath ( `dist/Layout.server.js` ) : string | function // 打包后的server端的bundle文件路径支持传入CDN地址, 接受直接传入require后的function
}

การกำหนดค่าการพัฒนา

แก้ไข webpack-dev-server的配置เริ่มต้น

 // build/webpack.config.client.js

module . epxorts = {
  devServer : {
    // custom webpack-dev-server config
  }
}

โครงสร้างไดเรกทอรี

โครงสร้างไดเรกทอรีรักษาวิธีการไข่ส่วนใหญ่เป็นแอปและไดเรกทอรีการกำหนดค่า ใส่รหัสที่เกี่ยวข้องกับปฏิกิริยาส่วนหน้าลงในเว็บไดเรกทอรีและไฟล์ที่เกี่ยวข้องกับแพ็คเกจ WebPack จะอยู่ในไดเรกทอรี Build โดยรวมแล้วมีไดเรกทอรีไม่มากนักและไม่ใช่ระดับลึกซึ่งเป็นแบบที่เหมาะสม

├── README.md
├── app # egg核心目录
│   ├── controller
│   ├── extend
│   ├── middleware
│   └── router.js # egg路由文件，无特殊需求不需要修改内容
├── app.js # egg 启动入口文件
├── build # webpack配置目录
│   ├── paths.js
│   ├── util.js
│   ├── webpack.config.base.js # 通用的webpack配置
│   ├── webpack.config.client.js # webpack客户端打包配置
│   └── webpack.config.server.js # webpack服务端打包配置
├── config # egg 配置文件目录
│   ├── config.daily.js
│   ├── config.default.js
│   ├── config.ssr.js
│   ├── config.local.js
│   ├── config.prod.js
│   ├── plugin.js
│   └── plugin.local.js
├── dist # build生成静态资源文件目录
│   ├── Page.server.js # 服务端打包后文件(即打包后的serverRender方法)
│   └── static # 前端打包后静态资源目录
└── web # 前端文件目录
    ├── assets
    │   └── common.less
    ├── entry.js # webpack打包入口文件，分环境导出不同配置
    ├── layout
    │   ├── index.js # 页面布局
    │   └── index.less
    └── page
        ├── index
        └── news

การเปลี่ยนแปลง

โปรดดูบันทึกย่อการเปิดตัวสำหรับการเปลี่ยนแปลงโดยละเอียดสำหรับแต่ละเวอร์ชัน

เปรียบเทียบกับโซลูชันอื่น ๆ

เปรียบเทียบกับโครงการ Easy-Team
เปรียบเทียบกับโครงการ next.js

วิธีการดีบักซอร์สโค้ดในพื้นที่

โปรดตรวจสอบวิกินี้

วิธีการมีส่วนร่วมรหัสในโครงการนี้

โปรดตรวจสอบวิกินี้

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

_{ลีออน}	_{ลุงหมาป่า}	_{Xu Zhiyong} -	_{ที่ปรึกษา}	_jerryyu	_{มดลูก}	_{คนขี้ขลาด}	_zhaoxingyue
_jiumu -	_{โจฮันแลต} -	_Robert.xu	_Zhushijie	_{Cheng Zhongmin} -

โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!

ใบอนุญาต

มิกซ์

Nodeparty Share

หากคุณต้องการเข้าใจแนวคิดการออกแบบของแอปพลิเคชันนี้โปรดดาวน์โหลดและดูการแชร์ ppt ที่ฉันทำที่ Nodeparty, ปักกิ่งในปี 2020.1.11 ซึ่งกล่าวถึงแนวคิดการออกแบบและการแก้ปัญหาสำหรับปัญหาบางอย่างที่ต้องให้ความสนใจ

กลุ่มถาม - ตอบ

แม้ว่าเราจะพยายามอย่างดีที่สุดในการตรวจสอบแอปพลิเคชัน แต่ก็ยังมีการละเว้นอยู่บ้าง หากคุณพบปัญหาหรือข้อเสนอแนะระหว่างการใช้งานโปรดอย่าลังเลที่จะถามปัญหาหรือ PR ยินดีต้อนรับสู่สแกนรหัสและเข้าร่วมกลุ่ม Dingtalk โดยตรง