基于Nextjs15的学习手记

Next.js 是一个基于 React 的 全栈框架，由 Vercel 维护。它提供了 服务器端渲染（SSR） 、静态站点生成（SSG） 、增量静态再生（ISR） 等特性，使得开发者可以更轻松地构建高性能、SEO 友好的 Web 应用。目前Nextjs 15已经使用React 19版本，服务器组件更加强悍。

一、了解CSR/SSR/SSG

CSR（Client-Side Rendering，客户端渲染）、SSR（Server-Side Rendering，服务器端渲染）和SSG（Static Site Generation，静态站点生成）是构建现代Web应用的不同的渲染方式。主要区别在于 页面的 HTML 何时生成、在哪里生成，以及对 SEO 和性能的影响，每种方式都有其优缺点，适用于不同的场景。

1.CSR（客户端渲染）

将网页的内容生成和渲染都放在客户端（即浏览器）完成。初始的HTML文档中通常只包含基本的骨架和一些静态资源链接，如CSS和JavaScript文件。然后，浏览器会下载这些文件，并在客户端解析和执行JavaScript代码，动态地获取数据，并使用数据来生成和渲染页面的内容。

适用于单页应用（SPA） ，比如 React、Vue 项目

CSR渲染过程：

①.下载初始HTML

②.解析HTML

③.下载和执行JavaScript文件

④.数据获取

⑤.数据处理和页面渲染

⑥.更新DOM

⑦.用户交互和动态更新

优点：

• 富交互性：客户端渲染允许创建富交互性的应用，因为所有的逻辑都在用户的浏览器中执行。

• 减轻服务器负载：服务器只需提供静态文件，大部分工作由客户端完成，减轻了服务器的负载。

• 更快的页面导航：在单页面应用（SPA）中，页面之间的导航可以无需重新加载整个页面，提供了更流畅的用户体验。

缺点：

• SEO挑战：由于内容是在客户端动态生成的，搜索引擎可能难以抓取页面内容，这可能对SEO造成不利影响。

• 慢首屏加载：客户端渲染通常需要加载JavaScript框架和应用代码，然后才能渲染内容，这可能导致慢首屏加载时间。

• JavaScript依赖：完全依赖于客户端JavaScript执行，如果用户禁用了JavaScript，或者JavaScript文件加载失败，那么用户将看不到任何内容。

适用场景：

• 后台管理系统（如 CMS、Admin 面板）。
• 需要大量交互的 SPA（如 Gmail、React/Vue App）。
• 对 SEO 要求不高的应用。

2.SSR（服务器端渲染）

在SSR中，服务器会在接收到客户端请求后，执行网页的渲染逻辑，并生成完整的HTML页面。生成的HTML页面包含了所有初始化的数据和已经渲染好的页面内容，然后服务器将该HTML页面发送给客户端浏览器进行展示。

SSR渲染过程：

①.客户端请求

②.路由处理

③.数据获取

④.数据处理和页面渲染

⑤.HTML页面发送

⑥.客户端渲染

⑦.数据绑定和事件处理

⑧.用户交互和动态更新

优点：

• SEO优化：服务器端渲染的页面可以提供完整的HTML内容，有助于搜索引擎更好地抓取和索引网站，从而提高SEO表现。

• 快速首屏加载：用户可以更快地看到完整渲染的页面，因为内容是在服务器上生成的，这提高了 perceived performance（用户感知的性能）。

• 更好的社交媒体共享：由于页面的元数据（如标题、描述、图片等）在服务器上已经渲染，分享链接时社交媒体平台能够正确显示预览信息。

缺点：

• 服务器负载：服务器端渲染可能会增加服务器的负载，因为每个页面请求都需要服务器处理和渲染。

• 延迟：页面更新或导航可能会有延迟，因为需要从服务器获取新的HTML页面。

• 复杂的构建和部署：SSR应用可能需要特殊的服务器配置和更复杂的构建过程。

适用场景：

• SEO 要求高的应用（如官网、博客、新闻站点）。

• 内容动态变化的页面（如用户个性化主页）。

3.SSG (静态网站生成)

在构建（build）阶段生成静态HTML文件，将这些文件直接提供给客户端，而无需在每个请求上动态生成内容。

SSG渲染过程：

①.构建阶段

②.生成静态文件

③.服务器提供静态文件

④.客户端渲染

优点：

• 最快的加载速度：用户访问时，直接从 CDN 获取 HTML，加载速度快。

• SEO 友好：完整 HTML 可被爬虫抓取。

• 服务器压力低：只需要提供静态文件。

缺点：

• 缺少灵活性：无法处理实时数据，页面内容不会随请求变化。

• 更新繁琐：如果数据更新，需要重新构建页面。

