egg react ssr
本地提前编译layout
단순화 된 중국어 | 영어
참고 : 특징 풍부함과 유지 관리를 위해
egg-react-ssr더 이상 권장되지 않습니다. 이제 REACT 및 VUE2/3 시나리오의 사용을 동시에 동시에 지원하고 VITE 사용을 지원할 수있는 최신ssr프레임 워크를 사용하는 것이 좋습니다. 렌더링 메커니즘을 크게 향상시키고, 풍부함 및 유지 보수 가능성을 크게 향상 시켰으며, 여러 대형 온라인 프로젝트에 의해 검증 된 새로운 업그레이드 버전을 사용하는 것이 좋습니다. 상자 외 경험을 선호하고 서버리스 기능을 사용하여 한 번의 클릭으로 애플리케이션을 배포하거나 서버 측 렌더링에 vue2/vue3를 사용하려는 경우. 프로젝트 링크 https://github.com/zhangyuan/ssr 공식 문서 http://doc.ssr-fc.com/ 계속 업데이트하고 유지 관리합니다.
최소화되고 아름다운 서버 측 렌더링 응용 프로그램 템플릿, 기능
이 프로젝트를 사용하는 회사 (APPS) 목록은 새로운 시간에 의해 정렬됩니다. 사용 중이지만 목록에 나열되지 않은 경우 문제를 언급하십시오. 홍보 및 공유에 오신 것을 환영합니다.
Youku 비디오 | vmate 짧은 비디오 | 파이어 스타 프로토 타입 CRM | niu niu | 시보 헬프 센터 | Tencent Wechat 카드 | 마이크로 펄스 |
 Tencent 모바일 게임 어시스턴트 | 현대 농업 과학 및 기술 혁신을위한 국립 센터 | Guosheng 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) 서비스를 시작하십시오
서버 측 렌더링 및 클라이언트 측 렌더링에 사용되는 Listening Port 7001을 시작하십시오. 렌더링 모드는 쿼리 또는 구성을 통해 지정됩니다.
$ npm start # 建议以本方式启动应用，同时启动服务端渲染 + 客户端hydrate2) 서버 측 렌더링을 시작하고 서버 측만 직접 출력 할 수 있으므로 클라이언트와 혼합 할 단계가 없습니다.
$ 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의 두 렌더링 모드를 동시에 시작하여 차이점을 볼 수 있습니다. 프로덕션 환경에서는 구성에서 유형 속성을 설정하여 다른 렌더링 모드를 전환하거나 스위치로 쿼리를 전환 할 수 있습니다. 트래픽이 커지면 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
}
} 디렉토리 구조는 계란 방법, 주로 앱 및 구성 디렉토리를 유지합니다. 프론트 엔드 반응 관련 코드를 웹 디렉토리에 넣고 웹 팩 패키지 관련 파일은 빌드 디렉토리에 있습니다. 전반적으로, 디렉토리는 많지 않고 깊은 수준이 없으며, 이는 옳은 종류입니다.
├── 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각 버전에 대한 자세한 변경 사항은 릴리스 노트를 참조하십시오.
이 위키를 확인하십시오
이 위키를 확인하십시오
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
레온 성 | 늑대 삼촌 | Xu Zhiyong ? | Menteceso | Jerryyu | 디돈 | 스노이 | Zhaoxingyue |
Jiumu ? | 요하나이 ? | Robert.xu | Zhushijie | Cheng Zhongmin ? |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
MIT
이 응용 프로그램의 디자인 아이디어를 이해하려면 2020.1.11의 Beijing NodeParty에서 만든 공유 PPT를 다운로드하여주의를 기울여야하는 일부 문제에 대한 디자인 아이디어 및 솔루션을 논의하십시오.
우리는 신청서를 확인하기 위해 최선을 다했지만 여전히 약간의 누락이 있습니다. 사용 중에 문제 나 제안이 있으면 문제 나 PR을 자유롭게 요청하십시오. 코드를 스캔하고 Dingtalk 그룹에 직접 가입하는 데 오신 것을 환영합니다.
