当前位置: 首页 > news >正文

next实现原理

Next.js 是一个基于 React 的 服务器端渲染(SSR)静态生成(SSG) 框架,它的实现原理涉及多个关键技术点,包括 服务端渲染(SSR)静态生成(SSG)客户端渲染(CSR)增量静态再生(ISR)API 路由 等。


1. Next.js 核心实现原理

1.1. 页面预渲染(SSR 和 SSG)

Next.js 通过 预渲染(Pre-rendering) 提前生成 HTML,而不是像 React 传统的客户端渲染那样在浏览器中执行 JavaScript 后再渲染。

(1) 服务器端渲染(SSR)
  • 函数getServerSideProps
  • 原理
    • 每次请求都会在服务器上执行 getServerSideProps,返回数据后再渲染 HTML。
    • 适用于需要实时数据的页面(如用户个性化页面、动态数据请求)。
    • 示例
      export async function getServerSideProps(context) {const res = await fetch('https://api.example.com/data');const data = await res.json();return { props: { data } };
      }
      
    • 流程
      1. 用户请求页面。
      2. Next.js 服务器执行 getServerSideProps 获取数据。
      3. 服务器返回 HTML,浏览器解析并显示。
(2) 静态生成(SSG)
  • 函数getStaticProps
  • 原理
    • 构建时(Build Time) 预先生成 HTML。
    • 适用于数据不频繁变化的页面(如博客文章、文档)。
    • 示例
      export async function getStaticProps() {const res = await fetch('https://api.example.com/data');const data = await res.json();return { props: { data } };
      }
      
    • 流程
      1. next build 阶段预渲染 HTML。
      2. 访问时直接返回 HTML,速度极快。
(3) 增量静态再生(ISR)
  • 函数getStaticProps + revalidate
  • 原理
    • 在 SSG 基础上,支持 定期重新生成 页面,不需要重新部署。
    • 示例
      export async function getStaticProps() {const res = await fetch('https://api.example.com/data');const data = await res.json();return { props: { data }, revalidate: 10 }; // 10秒后重新生成
      }
      
    • 流程
      1. 初次访问使用缓存的 HTML。
      2. revalidate 时间后,Next.js 触发 后台再生(不会影响当前用户)。
      3. 重新生成 HTML 并更新缓存。

2. Next.js 的路由机制

2.1. 文件系统路由

  • 通过 pages 目录自动生成路由:
    pages/
    ├── index.tsx      # 访问 `/`
    ├── about.tsx      # 访问 `/about`
    ├── blog/
    │   ├── index.tsx  # 访问 `/blog`
    │   ├── [id].tsx   # 动态路由 `/blog/:id`
    
  • 动态路由
    function BlogPost({ id }) {return <h1>Blog Post {id}</h1>;
    }export async function getStaticPaths() {return {paths: [{ params: { id: '1' } }, { params: { id: '2' } }],fallback: false,};
    }export async function getStaticProps({ params }) {return { props: { id: params.id } };
    }
    
    原理
    • getStaticPaths 预定义可能的路由。
    • getStaticProps 预取数据并生成静态页面。

3. 数据获取方式

Next.js 提供 四种 数据获取方式:

方法执行时机适用场景
getStaticProps构建时(Build Time)静态页面(如博客、文档)
getServerSideProps请求时(Request Time)需要实时数据(如用户个性化页面)
getStaticPaths构建时(Build Time)预定义动态路由(如博客详情)
API 路由 (pages/api)服务器端 API处理后端请求,如数据库交互

4. API 路由

  • Next.js 允许创建 API 端点,无需额外搭建后端:
    pages/api/
    ├── hello.ts  # 访问 `/api/hello`
    
  • 示例
    export default function handler(req, res) {res.status(200).json({ message: "Hello from API" });
    }
    
  • 应用
    • 作为 BFF(Backend For Frontend),连接数据库或第三方 API。

5. 中间层架构

Next.js 既可以:

  • 作为 前端框架(纯前端渲染)。
  • 作为 后端服务器(支持 API 和 SSR)。
  • 通过 边缘计算(Edge Functions) 实现更快的响应。

6. Next.js 的优化

6.1. 自动代码拆分

  • 只加载 当前页面 需要的代码,减少初次加载时间。
  • 通过 动态导入(dynamic import) 进一步优化:
    import dynamic from "next/dynamic";
    const HeavyComponent = dynamic(() => import("../components/Heavy"), { ssr: false });
    