适用场景：

• 博客、文档、产品展示页（如 Next.js + Markdown 博客）。
• 新闻站点（非实时） 。
• 静态电商页面（如 Next.js + Shopify）。

4.CSR / SSR / SSG 对比

渲染方式	HTML 生成时机	是否支持 SEO	首屏速度	适用场景
CSR	浏览器端	❌ 差	🐢 慢	SPA、后台管理系统
SSR	请求时	✅ 好	🚀 快	SEO 需求高、动态数据
SSG	构建时	✅ 最优	⚡ 超快	博客、文档、静态页面

CSR提供富交互和动态内容，能够实现流畅的用户体验，适用于单页应用和需要复杂前端逻辑的应用。

SSR提供更快的首次加载速度、SEO友好和较好的性能，适用于需要复杂交互和对SEO重视的应用。

SSG提供更快的加载速度、SEO友好和较好的可访问性，适用于内容相对稳定、对SEO要求较高或需要更快加载速度的应用。

5.同构（Isomorphic）渲染

也叫 混合渲染（Hybrid Rendering），结合了SSR和CSR的优点，首次请求由服务器渲染页面，提供快速的首屏加载和良好的SEO，之后的页面交互由客户端接管，提供富交互性。这种方式需要更复杂的配置和架构设计，但可以提供更好的用户体验和性能。

6.ISR（增量静态再生）

ISR（Incremental Static Regeneration），SSG 的增强版，允许部分页面在后台自动更新，无需手动重新构建。

7.汇总

Next.js 是一个 React 框架，可用于构建 SSR、CSR 和 SSG 网站和应用程序，且支持同构渲染和增量静态再生。 以及提供了许多内置功能，例如路由、数据获取和预渲染，Nextjs不仅当前强大，还在不断进化适合企业长期使用。

二、React 19新特性

三、基于React 19的Nextjs 15

- dev：运行next dev启动 Next.js开发模式。
- build：运行next build构建生产应用包。
- start：运行next start启动 Next.js 生产应用包。
- lint：运行next lint设置 Next.js 的内置 ESLint 配置。

1.核心规则

组件类型	是否需要标记	说明
服务端组件	不需要标记（默认启用）	.jsx/.tsx 文件默认就是服务端组件
客户端组件	必须加 'use client'	任何需要 useState/Effect/浏览器 API 的组件
服务端动作	必须加 'use server'	处理表单提交等服务器端操作的函数

CSR客户端组件

文件起头添加use client标识，可以使用浏览器APi(如：localStorage等)，添加交互性事件和事件侦听器。

// pages/test01
"use client"
import {useEffect, useState} from "react";

export  default  function Test01 () {
    const [name, setName] = useState('');

    useEffect(() => {
        fetch(...).then(res => setName(res));
    }, [])
    return <div>
        <div>name: {name}</div>
    </div>
}

浏览器第一时间得到的结果没有userName实际值,不利于SEO，结果需要等待请求到真实数据后，通过js操作dom进行回显

SSR服务端组件

.jsx/.tsx 文件默认就是服务端组件，可以使用内置方法getServerSideProps获取服务端数据，并以props形式回传给当前组件

// pages/test02

export default  function Test02 ({ name }: { name: string }) {

    return <div>
        <div>name: {name}</div>
    </div>
}

export async function getServerSideProps() {
    const name = await fetch(...)
    return { props: { name }  }
}

在服务器中请求数据后，直接将数据拼接到html中，并将组合好数据的html结构传给浏览器，有利于SEO

RSC服务器组件

React Server Components也是服务端渲染，是基于SSR之上的方案，在/app目录下创建的页面，默认就是RSC服务器组件

// app/page.jsx (默认RSC)

export default function Page() {
  // 直接使用 async/await 获取数据、访问数据库
  const data = await fetch(...)
  
  return <div>{data}</div>
}

通过流式处理（Suspense + lazy），您可以从服务器逐步呈现 UI。工作被拆分为块，并在客户端准备就绪时流式传输到客户端。这允许用户在整个内容完成渲染之前立即看到页面的某些部分。

通过浏览器插件React Developer Tools，查看当前app/page.jsx页面组件层级，即可看到其底层组件层级。

2.服务端组件和客户端组件使用核规则

尽量整个页面为服务器组件（RSC），即可灵活引入各类型组件。

客户端组件

• 客户端组件子组件必须是客户端组件

// src/components/Header
export default async function Header() {
    const data = await fetch(...);
    return (
        <div>
            header
        </div>
    );
}

// src/pages/page1
"use client"
import Header from "@/components/Header";

export default function Page1() {
    return (
        <div>
            <div>Page1</div>
            <Header />
        </div>
    );
}

Header为服务端组件，作为子组件被客户端组件引用时，页面报错。

