egg react ssr

تبسيط الصينية | إنجليزي

بيضة + رد فعل + SSR Boilerplate

ملاحظة: من أجل ثراء الميزات وقابليتها للصيانة ، لم يعد التوصية egg-react-ssr . يوصى الآن باستخدام أحدث إطار ssr الذي يمكن أن يدعم استخدام سيناريوهات React و Vue2/3 في نفس الوقت ودعم استخدام Vite. نوصي بشدة باستخدام النسخة الجديدة التي تمت ترقيتها ، والتي تحسنت بشكل كبير من آلية التقديم ، والثراء ، والقابلية للصيانة وتم التحقق منها من قبل العديد من المشاريع الكبيرة عبر الإنترنت. إذا كنت تفضل تجربة خارج الصندوق وترغب في استخدام إمكانات بدون خادم لنشر التطبيقات بنقرة واحدة أو استخدام Vue2/Vue3 لتقديم جانب الخادم. رابط المشروع https://github.com/zhangyuan/ssr المستند الرسمي http://doc.ssr-fc.com/ سنستمر في التحديث والحفاظ عليه

قالب تطبيق الحد الأدنى والجميل لتوفير الخادم ، والميزات

• صغير: طريقة التنفيذ بسيطة ، يتم تقليل الحزمة المدمجة في بيئة الإنتاج 0.7 أضعاف مشروع NEXT.JS من نفس التعقيد ، ويتم تقليل عدد الملفات التي تم إنشاؤها إلى حد كبير مقارنة بـ NEXT.JS.
• كامل: يدعم HMR ، يدعم التبديل السلس بين التطوير المحلي وبيئة الإنتاج CSR/SSR ، ويدعم أنماط تقديم للمكونات المخصصة ، ويدعم إصدارات TypeScript.
• MEI: استنادًا إلى أطر React و EggJS ، فإنه يحتوي على نظام بيئي قوي وتم تكوينه باستخدام مربعات غير سوداء لتسهيل المنطق المخصص للشركة الحالية.

يتم فرز قائمة الشركات (التطبيقات) التي تستخدم هذا المشروع حسب الوقت الجديد. إذا كنت تستخدمه ولكن غير مدرج في القائمة ، فيرجى ذكر المشكلة. مرحبًا بك في الترويج والمشاركة.

فيديو Youku	Vimte الفيديو القصير	النموذج الأولي النجمة Fire	niu niu	مركز مساعدة شيفو	بطاقة Tencent WeChat	النبض الصغير
مساعد لعبة Tencent Mobile	المركز الوطني لابتكار العلوم الزراعية والتكنولوجيا الحديثة	سووشنغ للأوراق المالية	رمز 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 # 可视化分析客户端打包的资源详情

وظائف/ميزات

ميزات القالب: الكتابة البسيطة ، وظائف قوية ، كل شيء مكون ، ويدعم التبديل السلس بين أوضاع عرض CSR/CSR.

المزيد من الميزات/الميزات على النحو التالي:

• استنادًا إلى تطوير سقالات CRA ، يمكن ترحيل تطبيق React الذي طورته CRA بسلاسة. إذا كنت على دراية بتكوين CRA ، فإن تكلفة البدء هي تقريبًا 0.
• صغيرة وجميلة. بالمقارنة مع الحلول عالية التحويلات مثل Beidou و Next.js ، فإن مبادئ التنفيذ ونماذج التطوير لدينا واضحة في لمحة.
• يوصى باستخدام Egg as the Node.js Framework ولكنه ليس إلزاميًا. في الواقع ، يمكنك أن تجد أنه يمكنك الترحيل إلى KOA و NEST.JS وغيرها من الأطر دون أي تعديل.
• كما يدعم وضعين للتطوير: SSR و CSR. يمكن لبيئة التنمية المحلية والبيئة عبر الإنترنت تبديل الوضعين في العرض بسلاسة.
• التوجيه الأمامي الموحد وتوجيه من جانب الخادم دون كتابة متكررة لتكوين ملفات التوجيه
• دعم الحصول على البيانات التلقائية عند تبديل الطرق
• دعم التطوير المحلي لـ HMR
• تم التحقق من الاستقرار من خلال التطبيقات عبر الإنترنت على نطاق واسع ، مما يوفر حلول تحسين الأداء
• دعم تهز الأشجار ، وتحسين حجم وكمية حزم البناء
• دعم التصميم المخصص CSR/SSR ، لا حاجة لتمييزه يدويًا من خلال المسار
• التخلي عن محركات القوالب التقليدية ، واحتضان مكونات React ، واستخدم JSX كقوالب
• تنفيذ المثال الذي يجمع بين antd
• تنفيذ المثال الذي يجمع بين التحميل القابل للتفاعل لتوجيه تجزئة التوجيه
• تنفيذ المثال الذي يجمع بين DV لإدارة البيانات
• مثال على التطبيق متعدد الصفحات الذي يجمع بين SSR-with-multipage
• تنفيذ نسخة راكس
• تنفيذ إصدار TypeScript

