egg react ssr
本地提前编译layout
Chinois simplifié | Anglais
Remarque: Par souci de richesse et de maintenabilité des caractéristiques,
egg-react-ssrne sont plus recommandés. Il est maintenant recommandé d'utiliser le dernier cadressrqui peut prendre en charge l'utilisation des scénarios React et Vue2 / 3 en même temps et soutenir l'utilisation de VITE. Nous vous recommandons fortement d'utiliser la nouvelle version mise à niveau, qui a considérablement amélioré le mécanisme de rendu, la richesse et la maintenabilité des fonctionnalités et a été vérifiée par plusieurs grands projets en ligne. Si vous préférez une expérience prête à l'emploi et souhaitez utiliser des capacités sans serveur pour déployer des applications en un seul clic ou utiliser Vue2 / Vue3 pour le rendu côté serveur. Lien du projet https://github.com/zhangyuan/ssr document officiel http://doc.ssr-fc.com/ Nous continuerons à le mettre à jour et à le maintenir
Modèle d'application de rendu minimal et magnifique côté serveur, fonctionnalités
La liste des sociétés (applications) qui utilise ce projet est triée par la nouvelle heure. Si vous l'utilisez mais non répertorié dans la liste, veuillez mentionner le problème. Bienvenue pour promouvoir et partager.
Vidéo youku | VIDÉO CAME | Prototype de fiche CRM | Niu niu | Centre d'aide Shivo | Carte Tencent WECHAT | Micro-impulsion |
 Assistant de jeu mobile Tencent | Centre national des sciences agricoles modernes et innovation technologique | Guoshing Securities | Code QR de vitesse | 100 éducation |
Nous utilisons Create-SSR-App pour créer rapidement des projets et soutenons la création de modèles d'application qui intègrent diverses fonctions telles que (js|ts|antd|dva)
$ npm init ssr-app my-ssr-project --template=ssr-with-js
$ cd my-ssr-project
$ npm install
$ npm start Remarque: lorsque Node.js version> = 15, npm init ssr-app my-ssr-project -- --template=ssr-with-js doit être utilisé pour transmettre des paramètres
1) Démarrer le service
Commencez à écouter le port 7001, qui est utilisé pour le rendu côté serveur et le rendu côté client. Le mode de rendu est spécifié via la requête ou la configuration.
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2) Démarrer uniquement le rendu côté serveur et uniquement le côté du serveur sort directement HTML, il n'y a pas de pas à mélanger avec le client
$ npm run ssr3) Démarrer la compilation de ressources statiques du client
Seulement pour une utilisation du développement local, commencez à écouter sur 8000 Ressources statiques d'hébergement d'hébergement, équivalent au modèle de développement d'échafaudage de l'ARC traditionnel
$ npm run csr4) Poutenir les scripts
$ npm run prod # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情Les fonctionnalités du modèle: écriture simple, fonctions puissantes, tout est un composant et prend en charge la commutation transparente entre les modes de rendu SSR / CSR.
Plus de fonctionnalités / fonctionnalités sont les suivantes:
Notre cadre SSR dans des scénarios sans serveur a été officiellement publié, si vous préférez une solution de niveau supérieur qui est lisse et espérons pouvoir se déployer rapidement. Ce cadre est recommandé pour le développement. Aucun conflit avec ce projet, se complétez
En termes d'écriture, la RSE et le SSR sont unifiés, et des getInitialProps statiques similaires à Next sont utilisés comme méthode d'acquisition de données
function Page ( props ) {
return < div > { props . name } </ div >
}
Page . getInitialProps = async ( ctx ) => {
return Promise . resolve ( {
name : 'Egg + React + SSR' ,
} )
}
export default PageLa description spécifique est la suivante.
Au moment de l'exécution, le distinguer via config.type est actuellement la solution de rendu isomorphe la plus simple. Lorsque l'initialisation de la page se charge, GetInitialProps ne se chargera que sur le serveur. Le client exécutera GetInitialProps uniquement lorsque l'itinéraire saute (lien les sauts de composant ou les sauts de la méthode API).
Les propriétés de l'objet de paramètre GetInitialProps sont les suivantes:
Notre modèle de base HTML, Meta et d'autres balises sont générés à l'aide de JSX pour éviter d'utiliser la syntaxe de moteur de modèle encombrant
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 >
)
}
}Pendant le développement local, vous pouvez démarrer les deux modes de rendu de SSR / RSE en même temps pour afficher les différences. Dans l'environnement de production, vous pouvez définir l'attribut Type dans Config pour changer différents modes de rendu ou requête pour changer. Lorsque le trafic est grand, vous pouvez se rétablir en mode de rendu CSR. Document de référence Comment changer de mode de rendu
$ open http://localhost:7001/ # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式Pour être suffisamment flexible, nous fournirons certains éléments clés avec des options configurables, qui peuvent être configurées en fonction des besoins réels. S'il n'y a pas de besoin spécial, utilisez la configuration par défaut. Nous plaçons les informations de configuration liées au rendu de serveur dans config.ssr.js. Ici, nous vous recommandons de ne pas mettre la configuration dans le fichier de configuration de l'œuf pour éviter le bundle frontal, y compris les informations de fichier de configuration arrière.
// 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
} Modifiez la webpack-dev-server的配置par défaut
// build/webpack.config.client.js
module . epxorts = {
devServer : {
// custom webpack-dev-server config
}
} La structure du répertoire maintient la méthode des œufs, principalement les répertoires de l'application et de la configuration. Mettez le code lié à React frontal dans le répertoire Web, et les fichiers liés au package WebPack sont situés dans le répertoire de construction. Dans l'ensemble, il n'y a pas beaucoup de répertoires et pas de niveaux profonds, ce qui est juste le bon genre.
├── 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
└── newsVeuillez consulter les notes de version pour des modifications détaillées à chaque version
Veuillez vérifier ce wiki
Veuillez vérifier ce wiki
Merci à ces gens merveilleux (clé emoji):
Leoncheung | Oncle Wolf | Xu Zhiyong ? | Menteceso | jerryyu | dydong | snoy | zhaoxingyue |
Jiumu ? | Johannlai ? | Robert.xu | zhushijie | Cheng Zhongmin ? |
Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!
Mit
Si vous souhaitez comprendre les idées de conception de cette application, veuillez télécharger et consulter le PPT de partage que j'ai fait chez Nodeparty, Pékin le 2020.1.11, qui traite des idées de conception et des solutions pour certains problèmes auxquels il faut prêter attention.
Bien que nous ayons fait de notre mieux pour vérifier l'application, il y a encore des omissions. Si vous trouvez des problèmes ou des suggestions pendant l'utilisation, n'hésitez pas à poser un problème ou un PR. Bienvenue pour scanner le code et rejoindre directement le groupe Dingtalk.
