egg react ssr
本地提前编译layout
Упрощенный китайский | Английский
Примечание: для богатства и обслуживаемости признаков
egg-react-ssrбольше не рекомендуется. Теперь рекомендуется использовать новейшиеssr-структуру, которая может одновременно поддерживать использование сценариев React и Vue2/3 и поддерживать использование VITE. Мы настоятельно рекомендуем вам использовать новую обновленную версию, которая значительно улучшила механизм рендеринга, богатство и обслуживаемость и была проверена несколькими крупными онлайн -проектами. Если вы предпочитаете необычный опыт и хотите использовать возможности без сервера для развертывания приложений за один клик или использовать VUE2/VUE3 для рендеринга на стороне сервера. Ссылка на проект https://github.com/zhangyuan/ssr Официальный документ http://doc.ssr-fc.com/ Мы продолжим обновлять и поддерживать его
Минимальный и красивый шаблон приложения на стороне сервера, функции
Список компаний (приложений), которые используют этот проект, отсортируется по новому времени. Если вы используете его, но не указаны в списке, упомяните проблему. Добро пожаловать, чтобы продвигать и поделиться.
Youku Video | Vmate Short Video | Прототип Fire Star CRM | Ниу Ниу | Шиво справочный центр | Tencent WeChat Card | Микропульс |
 Помощник мобильной игры Tencent | Национальный центр современных сельскохозяйственных наук и технологий инноваций | Goosheng Securities | Скорость 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) Запустите статический компиляцию ресурсов клиента
Только для местного использования разработки начните слушать на 8000 хостинговых статических ресурсов, эквивалентно традиционной модели разработки каркасов CRA
$ 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, Meta и другие теги генерируются с использованием 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 одновременно, чтобы просмотреть различия. В производственной среде вы можете установить атрибут типа в конфигурации для переключения различных режимов рендеринга или запроса на переключение. Когда трафик большой, вы можете понизить режим рендеринга 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
}
} Структура каталога поддерживает метод яиц, в основном приложения и каталоги приложения и конфигурации. Поместите код, связанный срезом, связанный с реакцией в веб-каталог, а файлы, связанные с пакетом 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Пожалуйста, смотрите заметки о выпуске для подробных изменений в каждой версии
Пожалуйста, проверьте эту вики
Пожалуйста, проверьте эту вики
Спасибо этим замечательным людям (ключ эмодзи):
Леончеунг | Дядя Вольф | Сюй Чжийон ? | Menteceso | Джеррию | Dydong | звенье | Zhaoxingyue |
Jiumu ? | Иоганнлай ? | Robert.xu | Zhushijie | Ченг Чжунмин ? |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
Грань
Если вы хотите понять идеи дизайна этого приложения, пожалуйста, загрузите и просмотрите общий PPT, который я сделал в Nodeparty, Пекин, в 2020.1.11, в котором обсуждаются идеи дизайна и решения для некоторых вопросов, на которые необходимо обратить внимание.
Хотя мы старались изо всех сил, чтобы проверить приложение, все еще есть некоторые упущения. Если вы найдете какие -либо проблемы или предложения во время использования, пожалуйста, не стесняйтесь спрашивать проблему или PR. Добро пожаловать, чтобы сканировать код и присоединиться к группе Dingtalk напрямую.
