egg react ssr
本地提前编译layout
Vereinfachtes Chinesisch | Englisch
HINWEIS: Aus Gründen des Feature-Reichtums und der Wartbarkeit wird
egg-react-ssrnicht mehr empfohlen. Es wird nun empfohlen, das neuestessr-Framework zu verwenden, das die Verwendung von React- und VUE2/3 -Szenarien gleichzeitig unterstützen und die Verwendung von VITE unterstützen kann. Wir empfehlen dringend, dass Sie die neue verbesserte Version verwenden, die den Rendering -Mechanismus, die Feature -Reichtum und die Wartbarkeit erheblich verbessert hat und von mehreren großen Online -Projekten überprüft wurde. Wenn Sie ein außergewöhnliches Erlebnis bevorzugen und serverlose Funktionen verwenden möchten, um Anwendungen in einem Klick bereitzustellen oder VUE2/VUE3 für die serverseitige Wiedergabe zu verwenden. Projektlink https://github.com/zhangyuan/ssr offizielles Dokument http://doc.ssr-fc.com/ Wir werden es weiterhin aktualisieren und verwalten
Minimale und schöne serverseitige Rendering-Anwendungsvorlage, Funktionen
Die Liste der Unternehmen (Apps), die dieses Projekt verwenden, wird nach der neuen Zeit sortiert. Wenn Sie es verwenden, aber nicht in der Liste aufgeführt sind, erwähnen Sie bitte das Problem. Willkommen zu fördern und zu teilen.
Youku Video | VMate Short Video | Feuersternprototyp CRM | Niu niu | Shivo Help Center | Tencent Wechat -Karte | Mikropuls |
 Tencent Handy Game Assistent | Nationales Zentrum für moderne Agrarwissenschaft und Technologieinnovation | Guosheng Securities | Geschwindigkeits -QR -Code | 100 Bildung |