جنبا إلى جنب مع الخادم

تم إصدار إطار عمل SSR الخاص بنا في سيناريوهات الخادم رسميًا ، إذا كنت تفضل حلًا أعلى مستوى يكون سلسًا خارج الصندوق ويأمل أن تكون قادرًا على النشر بسرعة. ينصح هذا الإطار بالتطوير. لا تتعارض مع هذا المشروع ، تكمل بعضها البعض

كيف تكتب

فيما يتعلق بالكتابة ، يتم توحيد 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 هو أبسط حل عرض متماثل في الوقت الحاضر. عند تحميل تهيئة الصفحة ، سيتم تحميل GetInitialProps فقط على الخادم. سيقوم العميل بتنفيذ GetInitialProps فقط عندما يقفز المسار (يقفز مكون الارتباط أو قفزات طريقة API).

خصائص كائن معلمة getInitialProps هي كما يلي:

• CTX: سياق طلب تطبيق العقدة (متوفر فقط في مرحلة SSR)
• الدعائم الموجه: يحتوي على خصائص كائن التوجيه ، بما في ذلك اسم PathName و Router Params History ، وما إلى ذلك للحصول على التفاصيل ، راجع مستند React-Router.

كل شيء مكون

يتم إنشاء قالبنا الأساسي HTML و META والعلامات الأخرى باستخدام 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 في نفس الوقت لعرض الاختلافات. في بيئة الإنتاج ، يمكنك تعيين سمة النوع في التكوين لتبديل أوضاع العرض المختلفة أو الاستعلام للتبديل. عندما تكون حركة المرور كبيرة ، يمكنك خفض التصنيف إلى وضع تقديم المسؤولية الاجتماعية للشركات. المستند المرجعي كيفية تبديل وضع التقديم

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

بيئة التنفيذ

• Server Node.js> = 7.6 ، للاستخدام الأصلي للناء على بناء الجملة
• نسخة المتصفح أكبر من أو تساوي 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 في دليل الإنشاء. بشكل عام ، لا توجد العديد من الدلائل وليس المستويات العميقة ، وهو النوع الصحيح.

├── 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

Changelog

يرجى الاطلاع على ملاحظات الإصدار لتغييرات مفصلة على كل إصدار

مقارنة مع الحلول الأخرى

• مقارنة مع مخطط الفريق السهل
• مقارنة مع مخطط Next.js

كيفية تصحيح رمز المصدر محليًا

يرجى التحقق من هذا الويكي

كيفية المساهمة في الكود في هذا المشروع

يرجى التحقق من هذا الويكي

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

ليونشونج	العم وولف	شو تشايونج ؟	Menteceso	جيريو	دايدونغ	عمر	Zhaoxingyue
جيومو ؟	يوهانلاي ؟	Robert.xu	تشوشيجي	تشنغ تشونغمين ؟

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!

رخصة

معهد ماساتشوستس للتكنولوجيا

حصة nodeparty

إذا كنت ترغب في فهم أفكار تصميم هذا التطبيق ، فيرجى تنزيل وعرض المشاركة في NodeParty ، بكين في 2020.1.11 ، التي تناقش أفكار التصميم والحلول لبعض القضايا التي تحتاج إلى الاهتمام بها.

سؤال وجواب

على الرغم من بذلنا قصارى جهدنا للتحقق من التطبيق ، لا يزال هناك بعض الإغفالات. إذا وجدت أي مشاكل أو اقتراحات أثناء الاستخدام ، فلا تتردد في طرح مشكلة أو علاقات عامة. مرحبًا بك في مسح الكود والانضمام إلى مجموعة dingtalk مباشرة.

اتجاه نمو رقم نجمة المشروع