Next.js 核心渲染模式深度解析：SSR、SSG 与 ISR

在构建现代 Web 应用时，性能和用户体验是至关重要的考量。Next.js 作为 React 生态中一个备受推崇的框架，其强大的服务端渲染（SSR）、静态站点生成（SSG）和增量静态再生（ISR）能力，为开发者提供了灵活多样的渲染策略，以应对不同场景下的性能需求。

本文将深入剖析这三种核心渲染模式，详细分析它们的工作原理、优缺点以及适用场景，并辅以图解，帮助你更好地理解和选择最适合你的渲染策略。

1. SSR (Server-Side Rendering) - 服务端渲染

工作原理

SSR 的核心思想是在用户每次请求时，由服务器动态生成完整的 HTML 页面，然后发送给浏览器。浏览器接收到的是一个包含了所有内容的、可直接渲染的 HTML 文件，而不是一个空的 HTML 文件和一堆 JavaScript 文件。

  1. 用户请求：浏览器向服务器发送页面请求。
  2. 数据获取：服务器接收到请求后，会立即执行页面组件中的数据获取函数（如 getServerSideProps）。
  3. 页面生成：服务器利用获取到的数据，在后台将 React 组件渲染成完整的 HTML 字符串。
  4. 响应发送：服务器将生成的 HTML 页面连同所需的 JavaScript 文件一起发送给浏览器。
  5. 浏览器渲染：浏览器接收到 HTML 后立即开始渲染，用户可以立刻看到页面内容。随后，JavaScript 文件加载完成，客户端接管页面，使其具备交互能力，这个过程称为Hydration (水合)。

图解

优缺点

  • 优点：
    • SEO 友好：搜索引擎爬虫可以轻松抓取到完整的页面内容，对 SEO 非常有利。
    • 数据实时性：每次请求都重新生成页面，确保数据是最新的。
    • 首屏加载速度快：用户能立即看到页面内容，无需等待 JavaScript 加载和执行。
  • 缺点：
    • 服务器负载高：每个用户请求都会占用服务器计算资源，在高并发场景下可能造成服务器压力。
    • TTFB (Time to First Byte) 较长：服务器需要等待数据获取和页面生成完成后才能返回响应，导致首个字节的到达时间较长。

适用场景

  • 需要实时数据的页面：如电商网站的商品详情页、新闻网站的实时新闻页。
  • 登录后才能访问的页面：如用户个人主页、后台管理系统。
  • 对 SEO 要求极高的页面。

2. SSG (Static Site Generation) - 静态站点生成

工作原理

SSG 是一种在**构建时（Build Time）**生成 HTML 文件的渲染模式。Next.js 会在 next build 阶段，预先生成所有页面的静态 HTML 文件，并将其部署到 CDN（内容分发网络）。当用户请求页面时，CDN 会直接返回预先生成的静态文件。

  1. 构建时：在 next build 阶段，Next.js 会执行 getStaticProps 函数来获取数据，并为每个页面路径生成静态 HTML 文件。
  2. 部署：生成的静态文件被部署到 CDN。
  3. 用户请求：浏览器向服务器发送页面请求。
  4. CDN 响应：CDN 接收到请求后，直接返回预先生成的静态 HTML 文件。
  5. 浏览器渲染：浏览器立即渲染页面，随后加载 JavaScript 并完成水合。

图解

优缺点

  • 优点：
    • 极高的性能：页面由 CDN 直接提供，加载速度极快，几乎没有服务器端计算开销。
    • 低服务器负载：服务器只需在构建时工作，运行时几乎无压力。
    • SEO 友好：与 SSR 类似，页面内容在构建时就已经存在，易于被爬虫索引。
  • 缺点：
    • 数据不实时：除非重新构建和部署，否则页面数据不会更新。
    • 构建时间长：如果页面数量巨大，构建过程可能会非常耗时。

适用场景

  • 内容不经常变动的页面：如博客文章、帮助文档、产品介绍页。
  • 对性能要求极高的网站：如官网、营销落地页。

3. ISR (Incremental Static Regeneration) - 增量静态再生

工作原理

