egg react ssr
本地提前编译layout
Chinês simplificado | Inglês
NOTA: Por uma questão de riqueza e manutenção de recursos,
egg-react-ssrnão é mais recomendado. Agora é recomendável usar a estruturassrmais recente que pode suportar o uso de cenários React e Vue2/3 ao mesmo tempo e apoiar o uso do Vite. Recomendamos fortemente que você use a nova versão atualizada, que melhorou bastante o mecanismo de renderização, a riqueza e a manutenção e foi verificado por vários grandes projetos on -line. Se você preferir uma experiência pronta para uso e deseja usar recursos sem servidor para implantar aplicativos em um clique ou usar o VUE2/VUE3 para renderização do lado do servidor. Link do projeto https://github.com/zhangyuan/ssr documento oficial http://doc.ssr-fc.com/ continuaremos atualizando e mantendo-o
Modelo de aplicação de renderização mínimo e bonito do servidor, recursos
A lista de empresas (aplicativos) que estão usando este projeto é classificada pelo novo horário. Se você o estiver usando, mas não listado na lista, mencione o problema. Bem -vindo a promover e compartilhar.
Vídeo Youku | Vídeo curto vmate | Protótipo de estrela do fogo CRM | Niu niu | Shivo Ajuda Center | Cartão WeChat Tencent | Micro pulso |
 Tencent Mobile Game Assistant | Centro Nacional de Ciência Agrícola moderna e inovação tecnológica | Valores Mobiliários de Guosheng | Código QR de velocidade | 100 educação |
Usamos o Create-SSR-App para criar projetos rapidamente e apoiar a criação de modelos de aplicativos que integram várias funções 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: Quando Node.js versão> = 15, npm init ssr-app my-ssr-project -- --template=ssr-with-js deve ser usado para passar os parâmetros
1) Inicie o serviço
Inicie a porta de ouvir 7001, usada para renderização do lado do servidor e renderização do lado do cliente. O modo de renderização é especificado por meio de consulta ou configuração.
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2) Iniciar apenas a renderização do lado do servidor e apenas o lado do servidor em saída diretamente HTML, não há passo para misturar com o cliente
$ npm run ssr3) Iniciar compilação de recursos estática do cliente
Somente para uso do desenvolvimento local, comece a ouvir em 8000 portas que hospedam recursos estáticos de front-end, equivalente ao modelo de desenvolvimento tradicional de andaimes CRA
$ npm run csr4) Scripts de suporte
$ npm run prod # 使用egg-scripts模拟SSR应用生产环境，如无特殊定制要求生产环境可以用该方式启动
$ npm run build # 打包服务端以及客户端资源文件
$ npm run analyze # 可视化分析客户端打包的资源详情Os recursos do modelo: escrita simples, funções poderosas, tudo é um componente e suporta a alternância contínua entre os modos de renderização SSR/CSR.
Mais recursos/recursos são os seguintes:
Nossa estrutura SSR em cenários sem servidor foi lançada oficialmente, se você preferir uma solução de nível superior que seja suave e espera poder implantar rapidamente. Essa estrutura é recomendada para o desenvolvimento. Nenhum conflito com este projeto, complementa -se
Em termos de escrita, a RSE e a SSR são unificadas, e o estático getinitialProps semelhante ao próximo é usado como o método de aquisição de dados
function Page ( props ) {
return < div > { props . name } </ div >
}
Page . getInitialProps = async ( ctx ) => {
return Promise . resolve ( {
name : 'Egg + React + SSR' ,
} )
}
export default PageA descrição específica é a seguinte.
Em tempo de execução, distingui -lo através config.type é a solução de renderização isomórfica mais simples no momento. Quando a inicialização da página é carregada, o GetInitialProps carrega apenas no servidor. O cliente executará apenas o GetInitialProps quando a rota saltar (o componente de link saltos ou o método da API salta).
As propriedades do objeto GetInitialProps parameter são as seguintes:
Nosso modelo básico HTML, Meta e outras tags são geradas usando JSX para evitar o uso de modelos de modelos pesados sintaxe
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 o desenvolvimento local, você pode iniciar os dois modos de renderização de SSR/CSR ao mesmo tempo para ver as diferenças. No ambiente de produção, você pode definir o atributo de tipo na configuração para alternar diferentes modos de renderização ou consulta para alternar. Quando o tráfego é grande, você pode fazer o downgrade para o modo de renderização de CSR. Documento de referência como trocar o modo de renderização
$ open http://localhost:7001/ # 以SSR模式渲染应用
$ open http://localhost:7001/ ? csr=true # 切换为CSR模式渲染或者通过config.type来设置渲染模式Para ser flexível o suficiente, forneceremos alguns itens importantes com opções configuráveis, que podem ser configuradas de acordo com as necessidades reais. Se não houver necessidade especial, use a configuração padrão. Colocamos as informações de configuração relacionadas à renderização do servidor em config.ssr.js. Aqui, recomendamos não colocar a configuração no arquivo de configuração do ovo para evitar o pacote front-end, incluindo informações do arquivo de configuração 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 a webpack-dev-server的配置
// build/webpack.config.client.js
module . epxorts = {
devServer : {
// custom webpack-dev-server config
}
} A estrutura do diretório mantém o método do ovo, principalmente o aplicativo e os diretórios de configuração. Coloque o código relacionado ao ReacT do front-end no diretório da web e os arquivos relacionados ao pacote WebPack estão localizados no diretório de compilação. No geral, não há muitos diretórios e não níveis profundos, o que é o tipo certo.
├── 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 Notas de lançamento para alterações detalhadas em cada versão
Por favor, verifique este wiki
Por favor, verifique este wiki
Obrigado a essas pessoas maravilhosas (key emoji):
Leoncheung | Tio Wolf | Xu Zhiyong ? | Menteceso | Jerryyu | Dydong | snoy | Zhaoxingyue |
Jiumu ? | Johannlai ? | Robert.xu | Zhushijie | Cheng Zhongmin ? |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!
Mit
Se você quiser entender as idéias de design deste aplicativo, faça o download e visualize o compartilhamento de PPT que fiz no NodeParty, Pequim em 2020.1.11, que discute as idéias e soluções de design para algumas questões que precisam receber atenção.
Embora tenhamos tentado o nosso melhor para verificar o aplicativo, ainda existem algumas omissões. Se você encontrar algum problema ou sugestão durante o uso, não hesite em pedir um problema ou relações públicas. Bem -vindo para digitalizar o código e participar diretamente do grupo DingTalk.
