【前端】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: 用于自定义服务器端渲染逻辑,但建议使用getServerSidePropsgetStaticProps,因为它们提供了更好的性能和灵活性。
  • 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.mzph.cn/pingmian/62399.shtml

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

相关文章

【机器学习】机器学习的基本分类-监督学习-逻辑回归-对数似然损失函数(Log-Likelihood Loss Function)

对数似然损失函数&#xff08;Log-Likelihood Loss Function&#xff09; 对数似然损失函数是机器学习和统计学中广泛使用的一种损失函数&#xff0c;特别是在分类问题&#xff08;例如逻辑回归、神经网络&#xff09;中应用最为广泛。它基于最大似然估计原理&#xff0c;通过…

【Qt】QDateTimeEdit控件实现清空(不保留默认时间/最小时间)

一、QDateTimeEdit控件 QDateTimeEdit 提供了一个用于编辑日期和时间的控件。用户可以通过键盘或使用上下箭头键来增加或减少日期和时间值。日期和时间的显示格式根据设置的格式显示&#xff0c;可以通过 setDisplayFormat() 方法来设置。 二、如何清空 我在使用的时候&#…

基于BERT的语义分析实现

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

操作系统存储器相关习题

1 为什么要配置层次式存储器? 设置多个存储器可以使存储器两端的硬件能并行工作&#xff1b; 采用多级存储系统特别是Cache技术&#xff0c;是减轻存储器带宽对系统性能影响的最佳结构方案&#xff1b; 在微处理机内部设置各种缓冲存储器&#xff0c;减轻对存储器存取的压力。…

HarmonyOS NEXT应用开发,关于useNormalizedOHMUrl选项的坑

起因是这样的&#xff1a;我这库打包发布出问题了&#xff0c;这个有遇到的吗&#xff1f; 源码里面就没有 request .d.ts,这打包后哪来个这文件&#xff1f;且漏掉了其他文件。 猫哥csdn.yyz_1987 为啥我打包的har里面&#xff0c;只有接口&#xff0c;没有具体实现呢&#x…

单点登录原理

允许跨域–>单点登录。 例如https://www.jd.com/ 同一个浏览器下&#xff1a;通过登录页面产生的cookie里的一个随机字符串的标识&#xff0c;在其他子域名下访问共享cookie获取标识进行单点登录&#xff0c;如果没有该标识则返回登录页进行登录。 在hosts文件下面做的域名…

基于Java的小程序电商商城开源设计源码

近年来电商模式的发展越来越成熟&#xff0c;基于 Java 开发的小程序电商商城开源源码&#xff0c;为众多开发者和企业提供了构建个性化电商平台的有力工具。 基于Java的电子商城购物平台小程序的设计在手机上运行&#xff0c;可以实现管理员&#xff1b;首页、个人中心、用户…

Linux查看网络基础命令

文章目录 Linux网络基础命令1. ifconfig 和 ip一、ifconfig命令二、ip命令 2. ss命令一、基本用法二、常用选项三、输出信息四、使用示例 3. sar 命令一、使用sar查看网络使用情况 4. ping 命令一、基本用法二、常用选项三、输出结果四、使用示例 Linux网络基础命令 1. ifconf…

程序设计 26种设计模式,如何分类?

1. 创建型模式 (Creational Patterns) 这些模式关注如何实例化对象。它们通过各种方式封装对象的创建过程&#xff0c;从而提供灵活性和可扩展性。 单例模式 (Singleton)&#xff1a;确保某个类只有一个实例&#xff0c;并提供全局访问点。工厂方法模式 (Factory Method)&…

右值引用和移动语义:

C 右值引用和移动语义详解 在 C 的发展历程中&#xff0c;右值引用和移动语义的引入带来了显著的性能提升和编程灵活性。本文将深入探讨右值引用和移动语义的概念、用法以及重要性。 一、引言 C 作为一门高效的编程语言&#xff0c;一直在不断演进以满足现代软件编程的需求。…

图形渲染性能优化

variable rate shading conditional render 设置可见性等&#xff0c; 不需要重新build command buffer indirect draw glMultiDraw* - 直接支持多次绘制glMultiDrawIndirect - 间接多次绘制multithreading 多线程录制 实例化渲染 lod texture array 小对象剔除 投影到…

SpringMVC工作原理【流程图+文字详解SpringMVC工作原理】

SpringMVC工作原理 前端控制器&#xff1a;DispactherServlet处理器映射器&#xff1a;HandlerMapping处理器适配器&#xff1a;HandlerAdapter处理器&#xff1a;Handler&#xff0c;视图解析器&#xff1a;ViewResolver视图&#xff1a;View 首先用户通过浏览器发起HTTP请求…

12寸先进封装设备之-晶圆减薄一体机

晶圆减薄一体机在先进封装厂中的主要作用是对已完成功能的晶圆(主要是硅晶片)的背面基体材料进行磨削,去掉一定厚度的材料,以满足后续封装工艺的要求以及芯片的物理强度、散热性和尺寸要求。随着3D封装技术的发展,晶圆厚度需要减薄至50-100μm甚至更薄,以实现更好的散热效…

CTF之WEB(php弱类型绕过)

PHP 的弱类型特性有时会导致意外的行为&#xff0c;特别是在类型比较时。这些特性可以被利用来绕过一些预期的安全检查。以下是一些常见的 PHP 弱类型绕过技巧及其解释&#xff1a; 类型介绍 1. 类型比较 ( vs ) 在 PHP 中&#xff0c; 是松散比较&#xff0c;而 是严格比较…

【mysql】字段区分大小写,设置字符集SET utf8mb4 COLLATE utf8mb4_bin

1. 背景 由于 varchar(100) 不区分字段大小写 2. 解决办法 SET utf8mb4 COLLATE utf8mb4_bin 需要设置字符集就可以实现区分大小写

Online Judge——【前端项目初始化】项目通用布局开发及初始化

目录 一、新建layouts二、更新App.vue文件三、选择一个布局&#xff08;Layout&#xff09;四、通用菜单Menu的实现菜单路由改为读取路由文件 五、绑定跳转事件六、同步路由到菜单项 一、新建layouts 这里新建一个专门存放布局的布局文件layouts&#xff1a; 然后在该文件夹&…

十四(AJAX)、AJAX、axios、常用请求方法(GET POST...)、HTTP协议、接口文档、form-serialize

1. AJAX介绍及axios基本使用 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content&q…

原生js上传图片

无样式上传图片 创建一个 FormData 对象&#xff1a;这个对象可以用于存储数据。 将文件添加到 FormData 对象&#xff1a;通过 append() 方法&#xff0c;将用户选择的文件添加到 formData 对象中。 使用 fetch 发送请求&#xff1a;使用 fetch API 或者其他方法将 FormDat…

53 基于单片机的8路抢答器加记分

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 首先有三个按键 分别为开始 暂停 复位&#xff0c;然后八个选手按键&#xff0c;开机显示四条杠&#xff0c;然后按一号选手按键&#xff0c;数码管显示&#xff13;&#xff10;&#xff0c;这…

【深度学习】各种卷积—卷积、反卷积、空洞卷积、可分离卷积、分组卷积

在全连接神经网络中&#xff0c;每个神经元都和上一层的所有神经元彼此连接&#xff0c;这会导致网络的参数量非常大&#xff0c;难以实现复杂数据的处理。为了改善这种情况&#xff0c;卷积神经网络应运而生。 一、卷积 在信号处理中&#xff0c;卷积被定义为一个函数经过翻转…