ISR 是一种巧妙地结合了 SSR 和 SSG 优势的模式。它允许你保持 SSG 的高性能，同时又能在不重新构建整个站点的情况下，对单个页面进行更新。

  1. 构建时：与 SSG 类似，Next.js 在构建时为页面生成一个静态 HTML 文件，并设置一个 revalidate 时间间隔（例如 60 秒）。
  2. 用户首次请求：用户请求页面时，CDN 返回这个静态文件。
  3. 过期后的请求：当 revalidate 时间间隔过去后，新的用户请求会触发以下过程：
    • 旧页面立即返回：CDN 立即向用户返回旧的、过期的静态 HTML 页面。
    • 后台重新生成：与此同时，Next.js 在后台悄悄地重新执行数据获取函数（getStaticProps），并生成一个新的 HTML 文件来替换旧文件。
    • 新页面生效：后续的用户请求将接收到这个新生成的页面。

图解

优缺点

  • 优点：
    • 兼具 SSG 的高性能：页面请求依旧由 CDN 快速响应。
    • 数据更新灵活：无需重新构建整个项目，即可更新单个页面的数据。
    • 低服务器负载：只在后台按需重新生成页面，服务器压力远低于 SSR。
  • 缺点：
    • 数据非完全实时：用户在 revalidate 时间间隔内可能会看到旧的数据。
    • 首次加载可能返回旧数据：在 revalidate 间隔后的首次请求，用户会短暂地看到旧页面。

适用场景

  • 需要定期更新的静态页面：如博客列表页、新闻列表页、产品目录。
  • 既需要高性能，又需要一定数据新鲜度的场景。

总结与对比

特性SSR (Server-Side Rendering)SSG (Static Site Generation)ISR (Incremental Static Regeneration)
生成时机每次用户请求构建时 (next build)构建时 & 按需后台重新生成
数据实时性实时不实时 (除非重新构建)准实时 (有 revalidate 间隔)
性能依赖服务器响应速度，TTFB 较长极快，由 CDN 直接提供极快，由 CDN 直接提供，后台按需更新
服务器负载高，每次请求都需计算极低，仅在构建时工作低，仅在后台按需工作
适用场景登录后页面，动态内容，实时数据页面博客、文档、官网等内容不常更新的页面博客列表、产品目录等需要定期更新的静态页面

Next.js 的这三种渲染模式，并非互斥，而是可以混合使用的。例如，你可以将主页配置为 SSG 以获得最佳性能，将个人资料页配置为 SSR 以确保数据实时性，而博客列表页则使用 ISR 来平衡性能和数据新鲜度。

理解并熟练运用这些渲染模式，将是你构建高性能、可扩展的 Next.js 应用的关键。

好的，这是关于 Next.js 三种渲染模式 SSR、SSG、ISR 的 Mermaid 图解，可以直接嵌入到支持 Markdown 和 Mermaid 的文档或博客中。

1. SSR (Server-Side Rendering) - 服务端渲染

Response & Hydration
Server Process
User Request
发送 HTML 和 JS 文件
浏览器显示内容
JS 水合\n页面可交互
服务器接收请求
执行 `getServerSideProps`\n获取数据
生成完整 HTML 页面
请求页面
用户浏览器

说明: 每次用户请求都会触发服务器端的数据获取和 HTML 生成，确保了页面的实时性。

2. SSG (Static Site Generation) - 静态站点生成

Deployment & User Access
Build Time
部署到 CDN
用户浏览器请求页面
CDN 直接返回 HTML
开发者执行 `next build`
执行 `getStaticProps`\n获取数据
为每个页面生成静态 HTML

说明: 页面在构建时就已生成并部署到 CDN，因此用户访问时加载速度极快，但数据无法实时更新。

3. ISR (Incremental Static Regeneration) - 增量静态再生

Revalidation after `revalidate`
Build & Initial Access
用户再次访问\n`revalidate` 过期
CDN 立即返回旧 HTML
后台触发重新生成
生成新 HTML
CDN 更新文件
新用户获得新 HTML
开发者执行 `next build`
生成静态 HTML\n设置 `revalidate`
部署到 CDN
用户首次访问
CDN 返回旧 HTML

说明: ISR 结合了 SSG 的高性能和 SSR 的数据更新能力。在 revalidate 时间段内，用户获得旧的缓存页面；过期后，首个请求会触发后台更新，新页面将在下一次请求时生效。

SSG 构建流程深度解析

SSG 的核心思想是在开发阶段或部署阶段一次性生成所有页面的静态 HTML 文件，而不是在用户请求时动态生成。这个过程完全由 Next.js 的构建工具链完成，确保了最终产物的极高性能和稳定性。

