项目简介
本项目是对原有基于 React 的旅行网站进行服务端渲染(SSR)的重构。原项目使用客户端渲染(CSR),现借助 Nextjs 技术将其重构为 SSR 模式,大幅加快首屏渲染速度,有效提升用户体验,重构后的网站能在短时间内完成页面加载,性能表现出色。
项目的主要特性和功能
- 服务端渲染(SSR):利用 Nextjs 的 SSR 技术,显著提高首屏加载速度,缩短用户等待时间。
- 优秀的性能:经测试,网站白屏时间仅 0.4 秒,首屏加载时间 2.8 秒,各项性能指标优异。
- 技术栈:采用 React、Hooks、Antd、Redux、React - redux 以及 ReduxToolkit 等前端主流技术栈,确保项目的稳定性和扩展性。
- 部署方案:通过 Docker + 阿里云 ECS + 阿里云容器镜像服务进行部署,方便项目的运维和管理。
安装使用步骤
本地运行
- 环境准备:确保开发环境已安装 Node.js 和 npm。
- 安装依赖:在项目的根目录下运行
npm install
命令,安装项目所需的依赖。 - 运行项目:在项目的根目录下运行
npm run dev
命令,启动开发服务器。 - 访问网站:在浏览器中访问
http://localhost:3000
,即可看到项目的效果。
服务器运行
本项目已进行优化部署,若需在服务器上运行,需按照部署方案制作 Docker 镜像并推送到阿里云镜像仓库,然后从 ECS 服务器拉取镜像进行运行。
项目演示
点击链接查看项目演示(不要使用代理,否则网站将无法正常访问)
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】