Wir verwenden Create-SSR-Apps, um schnell Projekte zu erstellen und die Erstellung von Anwendungsvorlagen zu unterstützen, die verschiedene Funktionen integrieren, wie (js|ts|antd|dva)
$ npm init ssr-app my-ssr-project --template=ssr-with-js
$ cd my-ssr-project
$ npm install
$ npm start Hinweis: Wenn Node.js Version> = 15, npm init ssr-app my-ssr-project -- --template=ssr-with-js verwendet werden, um Parameter zu übergeben
1) Starten Sie den Dienst
Starten Sie das Höranschluss 7001, der für das Server-Side-Rendering und das clientseitige Rendering verwendet wird. Der Rendering -Modus wird durch Abfrage oder Konfiguration angegeben.
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2) Starten Sie nur das serverseitige Rendering, und nur die Server-Seite gibt HTML direkt aus. Es gibt keinen Schritt, mit dem Client zu mischen
$ npm run ssr3) Starten Sie die statische Ressourcenkompilierung des Clients
Nur für die Verwendung der lokalen Entwicklungsnutzung beginnen Sie auf 8000 Port-Hosting-Hosting-statischen Ressourcen zu hören, was dem traditionellen CRA-Gerüstentwicklungsmodell entspricht
$ npm run csr4) Unterstützende Skripte
$ npm run prod # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情Die Vorlagenfunktionen: Einfaches Schreiben, leistungsstarke Funktionen, alles ist eine Komponente und unterstützt ein nahtloses Wechsel zwischen SSR/CSR -Rendering -Modi.
Weitere Funktionen/Funktionen sind wie folgt:
Unser SSR -Framework in serverlosen Szenarien wurde offiziell veröffentlicht. Wenn Sie eine höhere Lösung bevorzugen, die über die Box glatt ist und hoffen, schnell bereitzustellen. Dieser Rahmen wird für die Entwicklung empfohlen. Kein Konflikt mit diesem Projekt, ergänzen sich gegenseitig
In Bezug auf das Schreiben sind CSR und SSR einheitlich, und statische GetInitialProps ähnlich wie als nächstes wird als Datenerfassungsmethode verwendet
function Page ( props ) {
return < div > { props . name } </ div >
}
Page . getInitialProps = async ( ctx ) => {
return Promise . resolve ( {
name : 'Egg + React + SSR' ,
} )
}
export default PageDie spezifische Beschreibung lautet wie folgt.
Zur Laufzeit ist die Unterscheidung durch config.type die einfachste isomorphe Rendering -Lösung derzeit. Wenn die Seiteninitialisierung geladen wird, lädt GetInitialProps nur auf dem Server. Der Client führt nur GetInitialProps aus, wenn die Route springt (Link -Komponenten -Sprünge oder API -Methoden -Sprünge).
Die Eigenschaften des Parameterobjekts von getInitialProps sind wie folgt:
Unsere grundlegende Vorlage HTML, Meta und andere Tags werden mit JSX generiert, um die Verwendung von minderjährigen Template Engine -Syntax zu vermeiden
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 >
)
}
}Während der lokalen Entwicklung können Sie die beiden Rendering -Modi von SSR/CSR gleichzeitig beginnen, um die Unterschiede anzuzeigen. In der Produktionsumgebung können Sie das Typ -Attribut in Config festlegen, um verschiedene Rendering -Modi zu wechseln oder zu wechseln. Wenn der Datenverkehr groß ist, können Sie den CSR -Rendering -Modus herabstufen. Referenzdokument, wie Sie den Rendering -Modus wechseln
$ open http://localhost:7001/ # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式Um flexibel genug zu sein, stellen wir einige wichtige Elemente mit konfigurierbaren Optionen zur Verfügung, die entsprechend den tatsächlichen Anforderungen konfiguriert werden können. Wenn es keinen besonderen Bedarf gibt, verwenden Sie die Standardkonfiguration. Wir platzieren die Konfigurationsinformationen im Zusammenhang mit dem Server -Rendering in config.ssr.js. Hier empfehlen wir, die Konfiguration nicht in die Konfigurationsdatei von Egg einzustellen, um das Front-End-Bundle einschließlich der Back-End-Konfigurationsdateisinformationen zu vermeiden.
// 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
} Ändern Sie die Standardkonfiguration webpack-dev-server的配置
// build/webpack.config.client.js
module . epxorts = {
devServer : {
// custom webpack-dev-server config
}
} Die Verzeichnisstruktur behält die Eiermethode bei, hauptsächlich die App- und Konfigurationsverzeichnisse. Stellen Sie den Front-End-React-bezogenen Code in das Webverzeichnis ein, und die Webpack-Paketdateien befinden sich im Build-Verzeichnis. Insgesamt gibt es nicht viele Verzeichnisse und nicht tiefe Ebenen, was genau die richtige Art ist.
├── 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
└── newsWeitere Änderungen an jeder Version finden Sie in Versionshinweise
Bitte überprüfen Sie dieses Wiki
Bitte überprüfen Sie dieses Wiki
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Leoncheung | Onkel Wolf | Xu Zhiyong ? | Menteseo | Jerryyu | Dydong | Snoy | Zhaoxingyue |
Jiumu ? | Johannlai ? | Robert.xu | Zhushijie | Cheng Zhongmin ? |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
MIT
Wenn Sie die Designideen dieser Anwendung verstehen möchten, laden Sie bitte die gemeinsame Nutzung von PPT -PPT und sehen Sie sich am 2020.11.11 an, in dem die Designideen und Lösungen für einige Probleme erörtert werden, auf die geachtet werden müssen.
Obwohl wir unser Bestes ausprobiert haben, um die Anwendung zu überprüfen, gibt es immer noch einige Auslassungen. Wenn Sie während des Gebrauchs Probleme oder Vorschläge finden, können Sie bitte ein Problem oder eine PR bitten. Willkommen zum Scannen des Codes und schließen Sie sich der Dingtalk -Gruppe direkt an.