6.2. 图片优化

  • 内置 next/image 组件,自动 懒加载CDN 加速
    import Image from 'next/image';<Image src="/logo.png" width={200} height={100} alt="Logo" />
    

6.3. SEO 友好

  • next/head 提供 自定义 Meta 标签
    import Head from 'next/head';function HomePage() {return (<><Head><title>My Next.js App</title><meta name="description" content="Next.js is awesome!" /></Head><h1>Welcome to Next.js</h1></>);
    }
    

总结

功能Next.js 方案作用
SSRgetServerSideProps实时数据,适用于动态页面
SSGgetStaticProps预渲染静态页面,适用于博客、文档
ISRrevalidate静态+动态结合,适用于经常变更但无需实时的页面
APIpages/api服务器端 API,后端功能
动态路由[id].tsx生成动态页面
图片优化next/image自动懒加载、CDN
代码拆分dynamic import仅加载必要代码

Next.js 通过 SSR、SSG、ISR、API 路由等功能,大大提高了 渲染性能、SEO 友好性和开发体验,是现代 Web 开发的首选框架之一。 🚀

相关文章:

next实现原理

Next.js 是一个基于 React 的 服务器端渲染&#xff08;SSR&#xff09; 和 静态生成&#xff08;SSG&#xff09; 框架&#xff0c;它的实现原理涉及多个关键技术点&#xff0c;包括 服务端渲染&#xff08;SSR&#xff09;、静态生成&#xff08;SSG&#xff09;、客户端渲染…...

LeetCode 热题 100 53. 最大子数组和

LeetCode 热题 100 | 53. 最大子数组和 大家好&#xff0c;今天我们来解决一道经典的算法题——最大子数组和。这道题在 LeetCode 上被标记为中等难度&#xff0c;要求我们找出一个具有最大和的连续子数组&#xff0c;并返回其最大和。下面我将详细讲解解题思路&#xff0c;并…...

DeepSeek 与大数据治理:AI 赋能数据管理的未来

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 在当今数字化时代&#xff0c;数据已成为企业和机构的重要资产&#xff0c;而大数据治理&#xff08;Big Data Governan…...

【时时三省】(C语言基础)浮点型数据

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 浮点型数据 浮点型数据是用来表示具有小数点的实数的&#xff0c;为什么在C中把实数称为浮点数呢?在C语言中&#xff0c;实数是以指数正式存放在在储单元中的。一个实数表示为指数可以有不…...

【大模型】Ollama本地部署DeepSeek大模型:打造专属AI助手

【大模型】Ollama本地部署DeepSeek大模型&#xff1a;打造专属AI助手 Ollama本地部署DeepSeek大模型&#xff1a;打造专属AI助手一、Ollama简介二、硬件需求三、部署步骤1. 下载并安装Ollama&#xff08;1&#xff09;访问Ollama官网&#xff08;2&#xff09;安装Ollama 2. 配…...

2025.3.2机器学习笔记:PINN文献阅读

2025.3.2周报 一、文献阅读题目信息摘要Abstract创新点网络架构实验结论不足以及展望 一、文献阅读 题目信息 题目&#xff1a; Physics-Informed Neural Networks of the Saint-Venant Equations for Downscaling a Large-Scale River Model期刊&#xff1a; Water Resource…...

数据集笔记:新加坡 地铁(MRT)和轻轨(LRT)票价

数据连接 data.gov.sg 2024 年 12 月 28 日起生效的新加坡地铁票价 该数据集包含 MRT 和 LRT 票价的信息&#xff0c;包括&#xff1a; 票价类型&#xff08;Fare Type&#xff09;&#xff1a;成人票、学生票、老年人票、残障人士票等。适用时间&#xff08;Applicable Tim…...

如何修改安全帽/反光衣检测AI边缘计算智能分析网关V4的IP地址?

TSINGSEE青犀推出的智能分析网关V4&#xff0c;是一款集成了BM1684芯片的高性能AI边缘计算智能硬件。其内置的高性能8核ARM A53处理器&#xff0c;主频可高达2.3GHz&#xff0c;INT8峰值算力更是达到了惊人的17.6Tops。此外&#xff0c;该硬件还预装了近40种AI算法模型&#xf…...

