【前端】Next.js 服务器端渲染（SSR）与客户端渲染（CSR）的最佳实践

关于Next.js 服务器端渲染（SSR）与客户端渲染（CSR）的实践内容方面，我们按下面几点进行阐述。
在这里插入图片描述

1. 原理
  • 服务器端渲染 (SSR): 在服务器上生成完整的HTML页面，然后发送给客户端。这使得用户在首次访问时能够看到一个完整的页面，而不是等待JavaScript加载后再显示内容。
  • 客户端渲染 (CSR): 页面初始加载时通常是一个空壳或简单的HTML结构，所有内容通过JavaScript动态加载和渲染。
2. 构建方式

  • SSR:

    • getServerSideProps: 用于在每个请求时获取数据，并在服务器端渲染页面。适用于需要频繁更新的数据。
      // pages/index.js
export async function getServerSideProps(context) {const res = await fetch(`https://api.example.com/data`);const data = await res.json();return {props: {data,},};
}function HomePage({ data }) {return (<div><h1>Welcome to the Home Page</h1><p>Data: {JSON.stringify(data)}</p></div>);
}export default HomePage;
    • getStaticProps: 用于在构建时预渲染页面，并且可以设置定时重新验证以更新静态生成的页面。适用于不经常变化的数据。
      // pages/about.js
export async function getStaticProps() {const res = await fetch(`https://api.example.com/static-data`);const data = await res.json();return {props: {data,},revalidate: 60, // 每60秒重新验证一次};
}function AboutPage({ data }) {return (<div><h1>About Us</h1><p>Data: {JSON.stringify(data)}</p></div>);
}export default AboutPage;
    • getInitialProps: 用于自定义服务器端渲染逻辑，但建议使用getServerSideProps或getStaticProps，因为它们提供了更好的性能和灵活性。

  • CSR:

    • 初始页面加载后，通过API调用或从本地存储中获取数据，并使用React或其他前端框架进行渲染。
    • 客户端需要支持JavaScript以正确显示页面内容。
      // pages/profile.js
import { useEffect, useState } from 'react';function ProfilePage() {const [data, setData] = useState(null);useEffect(() => {fetch('/api/profile').then((res) => res.json()).then((data) => setData(data));}, []);if (!data) {return <div>Loading...</div>;}return (<div><h1>Profile Page</h1><p>Name: {data.name}</p><p>Email: {data.email}</p></div>);
}export default ProfilePage;
3. 性能
  • SSR:
    • 优点:
      • 提供了更快的首屏加载时间，因为浏览器接收到的是完整的HTML页面。
      • 改善用户体验，特别是对于网络条件较差的用户。
      • 有利于SEO，搜索引擎可以直接读取到完整的HTML内容。
    • 缺点:
      • 每次请求都需要服务器处理，对于高并发场景可能造成性能瓶颈。
      • 需要更多的服务器资源来处理请求。
  • CSR:
    • 优点:
      • 一旦页面加载完成，后续的交互可以非常快，因为大部分工作由客户端承担。
      • 适合单页应用（SPA），提供流畅的用户体验。
    • 缺点:
      • 初始加载时间较长，特别是当应用依赖于大量JavaScript资源时。
      • 对于低性能设备或网络条件较差的用户，体验可能不佳。
4. 安全
  • SSR:
    • 更容易实现SEO优化，因为搜索引擎可以直接读取到完整的HTML内容。
    • 可以在服务器端对敏感操作进行安全检查，如身份验证、权限控制等。
    • 减少XSS攻击的风险，因为大部分内容是在服务器端生成的。
  • CSR:
    • 对于一些需要即时响应的应用来说，安全性可能更高，因为很多逻辑可以在客户端执行。
    • 但同时，也需要更加小心地处理客户端的安全问题，如XSS攻击、CSRF攻击等。
    • 需要确保API的安全性，防止未授权访问。
5. 学习成本
  • SSR:
    • 需要了解服务器端编程以及如何处理异步数据获取。
    • 如果使用Next.js，学习曲线相对较低，因为它提供了许多内置功能来简化开发过程。
    • 需要熟悉Node.js环境和服务器配置。
  • CSR:
    • 主要集中在前端技术栈的学习，如React、Vue等。
    • 对于初学者来说，可能更容易上手，尤其是那些已经熟悉JavaScript和现代前端框架的人。
    • 不需要深入了解服务器端编程，但需要掌握前端状态管理和路由管理。
6. 优势
  • SSR:
    • 良好的SEO表现。
    • 更快的首屏加载速度。
    • 支持更复杂的业务逻辑直接在服务器端处理。
    • 适合需要频繁更新数据的应用。
  • CSR:
    • 优秀的用户体验，特别是在单页应用（SPA）中。
    • 更加灵活的数据更新机制。
    • 简化了前后端分离的架构设计。
    • 适合需要复杂交互的应用。
7. 监测
  • SSR:
    • 可以利用传统的Web日志分析工具来监控服务器性能。
    • 需要注意服务器负载和响应时间。
    • 使用工具如New Relic、Datadog等进行性能监控。
  • CSR:
    • 侧重于前端性能监测，如页面加载时间、JavaScript执行效率等。
    • 可以使用Google Lighthouse等工具来进行综合评估。
    • 使用工具如Sentry、LogRocket等进行错误跟踪和用户体验监控。
8. 最佳实践

  • SSR:

    • 减少服务器端渲染的内容：只渲染必要的部分，避免不必要的计算和数据传输。
    • 合理使用缓存策略：使用getStaticProps结合revalidate选项来实现静态生成并按需更新。
    • 优化图片和其他静态资源的加载：使用CDN、压缩图片、懒加载等技术。
    • 避免阻塞渲染：确保关键路径上的资源尽快加载，例如CSS和JavaScript文件。
    • 代码分割：将代码分割成多个小块，按需加载，提高性能。
      // next.config.js
module.exports = {experimental: {modern: true,},webpack(config) {config.optimization.splitChunks({chunks: 'all',});return config;},
};

  • CSR:

    • 实现懒加载组件：只有当它们进入视口时才加载。
      // components/LazyImage.js
import { useEffect, useState } from 'react';function LazyImage({ src, alt }) {const [isLoaded, setIsLoaded] = useState(false);useEffect(() => {const img = new Image();img.src = src;img.onload = () => setIsLoaded(true);}, [src]);return isLoaded ? <img src={src} alt={alt} /> : null;
}export default LazyImage;
    • 使用代码分割：减少初始加载时间。
      // pages/lazy-loaded-page.js
import dynamic from 'next/dynamic';const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {ssr: false,
});function LazyLoadedPage() {return (<div><h1>Lazy Loaded Page</h1><DynamicComponent /></div>);
}export default LazyLoadedPage;
    • 优化JavaScript打包大小：去除不必要的库和代码。
      // package.json
