使用 Next.js 和 JavaScript 进行服务器端渲染 (SSR)

---

在 Web 开发领域，提供快速流畅的用户体验至关重要。实现这一目标的方法之一是通过服务器端渲染 (SSR)，这是一种在将网页发送到客户端之前在服务器上渲染网页的技术。SSR 提供了许多好处，包括改进的性能、SEO 优化和更好的用户交互。在本文中，我们将探讨使用 Next.js 的 SSR 基础知识，Next.js 是一个流行的 JavaScript 框架，用于构建服务器端渲染的 React 应用程序。

什么是服务器端渲染 (SSR)？

传统上，Web 应用程序依赖于客户端渲染，其中整个渲染过程在浏览器中使用 JavaScript 进行。这种方法对于小型应用程序非常有效，但它会导致初始页面加载速度变慢、SEO 性能差以及可访问性有限。

另一方面，服务器端渲染涉及在服务器上生成完整的 HTML 内容并将其发送到客户端。然后，客户端接收一个完全渲染的页面，准备显示给用户。此方法允许搜索引擎更有效地抓取页面并提高用户感知的性能。

介绍 Next.js

Next.js 是一个 React 框架，它提供内置的服务器端渲染功能。它通过抽象服务器端设置和配置的复杂性，简化了构建 SSR 应用程序的过程。Next.js 还提供自动代码分割、客户端渲染和静态站点生成等功能，使其成为现代 Web 开发的多功能选择。

设置 Next.js 项目

要开始使用 Next.js，请确保您的机器上已安装 Node.js。为您的项目创建一个新目录，并使用以下命令对其进行初始化：

npx create-next-app my-next-app

此命令将使用必要的文件和依赖项设置一个新的 Next.js 项目。通过运行以下命令导航到项目目录：

cd my-next-app

进入项目目录后，使用以下命令启动开发服务器：

npm run dev

Next.js 将在 https://127.0.0.1:3000 上启动一个本地开发服务器，您可以在浏览器中看到您的应用程序正在运行。

创建服务器端渲染页面

Next.js 使创建服务器端渲染页面变得非常简单。在项目结构中，导航到 pages 目录并创建一个名为 about.js 的新文件。此文件将表示我们应用程序中的 /about 路由。

在 about.js 中，添加以下代码：

function About() {
   return (
      <div>
         <h1>About Page</h1>
         <p>This is the server-side rendered About page.</p>
      </div>
   );
}

export default About;

保存文件，如果 Next.js 开发服务器正在运行，您可以导航到 https://127.0.0.1:3000/about 以查看渲染的页面。

让我们仔细看看代码。About 组件是一个 React 函数组件，它返回 JSX，JSX 表示 About 页面的内容。在这种情况下，它渲染一个 <div> 元素，其中包含一个 <h1> 标题和一个 <p> 段落。

最后的 export default About 语句将 About 组件导出为默认导出，这允许 Next.js 将其识别为服务器端渲染的页面。

访问 /about 路由时，服务器将渲染 About 组件，客户端将接收页面的完整 HTML 表示形式。这种方法确保在将页面发送到用户之前完全渲染页面，从而提高性能和 SEO。

动态服务器端渲染

Next.js 还支持动态服务器端渲染，允许我们在渲染页面之前从外部 API 获取数据或执行服务器端计算。这使我们能够向用户提供动态内容，而无需依赖客户端 JavaScript。

为了演示动态服务器端渲染，让我们创建一个从模拟 API 获取数据的页面。在 pages 目录中，创建一个名为 users.js 的新文件：

function Users({ users }) {
   return (
      <div>
         <h1>User List</h1>
         <ul>
            {users.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
}

export async function getServerSideProps() {
   const response = await  fetch('https://api.example.com/users');
   const users = await response.json();

   return {
      props: {
         users,
      },
   };
}

export default Users;

解释

在上面的代码中，我们定义了一个名为 Users 的函数组件，它接收 users 数据作为 prop。它使用接收到的数据渲染用户列表。getServerSideProps 函数是一个异步函数，它从外部 API（此示例中的 https://api.example.com/users）获取数据。

在 getServerSideProps 内部，我们使用 fetch 函数向 API 发出 HTTP 请求并检索用户数据。然后，我们将响应解析为 JSON 并将其分配给 users 变量。最后，我们返回一个包含 props 属性的对象，该属性包含获取的用户数据。

当用户访问 /users 路由时，Next.js 将在服务器上调用 getServerSideProps 函数以获取数据。获取的用户数据将作为 prop 传递给 Users 组件以进行渲染。这确保页面在每次请求时都使用最新数据进行渲染。

动态服务器端渲染是一项强大的功能，它允许我们构建数据驱动的页面并向用户提供个性化内容。通过在服务器上获取数据，我们可以优化性能并确保跨不同设备和网络条件的一致用户体验。

结论

使用 Next.js 和 JavaScript 进行服务器端渲染 (SSR) 提供了一种构建高性能 Web 应用程序的有效方法。通过利用 Next.js 的服务器端渲染功能，我们可以向用户提供完全渲染的页面，从而提高性能、搜索引擎可见性和整体用户体验。

本文介绍了 SSR，介绍了如何设置 Next.js 项目，并演示了如何创建服务器端渲染的页面。我们探讨了服务器端渲染的好处以及 Next.js 如何简化在 React 应用程序中实现 SSR 的过程。