nextjs系列教程(一)Next框架

Next框架介绍

1.1 React和Next对比

1. ReactJs 缺点

• 不利于 SEO 搜索引擎、页面加载时间缓慢；
• 没有内置的服务器端渲染，这可能会导致初始页面加载时间变慢，并可能导致 SEO 更差；
• 没有简洁的路由导航解决方案，这会增加应用程序的复杂性；
• 没有对代码拆分和优化的内置支持，这可能需要更多的手动配置和设置，增加项目配置复杂度；
• 没有生成静态站点的内置功能，不适合内容不经常变化的网站；

2. NextJs 优点

• 服务器端渲染： Next.js 提供内置的服务器端渲染，可以在将 HTML 发送到客户端之前，先在服务器上渲染 HTML，从而改善初始页面加载时间、SEO 和用户体验，这对于内容密集型应用程序尤其有益。

• 内置路由和导航： Next.js 提供了一个简单直观的基于文件的路由系统，可以轻松定义和组织应用程序的页面和 API 路由。这消除了对额外路由库的需求，并简化了页面之间的导航。

• 自动代码拆分： Next.js 会自动将您的代码拆分为更小的块，并且仅在需要时加载所需的代码。这减少了初始包大小并提高了应用程序的性能。

• 静态站点生成： Next.js 为生成静态站点提供了内置支持，这对于内容不经常更改的站点很有用。这可以提高性能并降低应用程序的托管成本。

• API 路由： Next.js 为创建可用于处理 服务器端逻辑和数据获取 的 API 路由，提供了内置支持。这消除了对单独后端服务器的需求，并使构建和部署全栈应用程序变得更加容易。

3. NextJs 服务端渲染

• Next.js 提供内置的服务器端渲染功能，允许您在将 HTML 发送到客户端之前在服务器上预渲染您的 React 组件。
• 当用户请求页面时，Next.js 的服务器端渲染引擎会使用构成页面的 React 组件在服务器上生成 HTML，Next.js 可以从 API、数据库或其他来源获取呈现页面所需的任何数据。
• 获取数据后，Next.js 将其作为 props 传递给页面的 React 组件，然后将其呈现为 HTML。生成的 HTML 被发送到客户端，然后客户端使用添加交互性和动态行为所需的任何客户端 JavaScript 对页面进行再水化。
• 通过在服务器上预渲染 React 组件，Next.js 可以提高应用程序的性能、SEO 和用户体验。服务器端呈现使您的用户可以更快地查看您的页面内容，并确保搜索引擎和社交媒体爬虫可以轻松访问您的内容并为其编制索引。

1.2 服务端组件和客户端组件的区别

1. 服务端组件RSC

在Next13中，app目录下的组件默认都是服务端组件，该类型的组件会在服务端完成渲染后，再发送到客户端。有了服务端组件，我们可以在React应用中用同一套React语法，混合使用服务端组件和客户端组件。服务端组件添加 use client 标识可以转化为客户端组件。

• 服务器组件允许我们在服务器端运行和渲染 React 组件，以实现更快的文件传输、更小的 JavaScript 包和更高效的客户端渲染。结合服务器组件和客户端组件，你可以将服务器组件用于程序的快速加载、非交互式部分，而将客户端组件用于交互、浏览器API和其他功能。

2. 为什么需要服务端组件

• React服务端组件中可以使用Nodejs的各种能力；
• 在服务端组件中发起请求，可以在请求返回HTML前，就完成数据的读取。相比原来JS应用从服务端传送JS资源到客户端，React完成渲染后再向服务端请求数据，大幅减少FCP（首次内容绘制时间）；
• 有效减少传送到浏览器的JS包体积；
• 传统SSR的各种优势（SEO友好，首屏渲染快）；

3. 异步服务端组件

在服务端组件中，可以直接在组件中使用async/await，获取到数据后，传给客户端组件。

async function getData() {
  const res = await fetch();
  return res.json();
}

export default async function Page() {
  const name = await getData();
  // 数据传递到客户端组件，会被序列化
  return <ClientCompoent name={name} />;
}

4. 客户端组件

客户端组件即原来我们写的运行在浏览器的React组件，src/pages 目录下的组件都是客户端组件。

• Next13的客户端组件中，可以使用use同步式的去处理异步方法，对标服务端组件的await。 如下面的getDate这个异步函数，既可以在服务端组件中通过await拿到数据，也能复用到客户端组件中通过use去拿到数据：

  async function getData() {
    const res = await fetch();
    return res.json();
  }
  export default function Page() {
    const name = use(getData());
    return <h1>{name}</h1>;
  }
  

5. 服务端组件和客户端组件应该怎么选择

6. 服务端组件注意事项

由于服务端组件是静态的、服务端渲染的，因此相对于客户端组件，不可避免的会有一些使用限制。如下：

• 服务端组件不能有任何交互行为（例如：不能使用 useState()，useEffect()，绑定onClick事件等。但是你可以通过在服务端组件内部引入客户端组件（客户端组件是允许存在交互行为的）的方式来解决这个问题。

  声明 `src/components/nav.jsx` 客户端组件：
  "use client";
  export default function NavCom() {
    return (
      <div className="nav">
        <button
          onClick={() => {
            console.log("测试");
          }}
        >
          点击
        </button>
      </div>
    );
  }
  
  服务器组件中引入客户端组件：
  import Link from "next/link";
  import NavCom from "@/components/nav";
  
  function App() {
    return (
      <div>
        <NavCom></NavCom>
      </div>
    );
  }
  
  export default App;
  此时：点击事件可以正常触发。
  

• 由于服务端组件是在服务端完成渲染后通过网络传输给到客户端，因此服务端组件传输 props 到客户端组件的时候，props 必须被序列化（意味着：可传输的数据只能是字符串、JSON 对象或者 JSX，不能传输 JavaScript 函数）。

1.3. 服务端组件和 SSR 有哪些不同

• 在使用 SSR 服务端渲染时，你需要先在服务端完成 HTML 的渲染，然后再将该 HTML 发送到客户端。但是此过程只会发生在页面的初次访问时（也就是初始化加载的时候）。后续数据更新时的组件更新渲染流程则和常规的 React 应用组件更新流程没有任何区别。在获取新数据时，需要重新发送一个网络请求，会导致组件的二次渲染和状态丢失，从而影响性能和客户体验。
• 在使用服务端组件时，你的组件在服务端完成渲染，然后发送到客户端。React 拿到数据时，将新的 UI 整体的合并到客户端 UI 树里面，此过程不会对客户端其他状态产生影响。此过程可以无限次数的执行。React 通过整体 UI 模块更新的方式，达到保持客户端状态的目的，极大的增强了用户体验。

这篇好文章是转载于：学新通技术网