"scripts": {"analyze": "cross-env ANALYZE=true next build"
}
    • 使用性能分析工具：如Webpack Bundle Analyzer来分析和优化打包结果。
      npm run analyze
9. 结合使用
  • 在实际项目中，通常会根据需求结合使用SSR和CSR。例如，首页和其他重要页面可以采用SSR以提供更好的SEO和初始加载体验；而其他交互性较强的部分则可以使用CSR来提高用户体验。
  • 混合模式：在同一个页面中，可以部分使用SSR，部分使用CSR。
    // pages/mixed-mode.js
import { useEffect, useState } from 'react';export async function getServerSideProps(context) {const res = await fetch(`https://api.example.com/initial-data`);const initialData = await res.json();return {props: {initialData,},};
}function MixedModePage({ initialData }) {const [dynamicData, setDynamicData] = useState(initialData);useEffect(() => {fetch('/api/dynamic-data').then((res) => res.json()).then((data) => setDynamicData(data));}, []);return (<div><h1>Mixed Mode Page</h1><p>Initial Data: {JSON.stringify(initialData)}</p><p>Dynamic Data: {JSON.stringify(dynamicData)}</p></div>);
}export default MixedModePage;

总结

通过上述详细说明和示例代码，我们可以更好地理解Next.js中的服务器端渲染（SSR）与客户端渲染（CSR）的区别及其最佳实践。选择合适的渲染方式取决于具体的应用场景和需求。在实际开发中，通常会结合使用两种方式，以达到最佳的性能和用户体验。此外，通过合理的架构设计、代码优化和性能监控，可以进一步提升应用的整体质量和用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/480773.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于FPGA的FM调制（载波频率、频偏、峰值、DAC输出）-带仿真文件-上板验证正确

基于FPGA的FM调制（载波频率、频偏、峰值、DAC输出）-带仿真文件-上板验证正确

基于FPGA的FM调制-带仿真文件-上板验证正确 前言一、FM调制储备知识载波频率频偏峰值个人理解 二、代码分析1.模块分析2.波形分析 总结 前言 FM、AM等调制是学习FPGA信号处理一个比较好的小项目&#xff0c;通过学习FM调制过程熟悉信号处理的一个简单流程&#xff0c;进而熟悉…
阅读更多...
Scala学习记录，统计成绩