整个 SSG 流程可以分为以下几个关键步骤：
好的，我们来详细分解一下 Next.js 中 SSR (Server-Side Rendering) 的构建流程。

SSR 构建流程深度解析

SSR 的核心思想是在每次用户请求页面时，由服务器动态地生成完整的 HTML 页面，然后发送给浏览器。这个过程确保了用户总能获取到最新的数据，并且能够立即看到页面内容，这对于搜索引擎优化（SEO）和用户体验都至关重要。

整个 SSR 流程可以分为以下几个关键步骤：

1. 构建时（Build Time）

在 next build 阶段，Next.js 仍然会做一些准备工作，但它不会像 SSG 那样生成完整的静态 HTML 文件。相反，它会：

  • 编译代码: 将 React 组件、CSS 和其他资源编译成优化的 JavaScript Bundle。
  • 代码分割: 将代码拆分成小块，以加快页面加载速度。
  • 创建服务器端代码: 为每个使用 SSR 的页面创建服务器端执行的代码包，这些代码包含了页面组件和数据获取逻辑。

这个阶段，Next.js 只是为后续的运行时（Runtime）做好了准备。最终的 HTML 页面还没有被生成。

2. 用户请求（User Request）

当用户在浏览器中输入 URL 并按下回车时，SSR 的核心流程才真正开始。

  1. 浏览器发送请求: 浏览器向 Next.js 服务器发送一个页面请求。
  2. 服务器接收请求: Next.js 服务器接收到请求后，会识别出这是一个需要进行 SSR 的页面。
3. 服务器端执行 getServerSideProps

Next.js 服务器会立即在请求的上下文中执行页面组件中的 getServerSideProps 函数。

  • 实时数据获取: 这个函数会在每次请求时运行，确保获取到的数据是最新的。你可以在这里访问请求的 Headers、Cookies、URL 查询参数等，这在 SSG 中是不可能的。
  • 处理异步操作: 就像在客户端获取数据一样，getServerSideProps 是一个异步函数，它会等待数据获取完成后再继续。
