egg react ssr
本地提前编译layout
China yang disederhanakan | Bahasa inggris
Catatan: Demi kekayaan fitur dan pemeliharaan,
egg-react-ssrtidak lagi direkomendasikan. Sekarang disarankan untuk menggunakan kerangka kerjassrterbaru yang dapat mendukung penggunaan skenario React dan Vue2/3 secara bersamaan dan mendukung penggunaan vite. Kami sangat menyarankan Anda menggunakan versi yang ditingkatkan baru, yang telah sangat meningkatkan mekanisme rendering, kekayaan fitur, dan pemeliharaan dan telah diverifikasi oleh beberapa proyek online besar. Jika Anda lebih suka pengalaman out-of-the-box dan ingin menggunakan kemampuan tanpa server untuk menggunakan aplikasi dalam satu klik atau menggunakan VUE2/VUE3 untuk rendering sisi server. Tautan Proyek https://github.com/zhangyuan/ssr Dokumen Resmi http://doc.ssr-fc.com/ Kami akan terus memperbarui dan mempertahankannya
Templat aplikasi rendering sisi server minimal dan indah, fitur
Daftar perusahaan (aplikasi) yang menggunakan proyek ini diurutkan berdasarkan waktu baru. Jika Anda menggunakannya tetapi tidak terdaftar dalam daftar, harap sebutkan masalahnya. Selamat datang untuk mempromosikan dan berbagi.
Video youku | Video pendek vmate | Prototipe Bintang Api CRM | Niu niu | Pusat Bantuan Shivo | Kartu Tencent WeChat | Denyut nadi mikro |
 Asisten game mobile tencent | Pusat Nasional untuk Inovasi Ilmu Pertanian dan Teknologi Modern | Efek Guosheng | Kode QR kecepatan | 100 Pendidikan |
Kami menggunakan Create-SSR-App untuk membuat proyek dengan cepat, dan mendukung pembuatan templat aplikasi yang mengintegrasikan berbagai fungsi seperti (js|ts|antd|dva)
$ npm init ssr-app my-ssr-project --template=ssr-with-js
$ cd my-ssr-project
$ npm install
$ npm start Catatan: Saat Versi Node.js> = 15, npm init ssr-app my-ssr-project -- --template=ssr-with-js harus digunakan untuk melewati parameter
1) Mulai Layanan
Mulai Mendengarkan Port 7001, yang digunakan untuk rendering sisi server dan rendering sisi klien. Mode rendering ditentukan melalui kueri atau konfigurasi.
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2) Hanya mulai rendering sisi server, dan hanya sisi server langsung output html, tidak ada langkah untuk dicampur dengan klien
$ npm run ssr3) Mulai kompilasi sumber daya statis klien
Hanya untuk penggunaan pengembangan lokal, mulailah mendengarkan 8000 port hosting sumber daya statis front-end, setara dengan model pengembangan perancah CRA tradisional
$ npm run csr4) Skrip mendukung
$ npm run prod # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情Fitur Template: Penulisan Sederhana, Fungsi Kuat, semuanya adalah komponen, dan mendukung perpindahan yang mulus antara mode rendering SSR/CSR.
Lebih banyak fitur/fitur adalah sebagai berikut:
Kerangka kerja SSR kami dalam skenario tanpa server telah secara resmi dirilis, jika Anda lebih suka solusi tingkat yang lebih tinggi yang mulus dari kotak dan berharap dapat digunakan dengan cepat. Kerangka kerja ini direkomendasikan untuk pengembangan. Tidak ada konflik dengan proyek ini, saling melengkapi
Dalam hal penulisan, CSR dan SSR disatukan, dan getInitialprops statis yang mirip dengan selanjutnya digunakan sebagai metode akuisisi data
function Page ( props ) {
return < div > { props . name } </ div >
}
Page . getInitialProps = async ( ctx ) => {
return Promise . resolve ( {
name : 'Egg + React + SSR' ,
} )
}
export default PageDeskripsi spesifiknya adalah sebagai berikut.
Saat runtime, membedakannya melalui config.type adalah solusi rendering isomorfik paling sederhana saat ini. Ketika inisialisasi halaman memuat, GetInitialProps hanya akan memuat di server. Klien hanya akan mengeksekusi getInitialprops ketika rute melompat (link komponen lompatan atau metode API melompat).
Properti objek parameter GetInitialProps adalah sebagai berikut:
HTML Template Dasar kami, meta dan tag lainnya dihasilkan menggunakan JSX untuk menghindari menggunakan sintaks mesin template rumit
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 >
)
}
}Selama pengembangan lokal, Anda dapat memulai dua mode rendering SSR/CSR secara bersamaan untuk melihat perbedaan. Di lingkungan produksi, Anda dapat mengatur atribut Type di Config untuk beralih berbagai mode rendering atau kueri untuk beralih. Saat lalu lintas besar, Anda dapat menurunkan peringkat ke mode rendering CSR. Dokumen Referensi Cara Mengganti Mode Rendering
$ open http://localhost:7001/ # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式Agar cukup fleksibel, kami akan menyediakan beberapa item utama dengan opsi yang dapat dikonfigurasi, yang dapat dikonfigurasi sesuai dengan kebutuhan aktual. Jika tidak ada kebutuhan khusus, gunakan konfigurasi default. Kami menempatkan informasi konfigurasi yang terkait dengan rendering server di config.ssr.js. Di sini kami menyarankan untuk tidak meletakkan konfigurasi di file konfigurasi telur untuk menghindari bundel front-end termasuk informasi file konfigurasi back-end.
// 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
} Ubah webpack-dev-server的配置default
// build/webpack.config.client.js
module . epxorts = {
devServer : {
// custom webpack-dev-server config
}
} Struktur direktori mempertahankan metode telur, terutama direktori aplikasi dan konfigurasi. Masukkan kode terkait reaksi front-end di direktori web, dan file yang terkait dengan paket webpack terletak di direktori build. Secara keseluruhan, tidak ada banyak direktori dan bukan tingkat yang dalam, yang merupakan jenis yang tepat.
├── 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
└── newsSilakan lihat catatan rilis untuk perubahan terperinci untuk setiap versi
Silakan periksa wiki ini
Silakan periksa wiki ini
Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):
Leoncheung | Paman Wolf | Xu Zhiyong ? | Menteceso | Jerryyu | Dydong | Snoy | zhaoxingyue |
Jiumu ? | Johannlai ? | Robert.xu | Zhushijie | Cheng Zhongmin ? |
Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!
Mit
Jika Anda ingin memahami ide -ide desain dari aplikasi ini, silakan unduh dan lihat PPT berbagi yang saya buat di NodeParty, Beijing pada 2020.1.11, yang membahas ide -ide desain dan solusi untuk beberapa masalah yang perlu diperhatikan.
Meskipun kami telah mencoba yang terbaik untuk memeriksa aplikasi, masih ada beberapa kelalaian. Jika Anda menemukan masalah atau saran saat digunakan, jangan ragu untuk menanyakan masalah atau PR. Selamat datang untuk memindai kode dan bergabung dengan grup DingTalk secara langsung.