Scala学习记录，统计成绩

统计成绩练习 1.计算每个同学的总分和平均分 2.统计每个科目的平均分 3.列出总分前三名和单科前三名&#xff0c;并保存结果到文件中 解题思路如下&#xff1a; 1.读入txt文件&#xff0c;按行读入 2.处理数据 &#xff08;1&#xff09;计算每个同学的总分平均分 import s…
阅读更多...
路由策略与路由控制实验

路由策略与路由控制实验

AR1、AR2、AR3在互联接口、Loopback0接口上激活OSPF。AR3、AR4属于IS-IS Area 49.0001&#xff0c;这两者都是Level-1路由器&#xff0c;AR3、AR4的系统ID采用0000.0000.000x格式&#xff0c;其中x为设备编号 AR1上存在三个业务网段A、B、C&#xff08;分别用Loopback1、2、3接…
阅读更多...
第J7周：对于RenseNeXt-50算法的思考

第J7周：对于RenseNeXt-50算法的思考

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 文章目录 一、前言1、导入包2、分组卷积模块3、残差单元4、堆叠残差单元5、搭建ResNeXt-50网络 二、问题思考 电脑环境&#xff1a; 语言环境&#xff1a;Pyth…
阅读更多...
某充电桩业务服务内存监控和程序行为分析

某充电桩业务服务内存监控和程序行为分析

原作者&#xff1a;展贝 原文地址&#xff1a;https://mp.weixin.qq.com/s/nnYCcVtwowvmj7Zn9XLIUg 在当今数据驱动的环境中&#xff0c;理解内存指标和程序行为对于确保应用程序的性能和可靠性至关重要。在依赖实时数据处理和高可用性的行业中尤其如此。通过利用可观测工具&am…
阅读更多...
基于SpringBoot共享汽车管理系统【附源码】

基于SpringBoot共享汽车管理系统【附源码】

基于SpringBoot共享汽车管理系统 效果如下&#xff1a; 系统注册页面 系统登陆页面 系统管理员主页面 用户信息管理页面 汽车投放管理页面 使用订单页面 汽车归还管理页面 研究背景 随着计算机技术和计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所。二十…
阅读更多...
计算机网络基础(2):网络安全/ 网络通信介质

计算机网络基础(2):网络安全/ 网络通信介质

1. 网络安全威胁 网络安全&#xff1a;目的就是要让网络入侵者进不了网络系统&#xff0c;及时强行攻入网络&#xff0c;也拿不走信息&#xff0c;改不了数据&#xff0c;看不懂信息。 事发后能审查追踪到破坏者&#xff0c;让破坏者跑不掉。 网络威胁来自多方面&#xff1a…
阅读更多...
Cesium K-means自动聚合点的原理

Cesium K-means自动聚合点的原理

Cesium K-means自动聚合点的原理 Cesium 是一个开源的 JavaScript 库&#xff0c;用于在 Web 环境中创建 3D 地球和地图应用。它能够处理地理空间数据&#xff0c;并允许开发者对大规模的地理数据进行可视化展示。在一些应用中&#xff0c;尤其是当处理大量地理坐标点时&#…
阅读更多...
JAVA：Spring Boot 3 实现 Gzip 压缩优化的技术指南

JAVA：Spring Boot 3 实现 Gzip 压缩优化的技术指南

1、简述 随着 Web 应用的用户量和数据量增加&#xff0c;网络带宽和页面加载速度逐渐成为瓶颈。为了减少数据传输量&#xff0c;提高用户体验&#xff0c;我们可以使用 Gzip 压缩 HTTP 响应。本文将介绍如何在 Spring Boot 3 中实现 Gzip 压缩优化。 2、配置 Spring Boot 3 对…
阅读更多...
TsingtaoAI具身智能高校实训方案通过华为昇腾技术认证

TsingtaoAI具身智能高校实训方案通过华为昇腾技术认证

日前&#xff0c;TsingtaoAI推出的“具身智能高校实训解决方案-从AI大模型机器人到通用具身智能”基于华为技术有限公司AI框架昇思MindSpore&#xff0c;完成并通过昇腾相互兼容性技术认证。 TsingtaoAI&华为昇腾联合解决方案 本项目“具身智能高校实训解决方案”以实现高…
阅读更多...
vitess使用记录：vtctldclient，设置分表规则