// pages/post/[slug].jsexport async function getServerSideProps(context) {const { slug } = context.params;// 假设从 API 获取实时数据，例如最新评论数const res = await fetch(`https://.../api/posts/${slug}`);const post = await res.json();if (!post) {return {notFound: true,};}return {props: { post },};
}function Post({ post }) {// 使用 post 数据渲染页面return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;
4. 服务器端渲染 (Server-Side Rendering)

getServerSideProps 返回的数据会作为 props 传递给页面组件。Next.js 服务器利用这些数据，在服务器上执行 React 组件的渲染过程。

  • 生成 HTML: 服务器将 React 组件树转换成一个完整的 HTML 字符串。这个 HTML 字符串包含了所有的页面内容，而不仅仅是一个空的骨架。
  • 内联 CSS: Next.js 也会将必要的 CSS 代码内联到 <style> 标签中，以防止页面在加载时出现“闪烁”（FOUC - Flash of Unstyled Content）。
5. 响应和水合 (Response & Hydration)

服务器将生成的完整 HTML 页面，连同客户端所需的 JavaScript 文件一起，发送给浏览器。

  1. 浏览器渲染: 浏览器接收到 HTML 后，可以立即开始解析和渲染页面。用户能够很快看到页面的内容。
  2. 客户端水合 (Hydration): 在 HTML 内容渲染的同时，浏览器开始下载并执行 JavaScript Bundle。当 JavaScript 加载完成后，它会在后台将静态的 HTML 页面“激活”，使其具备交互能力。这个过程称为水合，它将服务器端渲染的静态内容与客户端的动态行为连接起来。

SSR 构建流程的优点总结

  1. 数据实时性: 每次请求都重新获取数据并渲染，确保用户看到的内容始终是最新的。
  2. 首屏加载快: 用户无需等待 JavaScript 加载即可看到内容，提升了首屏加载体验。
  3. SEO 友好: 搜索引擎爬虫直接获取完整的 HTML，能够轻松索引所有页面内容。
  4. 完整的 HTTP 上下文: getServerSideProps 可以访问请求头、cookies 等，适用于需要用户身份验证或动态数据的场景。

SSR 是一种强大的渲染模式，它牺牲了部分构建速度和服务器负载，来换取极佳的实时性和用户体验。

1. 识别 SSG 页面

Next.js 在构建时会扫描项目中的 pages 目录，并识别出使用 getStaticProps 函数的页面。这些页面是 SSG 流程的主要处理对象。

  • getStaticProps: 这个异步函数是 SSG 的核心。它在构建时运行在服务器端，负责获取页面所需的所有数据。
  • getStaticPaths: 如果你的页面是动态路由（例如 /posts/[id]），Next.js 还需要知道需要预先生成哪些路径。getStaticPaths 函数就是为此而生，它返回一个包含所有需要生成静态页面的路径列表。
// pages/posts/[id].jsexport async function getStaticPaths() {// 假设从 API 获取所有文章 IDconst posts = await fetch('https://.../posts').then(res => res.json());// 返回一个 paths 数组，告诉 Next.js 需要生成哪些页面const paths = posts.map(post => ({params: { id: post.id },}));return { paths, fallback: false };
}export async function getStaticProps({ params }) {// 根据 ID 获取单个文章数据const post = await fetch(`https://.../posts/${params.id}`).then(res => res.json());return { props: { post } };
}function Post({ post }) {// 使用 post 数据渲染页面return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;
2. 启动构建命令 (next build)

开发者在终端运行 next build 命令，这会启动 Next.js 的构建过程。

3. 执行 getStaticPaths (仅限动态路由)

如果页面是动态路由，Next.js 会首先运行 getStaticPaths 函数。它会遍历 paths 数组，为每一个路径生成一个独立的页面。这个步骤至关重要，它告诉 Next.js 需要为哪些动态 ID 或 slug 创建静态文件。

4. 执行 getStaticProps 并获取数据

对于每一个需要生成静态 HTML 的页面，Next.js 会运行其对应的 getStaticProps 函数。这个函数会在构建时被调用，而不是在用户请求时。

  • 数据源: 数据可以来自任何地方，例如本地文件、外部 API、数据库等。
  • 一次性获取: 所有的页面数据都在这个阶段一次性获取完成。
5. 渲染页面并生成静态文件

getStaticProps 返回的数据会作为 props 传递给页面组件。Next.js 会利用这些 props，在服务器上预先渲染组件，生成一个完整的 HTML 字符串。

然后，Next.js 会将这个 HTML 字符串保存为独立的 .html 文件，并放置在 .next/server/pages 目录中。同时，相关的 JavaScript、CSS 和其他资源也会被打包和优化。

6. 静态资源优化和部署

在 HTML 和相关文件生成后，Next.js 会进行一系列优化，包括代码分割、压缩、CDN 友好配置等。

  • HTML 文件: /pages/about.js 编译为 .next/server/pages/about.html。
  • 动态路由文件: /pages/posts/[id].js 会为每个 getStaticPaths 中定义的 ID 生成一个独立的 HTML 文件，例如 /.next/server/pages/posts/1.html 和 /.next/server/pages/posts/2.html。

这些最终生成的静态文件，就是你部署到 CDN 或静态服务器的最终产物。

SSG 构建流程的优点总结

  1. 性能卓越: 页面是预先渲染好的静态文件，直接从 CDN 提供给用户，加载速度极快，几乎没有延迟。
  2. SEO 友好: 搜索引擎爬虫可以轻松抓取到完整的 HTML 内容，无需等待 JavaScript 执行。
  3. 极低的服务器负载: 服务器只在构建时进行计算，运行时几乎不消耗任何计算资源。

SSG 的构建流程确保了在性能和 SEO 方面达到最佳效果，是构建内容稳定、访问量大的网站的首选方案。

好的，我们来详细分解一下 Next.js 中 SSR (Server-Side Rendering) 的构建流程。

SSR 构建流程深度解析

SSR 的核心思想是在每次用户请求页面时，由服务器动态地生成完整的 HTML 页面，然后发送给浏览器。这个过程确保了用户总能获取到最新的数据，并且能够立即看到页面内容，这对于搜索引擎优化（SEO）和用户体验都至关重要。

整个 SSR 流程可以分为以下几个关键步骤：

1. 构建时（Build Time）

在 next build 阶段，Next.js 仍然会做一些准备工作，但它不会像 SSG 那样生成完整的静态 HTML 文件。相反，它会：

  • 编译代码: 将 React 组件、CSS 和其他资源编译成优化的 JavaScript Bundle。
  • 代码分割: 将代码拆分成小块，以加快页面加载速度。
  • 创建服务器端代码: 为每个使用 SSR 的页面创建服务器端执行的代码包，这些代码包含了页面组件和数据获取逻辑。

这个阶段，Next.js 只是为后续的运行时（Runtime）做好了准备。最终的 HTML 页面还没有被生成。

2. 用户请求（User Request）

当用户在浏览器中输入 URL 并按下回车时，SSR 的核心流程才真正开始。

  1. 浏览器发送请求: 浏览器向 Next.js 服务器发送一个页面请求。
  2. 服务器接收请求: Next.js 服务器接收到请求后，会识别出这是一个需要进行 SSR 的页面。
3. 服务器端执行 getServerSideProps

Next.js 服务器会立即在请求的上下文中执行页面组件中的 getServerSideProps 函数。

  • 实时数据获取: 这个函数会在每次请求时运行，确保获取到的数据是最新的。你可以在这里访问请求的 Headers、Cookies、URL 查询参数等，这在 SSG 中是不可能的。
  • 处理异步操作: 就像在客户端获取数据一样，getServerSideProps 是一个异步函数，它会等待数据获取完成后再继续。
// pages/post/[slug].jsexport async function getServerSideProps(context) {const { slug } = context.params;// 假设从 API 获取实时数据，例如最新评论数const res = await fetch(`https://.../api/posts/${slug}`);const post = await res.json();if (!post) {return {notFound: true,};}return {props: { post },};
}function Post({ post }) {// 使用 post 数据渲染页面return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;
4. 服务器端渲染 (Server-Side Rendering)

getServerSideProps 返回的数据会作为 props 传递给页面组件。Next.js 服务器利用这些数据，在服务器上执行 React 组件的渲染过程。

  • 生成 HTML: 服务器将 React 组件树转换成一个完整的 HTML 字符串。这个 HTML 字符串包含了所有的页面内容，而不仅仅是一个空的骨架。
  • 内联 CSS: Next.js 也会将必要的 CSS 代码内联到 <style> 标签中，以防止页面在加载时出现“闪烁”（FOUC - Flash of Unstyled Content）。
5. 响应和水合 (Response & Hydration)

服务器将生成的完整 HTML 页面，连同客户端所需的 JavaScript 文件一起，发送给浏览器。

  1. 浏览器渲染: 浏览器接收到 HTML 后，可以立即开始解析和渲染页面。用户能够很快看到页面的内容。
  2. 客户端水合 (Hydration): 在 HTML 内容渲染的同时，浏览器开始下载并执行 JavaScript Bundle。当 JavaScript 加载完成后，它会在后台将静态的 HTML 页面“激活”，使其具备交互能力。这个过程称为水合，它将服务器端渲染的静态内容与客户端的动态行为连接起来。

SSR 构建流程的优点总结

  1. 数据实时性: 每次请求都重新获取数据并渲染，确保用户看到的内容始终是最新的。
  2. 首屏加载快: 用户无需等待 JavaScript 加载即可看到内容，提升了首屏加载体验。
  3. SEO 友好: 搜索引擎爬虫直接获取完整的 HTML，能够轻松索引所有页面内容。
  4. 完整的 HTTP 上下文: getServerSideProps 可以访问请求头、cookies 等，适用于需要用户身份验证或动态数据的场景。

SSR 是一种强大的渲染模式，它牺牲了部分构建速度和服务器负载，来换取极佳的实时性和用户体验。

好的，我们来详细分解一下 Next.js 中 ISR (Incremental Static Regeneration) 的构建流程。

ISR 构建流程深度解析

ISR 是一种巧妙地结合了 SSG 和 SSR 优势的渲染模式。它允许你保持 SSG 的高性能，同时又能在不重新构建整个站点的情况下，对单个页面进行增量更新。

整个 ISR 流程可以分为以下两个主要阶段：构建时和运行时。

1. 构建时（Build Time）

ISR 的构建过程与 SSG 几乎相同。你需要在页面中使用 getStaticProps 和 getStaticPaths 函数。但与 SSG 不同的是，你需要为 getStaticProps 返回一个额外的 revalidate 参数。

  • revalidate 参数: 这个参数定义了页面的“过期”时间（单位为秒）。它告诉 Next.js，当这个时间间隔过去后，页面需要被重新生成。
// pages/posts/[id].js// getStaticPaths 告诉 Next.js 需要预先生成哪些路径
export async function getStaticPaths() {const posts = await fetch('https://.../posts').then(res => res.json());const paths = posts.map(post => ({params: { id: post.id },}));return { paths, fallback: 'blocking' };
}// getStaticProps 在构建时获取数据，并设置 revalidate
export async function getStaticProps({ params }) {const post = await fetch(`https://.../posts/${params.id}`).then(res => res.json());return {props: { post },revalidate: 60, // 设置页面在 60 秒后过期};
}function Post({ post }) {return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;

在 next build 阶段，Next.js 会执行 getStaticPaths 和 getStaticProps 函数，并为每个页面生成静态 HTML 文件。这些文件会被部署到你的托管平台（如 Vercel）的 CDN 上。

2. 运行时（Runtime）

这个阶段是 ISR 的核心，它解释了页面如何被增量更新。

场景一：首次访问或在 revalidate 时间内访问
  1. 用户请求: 用户第一次访问页面。
  2. CDN 响应: 由于页面是静态的，CDN 会立即返回预先构建好的 HTML 文件。这个过程非常快，加载速度和 SSG 页面一样。
场景二：revalidate 时间过期后的首次访问
  1. 用户请求: 当 revalidate 设置的 60 秒过去后，一个新的用户请求到来。
  2. 旧页面立即返回: Next.js 服务器会注意到页面的缓存已过期，但它不会让用户等待。它会立即向用户发送旧的、过期的静态 HTML 页面。
  3. 后台重新生成: 与此同时，Next.js 在后台静默地重新执行 getStaticProps 函数。它会重新获取数据、重新渲染页面，并生成一个新的 HTML 文件。这个过程完全在后台进行，不会阻塞用户的请求。
  4. 更新缓存: 一旦新的 HTML 文件生成成功，Next.js 会用它来替换 CDN 上的旧文件。
场景三：更新后的后续访问
  1. 用户请求: 在后台更新完成后，新的用户请求到来。
  2. CDN 响应: 这时 CDN 上已经是新的 HTML 文件，所以它会立即返回更新后的页面。新的 revalidate 计时器也会重新开始。

ISR 流程的优点总结

  1. 性能与 SSG 相当: 大多数用户请求都直接由 CDN 处理，加载速度极快。
  2. 数据更新无需重新构建: 你可以更新单个页面，而无需重新构建整个应用，这对于大型网站来说非常高效。
  3. 用户体验更好: 即使在数据更新时，用户也不会看到加载中的状态，而是立即得到一个旧版本的页面，随后在下次访问时看到新内容。
  4. fallback 参数: getStaticPaths 中的 fallback 参数提供了更多的灵活性：
    • false: 如果路径未定义，会返回 404 页面。
    • true: 如果路径未定义，Next.js 会在首次访问时动态生成页面，并将其添加到静态缓存中。
    • 'blocking': 与 true 类似，但会阻塞用户请求直到页面生成完成，确保用户总是能看到完整的内容，而不是加载状态。

ISR 是 Next.js 提供的一个非常强大的工具，它在性能和内容新鲜度之间取得了完美的平衡，是构建大型内容驱动型网站的理想选择。

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

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

相关文章

Veo Videos Generation API 对接说明

Veo Videos Generation API 对接说明

本文介绍了如何对接 Veo Videos Generation API&#xff0c;通过输入自定义参数生成Veo官方视频。 下面将详细阐述 Veo Videos Generation API 的对接流程。 申请流程 使用 API 前&#xff0c;需前往 Veo Videos Generation API 页面申请服务。进入页面后&#xff0c;点击「…
阅读更多...
YOLO 目标检测：YOLOv3网络结构、特征输出、FPN、多尺度预测

YOLO 目标检测：YOLOv3网络结构、特征输出、FPN、多尺度预测

文章目录一、YOLOV31、网络结构1.1 整体结构1.2 主干网络1.3 特征输出1.4 特征融合FPN&#xff08;Feature Pyramid Networks&#xff09;FPN 融合上采样融合2、多尺度预测3、损失函数4、性能对比一、YOLOV3 YOLOv3&#xff08;You Only Look Once v3&#xff09;是YOLO系列中…
阅读更多...
【GIS图像处理】有哪些SOTA方法可以用于将1.5米分辨率遥感图像超分辨率至0.8米精度的？

【GIS图像处理】有哪些SOTA方法可以用于将1.5米分辨率遥感图像超分辨率至0.8米精度的？

针对将1.5米分辨率遥感图像超分辨率至0.8米的需求，当前主流方法可分为以下几类，结合最新研究进展和实际应用场景，具体技术方案及SOTA方法如下： 一、基于Transformer的高效建模 1. Top-k标记选择Transformer（TTST） 核心机制：通过动态选择前k个关键标记（token），消除冗…
阅读更多...
【电力电子】逆变器控制策略：PQ Droop下垂控制、电压电流双环控制与SPWM调制

【电力电子】逆变器控制策略：PQ Droop下垂控制、电压电流双环控制与SPWM调制

逆变器中的 PQ Droop 控制。 1. PQ Droop 控制的定义 PQ Droop（有时也称为功率下垂控制，Power Droop Control）是微电网、并联系统或逆变器并网运行中常用的一种分布式功率控制方法。 P-Droop（有功下垂）：通过调节逆变器输出频率与有功功率之间的关系实现功率分配。 Q-Dro…
阅读更多...
【LeetCode 热题 100】5. 最长回文子串——中心扩散法

【LeetCode 热题 100】5. 最长回文子串——中心扩散法

Problem: 5. 最长回文子串 文章目录整体思路完整代码时空复杂度时间复杂度&#xff1a;O(N^2)空间复杂度&#xff1a;O(1)整体思路 这段代码旨在解决经典的 “最长回文子串” (Longest Palindromic Substring) 问题。问题要求在一个给定的字符串 S 中&#xff0c;找到一个最长…
阅读更多...
六、练习3：Gitee平台操作

六、练习3：Gitee平台操作

练习3&#xff1a;Gitee平台操作 练习目标 掌握Gitee平台的基本操作&#xff0c;包括创建仓库、推送代码、团队协作等。 练习步骤 步骤1&#xff1a;Gitee账号准备 访问 gitee.com注册账号&#xff08;如果还没有&#xff09;登录Gitee 步骤2&#xff1a;配置SSH密钥 # …
阅读更多...
Git软件版本控制

Git软件版本控制

软件版本控制作用&#xff1a;软件源码版本管理、多人协作开发、版本多分支开发、代码回滚&#xff08;回退&#xff09;等功能。集中式版本控制&#xff1a;将代码仓库放在一台服务器上&#xff0c;开发时要依赖这台服务器。优点&#xff1a;简单、方便管理、适合中小型项目缺…
阅读更多...
生产环境Spark Structured Streaming实时数据处理应用实践分享

生产环境Spark Structured Streaming实时数据处理应用实践分享

生产环境Spark Structured Streaming实时数据处理应用实践分享 一、业务场景描述 我们所在的电商平台需要实时监控用户行为数据&#xff08;如点击、下单、支付等&#xff09;&#xff0c;基于事件级别的流式数据进行实时统计、会话聚合、漏斗分析&#xff0c;并将结果推送到Da…
阅读更多...
海康相机开发---HCNetSDK

海康相机开发---HCNetSDK

HCNetSDK&#xff08;Hikvision Network Software Development Kit&#xff09;是海康威视专为旗下安防监控设备打造的二次开发工具包&#xff0c;是连接上层应用与海康设备的核心桥梁。其封装了设备底层通信协议&#xff08;包括私有协议与部分标准协议&#xff09;&#xff0…
阅读更多...
构建无广告私人图书馆Reader与cpolar让电子书库随身携带

构建无广告私人图书馆Reader与cpolar让电子书库随身携带

文章目录前言&#xff1a;告别书荒&#xff0c;拯救灵魂的“摸鱼神器”1、关于Reader&#xff1a;小而美的开源在线阅读器2、Docker部署3、简单使用reader和添加书源4.群晖安装Cpolar工具5.创建reader阅读器的公网地址6.配置固定公网地址前言&#xff1a;告别书荒&#xff0c;拯…
阅读更多...
amd cpu是x86架构吗

amd cpu是x86架构吗

是的&#xff0c;AMD CPU属于x86架构‌&#xff0c;其64位扩展&#xff08;x86-64&#xff09;最初由AMD设计并成为行业标准。‌ ‌AMD与x86架构的关系‌ ‌技术渊源‌&#xff1a;AMD自1976年起通过技术授权成为x86架构的合法制造商&#xff0c;与英特尔共同主导x86市场。2003…
阅读更多...
vercel上线资源无法加载

vercel上线资源无法加载

背景&#xff1a;在本地跑开发服务器没问题&#xff0c;但是部署到 vercel 上就有问题上一次出现类似问题是在更新游戏引擎方法后本地可以跑但是上线没有成功&#xff0c;当时是因为 runner.html 是在部署时通过脚本从远端仓库拉取的&#xff0c;所以解决方案&#xff1a;1.更新…
阅读更多...
Node.js 的模块化规范是什么？CommonJS 和 ES6 模块有什么区别？

Node.js 的模块化规范是什么？CommonJS 和 ES6 模块有什么区别？

目录 一、为什么需要模块化&#xff1f; 二、Node.js 的模块化规范 三、CommonJS 模块化 1. 基本语法 2. 特点 3. 缺点 四、ES6 模块&#xff08;ESM&#xff09; 1. 基本语法 2. 特点 3. 在 Node.js 中的使用 五、CommonJS 和 ES6 模块的区别 六、实际开发中的选择…
阅读更多...
设计模式：代理模式（Proxy Pattern）

设计模式：代理模式（Proxy Pattern）

文章目录一、代理模式的定义二、实例分析三、示例代码一、代理模式的定义 代理模式是一种结构型设计模式&#xff0c;它为某个对象提供一个代理或占位符&#xff0c;以控制对这个对象的访问。简单来说代理对象在客户端和目标对象之间起到中介作用&#xff0c;客户端并不会直接操…
阅读更多...
数据类型序列化-封装

数据类型序列化-封装

/// <summary> /// 定义泛型接口 /// </summary> /// <typeparam name"T">T</typeparam> public interface ISettingValue<T> {/// <summary>/// value/// </summary>T DoubleValue { get; }/// <summary>/// key//…
阅读更多...
PitVis-2023挑战赛：内镜下垂体瘤手术视频中的手术流程识别|文献速递-深度学习人工智能医疗图像

PitVis-2023挑战赛：内镜下垂体瘤手术视频中的手术流程识别|文献速递-深度学习人工智能医疗图像

Title题目PitVis-2023 challenge: Workflow recognition in videos of endoscopic pituitary surgeryPitVis-2023挑战赛&#xff1a;内镜下垂体瘤手术视频中的手术流程识别01文献速递介绍内镜视觉挑战赛与PitVis-2023挑战赛背景及核心内容 “内镜视觉&#xff08;EndoVis&#…
阅读更多...
2025年8月个人工作生活总结

2025年8月个人工作生活总结

本文为 2025年8月工作生活总结。研发编码 无处不在的AI 现在很多地方都在推AI&#xff0c;广西的人工智能走在前列&#xff0c;要赋能各行各业。至于我&#xff0c;主要就是在写点代码&#xff0c;写点交差的文档。其实现在我已经有点分析哪些代码哪些文字是AI写的了。我工作用…
阅读更多...
Dubbo常见面试题

Dubbo常见面试题

1、默认使用的是什么通信框架&#xff0c;还有别的选择吗? 默认也推荐使用netty框架&#xff0c;还有mina。 2、服务调用是阻塞的吗&#xff1f; 默认是阻塞的&#xff0c;可以异步调用&#xff0c;没有返回值的可以这么做。 3、一般使用什么注册中心&#xff1f;还有别的…
阅读更多...
简单的加密算法

简单的加密算法

// 加密函数&#xff08;32位版本&#xff09; //这里的 data 是ID&#xff0c; dword encrypt(dword data, dword key, int shift) {data ^ key; // 第一步&#xff1a;异或混淆// 循环左移&#xff08;shift范围1-31&#xff09;return (data << sh…
阅读更多...
升级的MS9125S USB投屏控制芯片（VGAHD输出）

升级的MS9125S USB投屏控制芯片（VGAHD输出）

MS9125S是一款USB单芯片投屏器&#xff0c;内部集成了USB 2.0控制器和数据收发模块、视频DAC、HD接口和音视频处理模块&#xff0c;支持压缩视频传输。MS9125S可以通过USB接口显示或者扩展PC、智能手机、平板电脑的显示信息到更大尺寸的显示设备上&#xff0c;支持VGA和HD视频接…
阅读更多...
最新文章

Copyright @ 2022~2023