服务器端渲染（SSR）实战解析 在当今的Web开发领域，服务器端渲染（SSR，Server-Side Rendering）作为一种经典且高效的页面渲染技术，仍然占据着不可替代的地位

    特别是在追求首屏加载速度和用户体验的电商导购页、挖客分享页等场景中，SSR的优势尤为明显

    本文将通过实例，深入解析SSR的实现原理及过程，展现其强大的说服力和实际应用价值

     一、SSR的基本概念与优势 SSR，即服务器端渲染，是指将页面的HTML生成工作放在服务端进行

    服务器在接收到客户端请求后，将数据和模板拼接成完整的页面，然后直接返回给客户端进行渲染

    这一流程与早期的Web开发模式相似，但在SPA（单页面应用）盛行的今天，SSR为何仍能焕发新生？ 这主要得益于SSR的显著优势： 1.首屏渲染速度快：由于HTML内容在服务端已经生成并填充完毕，客户端只需接收完整的HTML页面即可进行渲染，无需等待JavaScript执行和DOM构建，从而显著提高了首屏渲染速度

     2.SEO友好：搜索引擎爬虫可以更容易地抓取到服务端渲染的页面内容，有利于网站的搜索引擎优化

     3.更好的兼容性：对于不支持JavaScript或JavaScript执行受限的浏览器和设备，SSR依然能够提供完整的页面内容

     二、SSR实战：基于React的SSR项目搭建 接下来，我们将通过搭建一个基于React的SSR项目，来深入了解SSR的实现过程

     1. 项目前置准备 首先，我们需要创建一个新的React项目，并为其配置SSR所需的环境

     （1）创建React项目： 使用Create React App快速创建一个新的React项目，并安装必要的依赖

     npx create-react-app react-ssr-demo cd react-ssr-demo npm install express react-dom/server @babel/core babel-loader webpack webpack-cli webpack-merge webpack-node-externals cross-env nodemon --save-dev （2）项目结构规划： 为了方便管理和开发，我们需要对项目结构进行合理规划

    可以创建以下目录和文件： react-ssr-demo/ ├── build/ 构建输出目录 ├── public/ 静态资源目录 ├── src/ │ ├── client/ 客户端代码 │ ├── server/ 服务端代码 │ ├── components/ 公共组件 │ ├── App.js# 根组件 │ ├── index.js# 客户端入口文件 │ └── server.js# 服务端入口文件 ├── webpack.base.js# Webpack基础配置 ├── webpack.client.js Webpack客户端配置 ├── webpack.server.js Webpack服务端配置 ├── package.json# 项目依赖和脚本 └── .babelrc# Babel配置 2. 配置Webpack 为了实现SSR，我们需要分别为客户端和服务端配置Webpack

     （1）Webpack基础配置（webpack.base.js）： const path = require(path); module.exports ={ entry: ./src/index.js, output: { filename: bundle.js, path: path.resolve(__dirname, build), }, module: { rules: 【 { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: babel-loader, }, }, // 其他loader配置... 】, }, resolve: { extensions: 【.js, .jsx】, }, }; （2）Webpack客户端配置（webpack.client.js）： const {merge } = require(webpack-merge); const base = require(./webpack.base.js); module.exports =merge(base,{ target: web, // 其他客户端特有配置... }); （3）Webpack服务端配置（webpack.server.js）： const path = require(path); const {merge } = require(webpack-merge); const base = require(./webpack.base.js); const nodeExternals = require(webpack-node-externals); module.exports =merge(base,{ target: node, entry: ./src/server.js, output: { filename: server.js, path: path.resolve(__dirname, build), libraryTarget: commonjs2, }, externals: 【nodeExternals()】, // 排除node_modules中的第三方库 // 其他服务端特有配置... }); 3. 编写服务端和客户端代码 （1）客户端代码（src/client/index.js）： import React from react; import ReactDOM from react-dom/client; import App from ../App; const root = ReactDOM.createRoot(document.getElementById(root)); root.render( ); （2）服务端代码（src/server/index.js）： const express = require(express); const React = require(react); const ReactDOMServer =require(react-dom/server); const App = require(../App).default; const path = require(path); const fs = require(fs); const app = express(); const template = fs.readFileSync(path.resolve(__dirname, ../public/index.html), utf-8); app.get(, (req, res) => { const appString = ReactDOMServer.renderToString(); const html = template.replace(

`); res.send(html); }); app.listen(3000, ()=> { console.log(Server started on port 3000); }); （3）根组件（src/App.js）： import React from react; const App= ()=> { return( ); }; export default App; （4）HTML模板（public/index.html）： html> 4. 修改package.json脚本 为了方便开发和构建，我们需要在package.json中添加相应的脚本命令

     scripts: { start: nodemon --watch build --exec node ./build/server.js, build:client: webpack --config webpack.client.js --mode production, build:server: webpack --config webpack.server.js --mode production, build: npm run build:client && npm run build:server, dev: npm-run-all --pa