企业官网建设流程全解析

肥西县建设局资询网站,企业做网站得多少钱,尚品网站建设,制作充值网站目录 前言一、React SSR 的概念二、React SSR 的核心原理1、服务端渲染 React 组件2、将 HTML 注入模板返回给浏览器3、客户端 hydration 三、React SSR 的典型流程1、完整 React SSR 渲染流程2、面试必会#xff1a;简述 React SSR 渲染流程#xff08;⭐️⭐️⭐️#xf…目录前言一、React SSR 的概念二、React SSR 的核心原理1、服务端渲染 React 组件2、将 HTML 注入模板返回给浏览器3、客户端 hydration三、React SSR 的典型流程1、完整 React SSR 渲染流程2、面试必会简述 React SSR 渲染流程⭐️⭐️⭐️四、React SSR 的数据获取方案重点 难点1、获取数据1、方式一在生命周期中获取不推荐2、方式二服务端数据预取React 官方推荐⭐️⭐️⭐️⭐️⭐️①、自定义静态方法获取 SSR 数据2、数据注入模板⭐️⭐️⭐️⭐️⭐️五、React SSR 的关键 API六、React SSR React Router七、React SSR 的常用框架1、Next.js绝对主流2、其他方案八、React SSR 架构拆分工程级九、React SSR 的性能优化1、流式渲染2、缓存1、静态资源缓存2、服务端缓存3、减少 hydration 成本十、React SSR 实战要点十一、React SSR 的常见坑非常重要1、hydration mismatch2、直接访问浏览器 API3、useLayoutEffect 警告4、样式闪烁FOUC十二、SSR 与 CSR、SSG 的全面对比前言学习 React SSR 可与 Vue 之服务端渲染SSR对比学习效率更高虽然 Vue 和 React 框架不同但 SSR 原理都是相通的。一、React SSR 的概念React SSRServer-Side Rendering 指的是在**服务端Node.js**运行 React 组件将其渲染成 完整 HTML 返回给浏览器然后在客户端执行 hydration让静态 HTML 变成可交互的 React 应用。简而言之React SSR 服务端先渲染页面结构客户端再“接管”它。SSR服务端渲染对比 CSR客户端渲染特性CSRSSRHTML 初始内容空或 minimal shell完整 HTML 内容首屏渲染时间较慢需下载 JS 再渲染较快HTML 已在服务端生成SEO 支持较差较好搜索引擎爬虫可直接抓取 HTML数据获取客户端 fetch服务端 fetch 或客户端 fetch交互完全由客户端控制初次渲染由服务端生成交互由客户端接管hydration二、React SSR 的核心原理React SSR 的核心在于 同一套 React 组件在两个环境中执行环境职责Node.js渲染 HTMLBrowser绑定事件 管理状态核心机制render hydrate——在服务端调用 React 组件生成 HTML 字符串服务端渲染 React 组件将 HTML 注入模板返回给浏览器客户端 hydration1、服务端渲染 React 组件import{renderToString}fromreact-dom/server;importAppfrom./App;consthtmlrenderToString(App/);2、将 HTML 注入模板返回给浏览器consttemplatehtml headtitleSSR Demo/title/head body div idroot${html}/div script src/bundle.js/script /body /html;res.send(template);3、客户端 hydrationimport{hydrateRoot}fromreact-dom/client;importAppfrom./App;hydrateRoot(document.getElementById(root),App/);三、React SSR 的典型流程1、完整 React SSR 渲染流程浏览器请求URL↓ Node 服务接收请求 ↓ 创建 React 应用实例 ↓ 服务端路由匹配StaticRouter ↓ 服务端数据预取 ↓ renderToString/renderToPipeableStream ↓ 生成HTML↓ 注入模板初始数据 ↓ 返回浏览器 ↓ 浏览器展示首屏 ↓ 客户端下载JS↓ hydrateReact 接管DOM ↓ 后续进入SPA模式⚠️ SSR 只负责首屏之后就是纯 SPA2、面试必会简述 React SSR 渲染流程⭐️⭐️⭐️客户端请求 URL服务端根据 URL 渲染 React 组件生成 HTML服务端返回完整 HTML 给浏览器浏览器渲染 HTML 展示首屏HTML 即可React 客户端 JS 下载并执行 hydrate接管页面交互进入 SPA后续操作可以通过客户端路由如 React Router处理无需再回服务端渲染四、React SSR 的数据获取方案重点 难点在 SSR 场景下页面在服务端渲染时就需要完成 数据获取和模板渲染因此有几个核心问题服务端渲染时需要数据普通 React SPA 组件通常在 useEffect 或 componentDidMount 中获取数据但 SSR 时这些生命周期不执行。服务端获取的数据如何注入 HTML生成的 HTML 需要包含渲染所需数据确保客户端 Hydration 后页面状态一致。客户端与服务端数据一致性避免 Hydration 警告或重复请求。方面重点难点数据获取组件静态方法fetchData/getInitialProps路由匹配组件层级深如何保证所有异步请求完成数据注入服务端渲染完成后将初始状态注入 HTML数据序列化性能和安全XSS 防护客户端复用Hydration 直接使用注入状态防止重复请求或状态不一致异步依赖处理多组件并行/串行请求异步请求顺序和依赖管理错误处理异步请求失败 → 返回 500 或 fallback如何优雅降级不阻塞 SSR1、获取数据1、方式一在生命周期中获取不推荐方法在 componentDidMount 或 useEffect 中请求数据问题服务端渲染不会执行这些生命周期初始 HTML 渲染时没有数据 → 页面空白 → SEO 不友好结论无法解决 SSR 数据预取问题只适合客户端补数据。2、方式二服务端数据预取React 官方推荐⭐️⭐️⭐️⭐️⭐️在 React SSR 中通常做法分以下四步走组件提供静态数据获取接口React 生态中常用getInitialPropsNext.js或“自定义静态方法”——例如 Component.fetchData(store, params)服务端统一收集组件数据在服务端渲染前遍历匹配的路由组件执行所有数据请求等待所有 Promise 完成后渲染渲染 HTML 时数据已准备好注入数据到模板在 script 标签中注入初始数据客户端 Hydration 时复用①、自定义静态方法获取 SSR 数据// React 组件functionPost({post}){returndiv{post.title}/div;}// 静态方法获取数据重要Post.fetchData(params)fetch(/api/posts/${params.id}).then(resres.json());// 服务端渲染asyncfunctionrender(url){constmatchedComponentsmatchRoutes(routes,url).map(cc.component);constpromisesmatchedComponents.filter(cc.fetchData).map(cc.fetchData({id:123}));constdataawaitPromise.all(promises);// 将数据注入模板consthtmlReactDOMServer.renderToString(App initialData{data}/);returndiv idroot${html}/div scriptwindow.__INITIAL_DATA__ ${JSON.stringify(data)}/script;}核心点服务端统一收集数据 → 渲染 HTML → 注入模板 → 客户端 Hydration另外在 SSR 中组件通常需要服务端数据API 数据在服务端 fetch 数据客户端再 fetch 数据优点逻辑统一缺点首屏可能白屏或闪烁2、数据注入模板⭐️⭐️⭐️⭐️⭐️注入模板主要目的是服务端渲染 HTML 时直接使用数据客户端 Hydration 时复用数据避免重复请求dividroot${html}/divscriptwindow.__INITIAL_DATA__{...}!--服务端注入--/script客户端使用constinitialDatawindow.__INITIAL_DATA__;constrootdocument.getElementById(root);ReactDOM.hydrate(App initialData{initialData}/,root);重点保证服务端和客户端的数据一致避免 Hydration 报错或二次请求五、React SSR 的关键 APIAPI作用备注renderToString服务端生成 HTML 字符串不包含事件绑定renderToStaticMarkup服务端生成静态 HTML无额外 React 属性SEO 优化减少额外属性hydrateRoot客户端接管服务端渲染的 HTMLReact 18 推荐用法Suspense服务器端支持异步组件React 18 SSR 支持并发模式renderToPipeableStreamReact 18 新增 SSR 流式渲染支持首屏更快渲染和可中断流React 18 引入了流式 SSR使得 首屏渲染速度 和 时间到交互TTI 更优秀。六、React SSR React RouterReact Router v6 支持 SSR。服务端import{StaticRouter}fromreact-router-dom/serverStaticRouter location{req.url}App//StaticRouter客户端import{BrowserRouter}fromreact-router-dom环境Router服务端StaticRouter客户端BrowserRouter七、React SSR 的常用框架1、Next.js绝对主流React 官方推荐内置SSR / SSG / ISR路由数据获取SEOEdge SSRexportdefaultfunctionPage({data}){}2、其他方案框架特点Remix数据优先Razzle零配置自建灵活但复杂八、React SSR 架构拆分工程级标准三入口结构src/├── App.tsx ├── entry-client.tsx └── entry-server.tsxentry-server.tsx“consthtmlrenderToString(StaticRouter location{url}App//StaticRouter)entry-client.tsxhydrateRoot(document.getElementById(root),BrowserRouterApp//BrowserRouter)九、React SSR 的性能优化1、流式渲染renderToPipeableStream 支持边渲染边发送 HTML可配合 Node.js res.write 实现更快首屏renderToPipeableStream 流式渲染renderToPipeableStream(App/,{onShellReady(){stream.pipe(res)}})2、缓存1、静态资源缓存SSR HTML 可做短期缓存静态 JS/CSS 可 CDN 缓存2、服务端缓存页面渲染结果可缓存到 Redis 或内存减少重复渲染开销3、减少 hydration 成本避免不必要的状态合理拆 Suspense 边界十、React SSR 实战要点每个请求必须是新 React 树服务端与客户端代码必须一致数据必须在 render 前准备好状态必须注入给客户端优先使用框架Next.jsSSR 只做首屏十一、React SSR 的常见坑非常重要1、hydration mismatch❌ 错误再现Math.random()Date.now()✔ 正确useEffect(()setTime(Date.now()),[])2、直接访问浏览器 APISSR 阶段只负责“算 HTML 字符串”不是“跑页面”。❌ 下面这些 API 在 React SSR 中「绝对不能直接用」window document localStorage✅ 标准写法必须牢记if(typeofwindow!undefined){// 浏览器环境}✅ 或者 放进 useEffect推荐例如useEffect((){consttokenlocalStorage.getItem(token)},[])useEffect 永远不会在 SSR 执行。3、useLayoutEffect 警告useLayoutEffect → SSR 下会报警。✔ 替代useEffect4、样式闪烁FOUCCSS 未提前注入Next.js / CSS-in-JS 需配置 SSR十二、SSR 与 CSR、SSG 的全面对比对比维度CSR客户端渲染SSR服务端渲染SSG静态站点生成渲染发生位置浏览器执行 JS 渲染服务器实时渲染 HTML构建阶段预生成 HTML渲染时机页面加载后由 JS 渲染每次请求动态生成构建时一次性生成首屏速度 最慢JS 执行后才出内容 快服务器已渲染 最快CDN 直接返回 HTMLSEO 效果⭐较差依赖 JS⭐⭐⭐⭐完美⭐⭐⭐⭐完美页面动态能力⭐⭐⭐前端自由拉 API⭐⭐⭐⭐实时内容⭐内容固定需重构建或 ISR服务器压力0仅 API 压力高每次访问都需渲染0纯静态资源部署成本低静态资源即可高需要 Node 服务超低CDN 即可可扩展性⭐⭐⭐⭐静态资源无限扩展⭐⭐依赖服务器扩容⭐⭐⭐⭐CDN 无限扩展用户交互体验⭐⭐⭐⭐SPA 最强体验中等中等工程复杂度高所有逻辑在前端中简单构建速度快中慢页面越多越慢适合项目类型工具型 WebApp、后台系统电商、新闻、动态内容 SEO博客、文档、官网典型场景SaaS、仪表盘、在线编辑器商品页、新闻页、用户中心内容稳定、偶尔更新的网站代表框架与模式React/Vue SPA fetch API1、Next.js -getServerSideProps2、Nuxt.js -asyncDatad1、Next.jsgetStaticProps2、Nuxt.js -asyncData优点总结强交互、低成本、高灵活度首屏快、SEO 强、动态内容强极快、极便宜、SEO 佳、无服务器缺点总结首屏慢、SEO 差成本高、服务器压力大不适合经常变化的内容