vitess使用记录：vtctldclient，设置分表规则

继续探索未完成的事情。 vitess使用记录系列已经写了好几篇了&#xff0c;记录了在测试过程中遇到的各种问题。《vitess使用&#xff1a;从部署到go客户端连接查询》、《vitess使用记录&#xff1a;vtctldclient》、《vitess使用&#xff1a;基于源码运行vtctldclient工具》整…
阅读更多...
houdini肌肉刷pin点的方法

houdini肌肉刷pin点的方法

目标&#xff1a;产生gluetoanimation这个属性 主要节点&#xff1a;attribute paint(或者muscle paint) 步骤1&#xff1a; 导入肌肉资产 导入的是rest shape的肌肉 在有侧边栏可以打开display group and attribute list&#xff0c;方便查看group。不同的肌肉块按照muscl…
阅读更多...
10个Word自动化办公脚本

10个Word自动化办公脚本

在日常工作和学习中&#xff0c;我们常常需要处理Word文档&#xff08;.docx&#xff09;。 Python提供了强大的库&#xff0c;如python-docx&#xff0c;使我们能够轻松地进行文档创建、编辑和格式化等操作。本文将分享10个使用Python编写的Word自动化脚本&#xff0c;帮助新…
阅读更多...
在开发环境中，前端（手机端），后端（电脑端），那么应该如何设置iisExpress

在开发环境中，前端（手机端），后端（电脑端），那么应该如何设置iisExpress

首先&#xff0c;要想手机端应用能成功请求后端&#xff0c;两个设备至少需在同一个局域网内&#xff0c;且IP地址互通&#xff1b; 因为ajax是http(s)://IP地址端口号的方式请求&#xff0c;但是iisExpress默认是localhost如何解决&#xff0c;并没有IP地址&#xff0c;所以手…
阅读更多...
嵌入式硬件面试题【经验】总结----会不断添加更新

嵌入式硬件面试题【经验】总结----会不断添加更新

目录 引言 一、电阻 1、电阻选型时一般从那几个方面考虑 2、上拉电阻的作用 3、PTC热敏电阻作为电源电路保险丝的工作原理 4、如果阻抗不匹配&#xff0c;有哪些后果 二、电容 1、电容选型一般从哪些方面进行考虑? 2、1uf的电容通常来滤除什么频率的信号 三、三极管…
阅读更多...
初识java（4）

初识java（4）

今天给大家分享一下java中内置类型定义时的一些要点&#xff0c;我已经整理成笔记&#xff0c;现在分享给大家。 整型变量: 注:在定义int变量时,所赋值不能超过int的范围; 了 intd:1234567890127411编译时报错,初值超过胃int 当你赋值的过而值大于这个变量能够保存的最大值…
阅读更多...
计算机毕业设计Python+LSTM天气预测系统 AI大模型问答 vue.js 可视化大屏 机器学习 深度学习 Hadoop Spark

计算机毕业设计Python+LSTM天气预测系统 AI大模型问答 vue.js 可视化大屏 机器学习 深度学习 Hadoop Spark

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…
阅读更多...
初窥 HTTP 缓存

初窥 HTTP 缓存

引言 对于前端来说, 你肯定听说过 HTTP 缓存。 当然不管你知不知道它, 对于提高网站性能和用户体验, 它都扮演着重要的角色! 它通过在客户端和服务器之间存储和重用先前获取的资源副本, 来减少网络流量和降低资源加载时间, 从而提升用户体验! 以下是 HTTP 缓存的重要性: 减少…
阅读更多...
02_Django路由Router

02_Django路由Router

二、Django路由Router 在实际开发过程中&#xff0c;一个Django 项目会包含很多的 app &#xff0c;这时候如果我们只在主路由里进行配置就会显得杂乱无章&#xff0c;所以通常会在每个 app 里&#xff0c;创建各自的urls.py路由模块&#xff0c;然后从根路由出发&#xff0c;…
阅读更多...
110页PPT战略指南：剖析Cross SWOT分析、市场洞察与内部优化方案

110页PPT战略指南：剖析Cross SWOT分析、市场洞察与内部优化方案

您看到的是一个非常全面的通过Cross SWOT制定战略方案的框架。以下是对每个部分的简要解释和补充&#xff0c;以帮助您更好地理解和应用这个框架&#xff1a; 一、通过Cross SWOT制定战略方案 1. 宏观环境 (1) PEST分析&#xff1a;评估政治&#xff08;Political&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023