【源码】基于 React 和 Webpack 的多页面 SSR 脚手架

项目简介

本项目是基于 React 和 Webpack 的多页面 SSR 脚手架，为开发者打造简洁、规范且易扩展的开发环境。它支持多页面开发，解决传统 react-router 实现多页面不符合 SSR 需求的问题。强调规范，涵盖目录、代码和组件规范，提升项目可维护性与团队协作效率。集成服务端渲染（SSR）功能，满足对 SEO 有较高要求的前端项目，开发者编写一套代码即可按需选择客户端或服务端渲染。

项目的主要特性和功能

1. 多页面支持：与常见的 react-router 实现方式不同，更契合多页面 SSR 需求。
2. 规范约束：
   • 目录结构规范：清晰分类服务端和客户端文件，便于管理维护。
   • 代码规范：借助 eslint 工具，基于 airbnb 规则并结合个人习惯部分修改。
   • 组件规范：建议单个文件代码不超 250 行，可参考人气 UI 框架开发组件。
3. 服务端渲染（SSR）：核心使用 renderToString 方法，解决前端渲染的 SEO 和首屏性能问题。通过 asyncData 方法处理页面加载数据请求，用 Mobx 进行状态管理，保证服务端和客户端数据一致。
4. 可配置性：
   • Webpack 配置：包含基础、开发、生产、客户端和服务端配置，可灵活调整。
   • Browserslist 配置：能自动适应大部分浏览器，可按需添加特定浏览器版本兼容配置。

安装使用步骤

前提条件

假设用户已经下载了本项目的源码文件。

安装依赖

text cnpm i

本地开发

npm run dev

本地 SSR

分步执行

npm run ssr-build // 生成前端 dist 目录 npm run ssr-server // 生成 SSR 服务代码 npm run ssr-start // 启动 SSR 服务

合并执行

npm run ssr

本地 SSR 调试模式

npm run ssr-build // 生成前端 dist 目录 npm run ssr-server-debug // 生成 SSR 服务代码 --watch 模式 npm run ssr-start-debug // nodemon 启动 SSR 服务

服务端渲染相关命令

text npm i // 首先需要安装依赖 npm start // 仍然使用 webpack-dev-server 作为开发模式 npm run ssr-client // 打包服务端渲染客户端静态文件 npm run ssr-server // 打包服务端渲染服务端静态文件 npm run ssr-start // 运行打包好的服务端静态文件 npm run ssr // 或者你可以一次运行上面的三个命令 npm run inspect // 运行服务端谷歌浏览器调式模式

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】