基于React-SSR的MOO音乐风格网站开发解析
这个项目是一个基于React SSR的仿MOO音乐风格的音乐网站，命名为pika-music。它的API服务器参考了Binaryify的项目，技术特点包括：
技术特点
- PWA支持：在支持PWA的浏览器中，可以将网站安装到桌面，提升用户体验。
- React-SSR框架：采用SSR动态导入技术，通过webpack打包来支持模块和名词模式，同时实现了全站图片懒加载，提升了页面加载速度。
- Webpack5支持：升级至Webpack5，优化打包流程，提升了开发效率。
其他特点
- HTTP2支持：提高页面加载速度，提供更好的用户体验。
- 安卓端支持锁屏音乐控制：提升移动端的交互体验。
- 多媒体组件：包括banner轮播组件和视频/音频播放组件，丰富了网站的交互性。
React-SSR框架的实现
这个项目参考了NextJS的架构。首屏服务端渲染时，会调用组件的getInitialProps(store)方法，获取页面数据后将数据存储在redux store中。页面在客户端hydrate时，从redux store中获取数据，然后注入到initialData中，后续的数据获取和更新由swr负责。
以首页为例，项目中有一个名为ConnectCompReducer的父类，通过继承来处理各个组件的数据和状态管理。
文件大小：322.15KB
评论区