• 服务器组件可以作为客户端组件的插槽

• 服务器组件可以作为客户端组件的属性

• Context组件通信必须在客户端组件中来完成

服务器组件

• 服务器组件和客户端组件都能作为服务器组件子组件

外部依赖组件

• 如果当前页面需要引入外部依赖中的组件报错，可能是外部依赖组件没有使用use client标识，导致将其作为服务端组件进行使用从而你报错，可创建客户端组件包裹依赖组件即可。

Iterator和Generator

Iterator

简介

遍历器：Iterator是一种机制。可以把它理解成一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：

• 一是为各种数据结构，提供一个统一的、简便的访问接口；
• 二是使得数据结构的成员能够按某种次序排列；
• 三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

机制

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

下面是一个模拟next方法返回值的例子：

    const arr = [1, 2, 3, 4, 5];
    function myIterator(array) {
        let nextIndex = 0;
        return {
            next: function () {
                return nextIndex < array.length ? { value: arr[nextIndex++], done: false } : { value: undefined, done: true };
            }
        }
    }
    const it = myIterator(arr);
    it.next(); // {value: 1, done: false}
    it.next(); // {value: 2, done: false}
    it.next(); // {value: 3, done: false}
    it.next(); // {value: 4, done: false}
    it.next(); // {value: 5, done: false}
    it.next(); // {value: undefined, done: true}

当然 Iterator 只是把接口规格加到数据结构之上，所以，遍历器与它所遍历的那个数据结构，实际上是分开的。

默认 Iterator 接口

当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for...of循环遍历。原因在于，这些数据结构原生部署了Symbol.iterator属性，另外一些数据结构没有（比如对象）。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。Symbol.iterator在任何作用域使用值都一样。

原生具备 Iterator 接口的数据结构如下：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

下面的例子是数组的Symbol.iterator属性：

    const arr = [1, 2, 3, 4, 5];
    let iter = arr[Symbol.iterator]();
    it.next(); // {value: 1, done: false}
    it.next(); // {value: 2, done: false}
    it.next(); // {value: 3, done: false}
    it.next(); // {value: 4, done: false}
    it.next(); // {value: 5, done: false}
    it.next(); // {value: undefined, done: true}

综上表现，本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。

实现一个 Iterator 接口

一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

class RangeIterator {
  constructor(start, stop) {
    this.start = start;
    this.stop = stop;
  }
  [Symbol.iterator]() {
    return this;
  }
  next() {
    let start = this.start;
    if (start <= this.stop) {
      this.start ++;
      return { value: start, done: false };
    }
    return { value: undefined, done: true };
  }
}

const obj = new RangeIterator(1, 5);
const ite = obj[Symbol.iterator]();
ite.next(); // { value: 1, done: false }
ite.next(); // { value: 2, done: false }
ite.next(); // { value: 3, done: false }
ite.next(); // { value: 4, done: false }
ite.next(); // { value: 5, done: false }
ite.next(); // { value: 6, done: false }

遍历器对象的return、throw

遍历器对象除了具有next()方法，还可以具有return()方法和throw()方法。如果你自己写遍历器对象生成函数，那么next()方法是必须部署的，return()方法和throw()方法是否部署是可选的。

return()方法的使用场合是，如果for...of循环提前退出（通常是因为出错，或者有break语句），就会调用return()方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return()方法。

调用 Iterator 接口的场合

• 数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator

• 扩展运算符（...）也会调用默认的 Iterator 接口（某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符）

• yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口

• 数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口，如下：

1. for...of
2. Array.from()
3. Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
4. Promise.all()
5. Promise.race()

Generator

简介

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

机制

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* testGenerator() {
  yield 1;
  yield 2;
  return 3;
}
let test = testGenerator();
test.next(); // { value: 1, done: false }
test.next(); // { value: 2, done: false }
test.next(); // { value: 3, done: true }
test.next(); // { value: undefined, done: true }

上面代码定义了一个 Generator 函数testGenerator，它内部有三个yield表达式（1、2、3），即该函数有四个状态：1，2,3 和 return 语句（结束执行）。

然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上面介绍的遍历器对象Iterator。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

• 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

• 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

• 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

• 如果该函数没有return语句，则返回的对象的value属性值为undefined。

yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

function* testGenerator() {
  // 可以在for循环中，但是不是在forEach等函数中
  for (let i = 0;;i ++) {
    if (i === 3) {
      return i;
    }
    yield i;
  }
}
let test = testGenerator();
test.next(); // { value: 0, done: false }
test.next(); // { value: 1, done: false }
test.next(); // { value: 2, done: true }
test.next(); // { value: undefined, done: true }

yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

