egg react ssr
本地提前编译layout
単純化された中国人|英語
注：機能の豊富さと保守性のために、
egg-react-ssr推奨されなくなりました。現在、ReactとVue2/3のシナリオの使用を同時にサポートし、Viteの使用をサポートできる最新のssrフレームワークを使用することをお勧めします。新しいアップグレードバージョンを使用することを強くお勧めします。新しいアップグレードバージョンは、レンダリングメカニズム、機能の豊かさ、保守性を大幅に改善し、複数の大規模なオンラインプロジェクトによって検証されています。すぐにボックスのエクスペリエンスを好む場合、サーバーレス機能を使用してアプリケーションをワンクリックで展開するか、サーバー側のレンダリングにVUE2/VUE3を使用します。プロジェクトリンクhttps://github.com/zhangyuan/ssr公式ドキュメントhttp://doc.ssr-fc.com/
最小限で美しいサーバー側のレンダリングアプリケーションテンプレート、機能
このプロジェクトを使用している企業（アプリ）のリストは、新しい時間によってソートされます。使用しているがリストにリストされていない場合は、この問題に言及してください。宣伝と共有へようこそ。
Youkuビデオ | VMateショートビデオ | Fire StarプロトタイプCRM | niu niu | Shivoヘルプセンター | Tencent Wechatカード | マイクロパルス |
 Tencentモバイルゲームアシスタント | 国立現代農業技術革新センター | 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使用してパラメーターを渡す必要があります
1）サービスを開始します
サーバー側のレンダリングとクライアント側のレンダリングに使用されるポート7001のリスニングを開始します。レンダリングモードは、クエリまたは構成を介して指定されます。
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2）サーバー側のレンダリングのみを開始し、サーバー側のみを直接出力htmlのみで、クライアントと混合するためのステップはありません
$ npm run ssr3）クライアントの静的リソースコンパイルを開始します
ローカル開発のみを使用するために、従来のCRA足場開発モデルに相当する、フロントエンドの静的リソースをホストする8000ポートでリスニングを開始します
$ npm run csr4）サポートスクリプト
$ npm run prod # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情テンプレート機能：シンプルな書き込み、強力な機能、すべてがコンポーネントであり、SSR/CSRレンダリングモード間のシームレスな切り替えをサポートします。
その他の機能/機能は次のとおりです。
サーバーレスシナリオの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特定の説明は次のとおりです。
実行時に、 config.typeを介してそれを区別することは、現在最も単純な同型レンダリングソリューションです。ページの初期化がロードされると、getInitialPropsはサーバーにのみロードされます。クライアントは、ルートがジャンプするときにのみGetInitialPropsを実行します（リンクコンポーネントジャンプまたはAPIメソッドジャンプ）。
GetInitialPropsパラメーターオブジェクトのプロパティは次のとおりです。
基本的なテンプレート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の2つのレンダリングモードを同時に開始して、違いを表示できます。生産環境では、configの型属性を設定して、異なるレンダリングモードまたはクエリを切り替えるように設定できます。トラフィックが大きい場合は、CSRレンダリングモードにダウングレードできます。リファレンスドキュメントレンダリングモードを切り替える方法
$ open http://localhost:7001/ # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式柔軟性を高めるために、実際のニーズに応じて構成できる構成可能なオプションを備えたいくつかの重要なアイテムを提供します。特別な必要がない場合は、デフォルトの構成を使用します。 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
}
} ディレクトリ構造は、主にアプリと構成ディレクトリの卵法を維持しています。 WebディレクトリにフロントエンドのReact関連コードを配置すると、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各バージョンの詳細な変更については、リリースノートをご覧ください
このwikiを確認してください
このwikiを確認してください
これらの素晴らしい人々に感謝します（絵文字キー）：
レオンチェン | ウルフおじさん | Xu Zhiyong ？ | メンテセソ | ジェリユ | ディドン | スノイ | zhaoxingyue |
ジウム ？ | ヨハンライ ？ | robert.xu | Zhushijie | チェン・チャンミン ？ |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
mit
このアプリケーションのデザインのアイデアを理解したい場合は、2020.1.11に北京のNodePartyで行った共有PPTをダウンロードして表示してください。
アプリケーションを確認するために最善を尽くしましたが、まだいくつかの省略があります。使用中に問題や提案が見つかった場合は、問題やPRをお気軽にお問い合わせください。コードをスキャンし、DingTalkグループに直接参加することをお勧めします。
