egg react ssr
本地提前编译layout
Chino simplificado | Inglés
Nota: En aras de la riqueza de características y la mantenibilidad,
egg-react-ssrya no se recomienda. Ahora se recomienda utilizar el último marcossrque puede admitir el uso de los escenarios React y Vue2/3 al mismo tiempo y admitir el uso de VITE. Recomendamos encarecidamente que use la nueva versión actualizada, que ha mejorado enormemente el mecanismo de renderizado, la riqueza de características y la mantenibilidad y ha sido verificado por múltiples grandes proyectos en línea. Si prefiere una experiencia lista para usar y desea usar capacidades sin servidor para implementar aplicaciones de un solo clic o usar Vue2/Vue3 para la representación del lado del servidor. Enlace del proyecto https://github.com/zhangyuan/sss Documento oficial http://doc.ssr-fc.com/ Continuaremos actualizándolo y manteniéndolo
Plantilla de aplicación de representación mínima y hermosa del lado del servidor, características
La lista de empresas (aplicaciones) que están utilizando este proyecto está ordenada por la nueva hora. Si lo está utilizando pero no está en la lista en la lista, mencione el problema. Bienvenido a promocionar y compartir.
Video de Youku | Video corto de vmate | Prototipo de estrella de fuego CRM | Niu niu | Centro de ayuda Shivo | Tarjeta Tencent WeChat | Micro pulso |
 Asistente de juego móvil de Tencent | Centro Nacional de Innovación de Ciencia y Tecnología Agrícola Moderna | Valores de Guosheng | Código de velocidad QR | 100 educación |
Utilizamos Create-SSR-APP para crear rápidamente proyectos y apoyamos la creación de plantillas de aplicación que integran varias funciones como (js|ts|antd|dva)
$ npm init ssr-app my-ssr-project --template=ssr-with-js
$ cd my-ssr-project
$ npm install
$ npm start Nota: Cuando la versión Node.js> = 15, npm init ssr-app my-ssr-project -- --template=ssr-with-js debe usarse para pasar parámetros
1) Inicie el servicio
Comience a escuchar el puerto 7001, que se utiliza para la representación del lado del servidor y la representación del lado del cliente. El modo de representación se especifica a través de la consulta o la configuración.
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2) Solo inicie la representación del lado del servidor, y solo salida directamente del lado del servidor HTML, no hay un paso para mezclar con el cliente
$ npm run ssr3) Inicie la compilación de recursos estáticos del cliente
Solo para el uso del desarrollo local, comience a escuchar en los recursos estáticos frontales de alojamiento de puertos 8000, equivalente al modelo tradicional de desarrollo de andamios CRA
$ npm run csr4) Scripts de apoyo
$ npm run prod # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情Las características de la plantilla: escritura simple, funciones potentes, todo es un componente y admite una conmutación perfecta entre los modos de renderizado SSR/CSR.
Más características/características son las siguientes:
Nuestro marco SSR en escenarios sin servidor se ha lanzado oficialmente, si prefiere una solución de nivel superior que sea suave fuera de la caja y espere poder desplegar rápidamente. Este marco se recomienda para el desarrollo. No hay conflicto con este proyecto, complementarse entre sí
En términos de escritura, la CSR y la SSR están unificadas, y los propios getinitiales estáticos similares a los siguientes se usan como método de adquisición de datos
function Page ( props ) {
return < div > { props . name } </ div >
}
Page . getInitialProps = async ( ctx ) => {
return Promise . resolve ( {
name : 'Egg + React + SSR' ,
} )
}
export default PageLa descripción específica es la siguiente.
En tiempo de ejecución, distinguirlo a través de config.type es la solución de renderizado isomórfica más simple en la actualidad. Cuando se carga la inicialización de la página, GetInitialProps solo se cargará en el servidor. El cliente solo ejecutará GetInitialProps cuando la ruta salte (saltos de componentes del enlace o saltos del método API).
Las propiedades del objeto de parámetro GetInitialProps son las siguientes:
Nuestra plantilla básica HTML, meta y otras etiquetas se generan utilizando JSX para evitar el uso de sintaxis de motor de plantilla engorrosa
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 >
)
}
}Durante el desarrollo local, puede comenzar los dos modos de renderizado de SSR/CSR al mismo tiempo para ver las diferencias. En el entorno de producción, puede configurar el atributo de tipo en config para cambiar diferentes modos de renderizado o consulta para cambiar. Cuando el tráfico es grande, puede degradar al modo de representación CSR. Documento de referencia Cómo cambiar el modo de representación
$ open http://localhost:7001/ # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式Para ser lo suficientemente flexibles, proporcionaremos algunos elementos clave con opciones configurables, que se pueden configurar de acuerdo con las necesidades reales. Si no hay una necesidad especial, use la configuración predeterminada. Colocamos la información de configuración relacionada con la representación del servidor en config.ssr.js. Aquí recomendamos no poner la configuración en el archivo de configuración de Egg para evitar el paquete frontal, incluida la información del archivo de configuración de 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
} Modificar la webpack-dev-server的配置
// build/webpack.config.client.js
module . epxorts = {
devServer : {
// custom webpack-dev-server config
}
} La estructura del directorio mantiene el método del huevo, principalmente la aplicación y los directorios de configuración. Coloque el código relacionado con el front-end react en el directorio web, y los archivos relacionados con el paquete webpack se encuentran en el directorio de compilación. En general, no hay muchos directorios y no niveles profundos, que es el tipo correcto.
├── 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
└── newsConsulte las notas de versión para obtener cambios detallados en cada versión
Por favor revise esta wiki
Por favor revise esta wiki
Gracias a estas maravillosas personas (Key Emoji):
Leoncheung | Tío lobo | Xu zhiyong ? | Menteceso | jerryu | dydong | espalda | zhaoxingyue |
Jiumu ? | Johannlai ? | Robert.xu | zhushijie | Cheng zhongmin ? |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!
MIT
Si desea comprender las ideas de diseño de esta aplicación, descargue y vea el PPT compartido que hice en Nodparty, Beijing en 2020.1.11, que discute las ideas y soluciones de diseño para algunos temas que deben prestarse atención.
Aunque hemos hecho todo lo posible para verificar la aplicación, todavía hay algunas omisiones. Si encuentra algún problema o sugerencia durante el uso, no dude en preguntar un problema o relaciones públicas. Bienvenido para escanear el código y unirse al grupo DingTalk directamente.