Java 大视界 -- 基于 Java 的大数据分布式缓存一致性维护策略解析(109)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

SyntaxError: positional argument follows keyword argument

命令行里面日常练手爬虫不注意遇到的问题&#xff0c;报错说参数位置不正确 修改代码后&#xff0c;运行如下图&#xff1a; 结果&#xff1a; 希望各位也能顺利解决问题&#xff0c;祝你好运&#xff01;...

Ruby基础

一、字符串 定义 283.to_s //转为string "something#{a}" //定义字符串&#xff0c;并且插入a变量的值 something//单引号定义变量 %q(aaaaaaaaa) // 定义字符串&#xff0c;&#xff08;&#xff09;内可以是任何数&#xff0c;自动转义双引号%Q("aaaaa"…...

JMeter 断言最佳实践

JMeter 断言最佳实践 一、引言 在使用 JMeter 进行性能测试或功能测试时&#xff0c;断言是非常重要的一部分。断言可以帮助我们验证接口返回的结果是否符合预期&#xff0c;确保测试的准确性和可靠性。本文将介绍 JMeter 中常见的断言类型、使用这些断言的最佳实践&#xff…...

【Android】类加载器热修复-随记(二)

1. 背景 在【Android】类加载器&热修复-随记一文中了解了类加载,要完成完整的热修复过程,我们需要构建出差量jar包。而这构建差量包分为两个步骤: 原包,注解解析和插桩;变更后,差量包构建;在这两步过程中会涉及到较多的字节码操作,这里我们需要了解下。我们都听过…...

从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(八) 聊天框用户列表

简单画了个聊天框 就是咱们的HomePage.jsx 1.后端接口开发 在server/src/index.js 新增 messagesRoutes 先引入 import messageRoutes from ./routes/message.route.js // 消息接口 app.use(/api/messages, messageRoutes) 在routes文件夹下新建message.route.js 有3个路…...

Linux网络 TCP全连接队列与tcpdump抓包

TCP全连接队列 在 Linux 网络中&#xff0c;TCP 全连接队列&#xff08;也称为 Accept 队列&#xff09;是一个重要的概念&#xff0c;用于管理已经完成三次握手&#xff0c;即已经处于 established 状态但尚未被应用程序通过 accept( ) 函数处理的 TCP 连接&#xff0c;避免因…...

水滴tabbar canvas实现思路

废话不多说之间看效果图,只要解决了这个效果水滴tabbar就能做出来了 源码地址 一、核心实现步骤分解 布局结构搭建 使用 作为绘制容器 设置 width=600, height=200 基础尺寸 通过 JS 动态计算实际尺寸(适配高清屏) function initCanvas() {// 获取设备像素比(解决 Re…...

鸿蒙通过用户首选项实现数据持久化

鸿蒙通过用户首选项实现数据持久化 1.1 场景介绍 用户首选项为应用提供Key-Value键值型的数据处理能力&#xff0c;支持应用持久化轻量级数据&#xff0c;并对其修改和查询。当用户希望有一个全局唯一存储的地方&#xff0c;可以采用用户首选项来进行存储。Preferences会将该…...

在Ubuntu中,某个文件的右下角有一把锁的标志是什么意思?

在Ubuntu中&#xff0c;某个文件的右下角有一把锁的标志是什么意思&#xff1f; 在 Ubuntu&#xff08;或其他基于 GNOME 文件管理器的 Linux 发行版&#xff09;中&#xff0c;文件或文件夹的右下角出现一把“锁”标志&#xff0c;通常表示 你当前的用户没有该文件/文件夹的写…...

7.1.1 计算机网络的组成

文章目录 物理组成功能组成工作方式完整导图 物理组成 计算机网络是将分布在不同地域的计算机组织成系统&#xff0c;便于相互之间资源共享、传递信息。 计算机网络的物理组成包括硬件和软件。硬件中包含主机、前端处理器、连接设备、通信线路。软件中包含协议和应用软件。 功…...

使用 Docker 部署 RabbitMQ 的详细指南

使用 Docker 部署 RabbitMQ 的详细指南 在现代应用程序开发中&#xff0c;消息队列系统是不可或缺的一部分。RabbitMQ 是一个流行的开源消息代理软件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。本文将详细介绍如何使用 Docker 部署 RabbitMQ&#xf…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...