3.7服务端渲染 (SSR) 与 Next.js

文档摘要

3.7服务端渲染 (SSR) 与 Next.js React 进阶：服务端渲染 (SSR) 与 Next.js 服务端渲染 (SSR) 是提升 React 应用性能和 SEO 的关键技术。它允许服务器预先渲染 React 组件，并将完整的 HTML 返回给客户端。这与客户端渲染 (CSR) 形成对比，CSR 依赖于浏览器下载 JavaScript 包并执行渲染。 3.7.1 什么是服务端渲染 (SSR)? 服务端渲染 (SSR) 是一种在服务器端将 React 组件渲染成 HTML 的技术。当用户访问应用时，服务器会将预先渲染好的 HTML 页面发送到浏览器。浏览器接收到 HTML 后，可以立即显示内容，而无需等待 JavaScript 下载和执行。

3.7服务端渲染 (SSR) 与 Next.js

React 进阶：服务端渲染 (SSR) 与 Next.js

服务端渲染 (SSR) 是提升 React 应用性能和 SEO 的关键技术。它允许服务器预先渲染 React 组件，并将完整的 HTML 返回给客户端。这与客户端渲染 (CSR) 形成对比，CSR 依赖于浏览器下载 JavaScript 包并执行渲染。

3.7.1 什么是服务端渲染 (SSR)?

服务端渲染 (SSR) 是一种在服务器端将 React 组件渲染成 HTML 的技术。当用户访问应用时，服务器会将预先渲染好的 HTML 页面发送到浏览器。浏览器接收到 HTML 后，可以立即显示内容，而无需等待 JavaScript 下载和执行。

SSR 的工作流程：

客户端发起请求： 用户在浏览器中输入 URL 或点击链接，发起对某个页面的请求。
服务器接收请求： 服务器接收到请求后，开始处理。
服务器渲染 React 组件： 服务器使用 React 组件和数据，将其渲染成 HTML 字符串。
服务器发送 HTML： 服务器将渲染好的 HTML 字符串作为响应发送给客户端。
客户端显示 HTML： 浏览器接收到 HTML 后，立即解析并显示页面内容，实现快速的首屏加载。
客户端下载 JavaScript： 浏览器开始下载与该页面相关的 JavaScript 代码。
水合 (Hydration)： React 将客户端 JavaScript 代码与已渲染的 HTML 结构进行关联，为 HTML 元素添加事件监听器和交互功能。
交互式应用： 应用程序变为完全可交互的状态。

3.7.2 SSR 的优势

更快的首屏加载速度 (FCP/LCP)： 由于服务器直接返回完整的 HTML，浏览器无需等待 JavaScript 下载和执行，可以更快地显示页面内容。这显著提升了用户体验，尤其是在网络状况不佳的情况下。
更好的 SEO： 搜索引擎爬虫更容易抓取和索引 SSR 渲染的 HTML 内容，有助于提高网站在搜索结果中的排名。
改善用户体验： 更快的首屏加载速度可以减少用户的等待时间，提高用户满意度。
更佳的社交分享： 社交媒体平台可以更好地抓取 SSR 渲染的 HTML 内容，生成更丰富的预览信息，例如标题、描述和图片。

3.7.3 SSR 的挑战

服务器负载增加： 服务器需要承担渲染 React 组件的计算任务，这会增加服务器的负载。
更复杂的开发和部署： SSR 需要配置服务器环境，并且需要处理客户端和服务器端的数据同步和状态管理等问题，增加了开发和部署的复杂性。
调试难度增加： 由于代码同时运行在客户端和服务器端，调试难度可能会增加。
代码同构 (Isomorphic Code)： 需要在客户端和服务器端共享代码，需要编写同构代码，确保代码在两个环境中都能正常运行。

3.7.4 Next.js 简介

Next.js 是一个基于 React 的开源框架，专门用于构建服务端渲染 (SSR) 和静态站点生成 (SSG) 的 Web 应用程序。它提供了许多开箱即用的功能，例如：

自动代码分割： Next.js 会自动将代码分割成更小的块，从而减少 JavaScript 的下载量，提高页面加载速度。
路由： Next.js 提供了基于文件系统的路由，简化了路由配置。
API 路由： Next.js 允许你创建 API 路由，方便构建后端服务。
静态资源服务： Next.js 可以方便地服务静态资源，例如图片、CSS 文件等。
预渲染： Next.js 支持 SSR 和 SSG 两种预渲染方式，可以根据不同的场景选择合适的渲染方式。
内置 CSS 支持： Next.js 支持 CSS Modules、Styled JSX 和其他 CSS-in-JS 库。
TypeScript 支持： Next.js 内置 TypeScript 支持，可以方便地使用 TypeScript 进行开发。
快速刷新： Next.js 提供了快速刷新功能，可以实时预览代码修改效果。

3.7.5 Next.js 代码实践

1. 创建 Next.js 项目:


npx create-next-app my-next-app
cd my-next-app

2. 修改 pages/index.js 文件:


import Head from 'next/head';
function HomePage() {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="A simple Next.js application" />
      </Head>
      <main>
        <h1>Welcome to Next.js!</h1>
        <p>This page is server-side rendered.</p>
      </main>
    </div>
  );
}
export default HomePage;

3. 运行开发服务器:


npm run dev

访问 http://localhost:3000，你将看到一个简单的 Next.js 应用程序。通过查看页面源代码，你会发现 HTML 已经包含了 <h1> 和 <p> 标签的内容，这表明页面是服务端渲染的。

4. 使用 getServerSideProps 获取数据：

getServerSideProps 是 Next.js 提供的一个特殊函数，用于在服务器端获取数据，并将数据传递给组件。


import Head from 'next/head';
function HomePage({ data }) {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="A simple Next.js application" />
      </Head>
      <main>
        <h1>Welcome to Next.js!</h1>
        <p>This page is server-side rendered.</p>
        <p>Data from server: {data}</p>
      </main>
    </div>
  );
}
export async function getServerSideProps() {
  // Fetch data from an API or database
  const data = 'Hello from the server!';
  // Pass data to the page via props
  return { props: { data } };
}
export default HomePage;

在这个例子中，getServerSideProps 函数在服务器端被调用，它获取数据 Hello from the server!，并将数据作为 props 传递给 HomePage 组件。

5. 理解 Next.js 的路由:

Next.js 使用基于文件系统的路由。在 pages 目录下创建的文件会自动生成对应的路由。例如，在 pages 目录下创建一个名为 about.js 的文件，该文件将自动生成 /about 路由。


// pages/about.js
import Head from 'next/head';
function AboutPage() {
  return (
    <div>
      <Head>
        <title>About</title>
      </Head>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
}
export default AboutPage;

6. 部署 Next.js 应用:

Next.js 应用可以部署到各种服务器环境，例如 Vercel、Netlify、AWS 等。Vercel 是 Next.js 官方推荐的部署平台，可以方便地部署 Next.js 应用。

3.7.6 总结

服务端渲染 (SSR) 是一种强大的技术，可以提升 React 应用的性能和 SEO。Next.js 是一个优秀的 React 框架，可以帮助你轻松实现 SSR。通过学习本篇文章，你应该对 SSR 的概念、优势、挑战以及 Next.js 的使用有了更深入的了解。希望这些知识能够帮助你构建更快速、更高效的 React 应用。

通过使用 Next.js，开发者可以专注于业务逻辑的开发，而无需花费大量精力在配置服务器环境和处理客户端/服务器端的数据同步等问题上。Next.js 提供的开箱即用的功能和便捷的 API 使得 SSR 的实现变得更加简单和高效。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/217-react%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E4%B8%8E%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流