function* testGenerator() {
  for (let i = 0;i < 3;i ++) {
    console.log('next:' + (yield i));
  }
}
let test = testGenerator();
test.next(); 
// 先：{ value: 0, done: false }
// 后：next:undefined

yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。

function* testGenerator() {
  testFunc(yield 1);
  let a = yield 2; // { value: 2, done: false }
  console.log('next:', a); // next: undefined
  yield 3;
}
let test = testGenerator();
test.next(); // 先 { value: 1, done: false }，后 test: undefined
test.next(); // { value: 2, done: false }
test.next(); // 先 next: undefined，后 { value: 3, done: false }

与 Iterator 接口的关系

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

let obj = {};
obj[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
}
console.log([...obj]); // [1, 2, 3]
// 具有Symbol.iterator属性，即可使用拓展运算符

Generator 函数执行后，返回一个遍历器对象。该对象本身也具有Symbol.iterator属性，执行后返回自身。

function* test() {
  yield true;
}
const iter = test();
console.log(iter[Symbol.iterator]() === iter); // true

next 方法的参数

上面的示例中yield 2本身并没有返回值，即为undefined。next方法可以带一个参数，该参数就会被当作上一个状态yield表达式的返回值。

function* test() {
  let res1 = yield 1;
  console.log(res1);
  let res2 = yield 2;
  console.log(res2);
  let res3 = yield 3;
  console.log(res3);
}
const iter = test();
iter.next('a'); // { value: 1, done: false }
iter.next('b'); // 先 b，后 { value: 2, done: false }
iter.next('c'); // 先 c，后 { value: 3, done: false }
iter.next('d'); // 先 d，后 { value: undefined, done: true }

所以正常情况来说，一个Generator函数中，第一个yield传递参数是没有作用的，因为并没有上一个状态去接收它的参数。

for...of 循环

for...of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法。

function* test() {
  yield 1;
  yield 2;
  yield 3;
}

for (let key of test()) {
  console.log(key); // 1 2 3
}

throw 和 return

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。

function* test() {
  try {
    yield 1;
  } catch (error) {
    console.log('test:', error);
  }
  yield console.log(2);
}
const iter = test();
iter.next(); // { value: 1, done: false }

try {
  iter.throw(new Error('出错了！')); // test: Error: 出错了！   2
  iter.throw(new Error('出错了！')); // catch: Error: 出错了！
} catch (error) {
  console.log('catch:', error);
}

上面代码中，遍历器对象iter连续抛出两个错误。第一个错误被 Generator 函数体内的catch语句捕获（前提是必须至少执行过一次next方法）。iter第二次抛出错误，由于 Generator 函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就被抛出了 Generator 函数体，被函数体外的catch语句捕获。

throw方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。

function* test() {
  yield 1;
  yield 2;
  yield 3;
} 
const iter = test();

iter.next(); // { value: 1, done: false }
iter.return('end'); // { value: 'end', done: true }
iter.next(); // { value: undefined, done: true }

上面代码中，遍历器对象调用return()方法后，返回值的value属性就是return()方法的参数。并且，Generator 函数的遍历就终止了，返回值的done属性为true，以后再调用next()方法，done属性总是返回true.如果return()方法调用时，不提供参数，则返回值的value属性为undefined。

function* test() {
  yield 1;
  try {
    yield 'try';
  } finally {
    yield 'finally';
  }
  yield 3;
} 
const iter = test();

iter.next(); // { value: 1, done: false }
iter.next(); // { value: 'try', done: false }
iter.return('end'); // { value: 'finally', done: false }
iter.next(); // { value: 'end', done: true }

如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。

yield* 表达式

如果在 Generator 函数内部，调用另一个 Generator 函数。需要在前者的函数体内部，自己手动完成遍历。

如下：

function* a() {
  yield 1;
  yield 2;
}

function* b() {
  yield 'a';
  for (let i of a()) {
    console.log(i);
  }
  yield 'b';
}
for (let j of b()) {
  console.log(j);
}
// a 1 2 b

yield*表达式，作为解决办法，用来在一个 Generator 函数里面执行另一个 Generator 函数。简化上述代码

function* a() {
  yield 1;
  yield 2;
}

function* b() {
  yield 'a';
  yield* a();
  yield 'b';
}
for (let j of b()) {
  console.log(j);
}
// a 1 2 b

可以通过yield*实现多层数组的扁平化处理，如下：

function* iterTree(tree) {
  if (Array.isArray(tree)) {
    for(let item of tree) {
      yield* iterTree(item);
    }
  } else {
    yield tree;
  }
}
const arr = [1, 2, ['a', 'b'], 4, ['name', 'age']];
console.log([...iterTree(arr)]);
// [1, 2, 'a', 'b', 4, 'name', 'age'];