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

WBOY

发布： 2023-09-14 22:17:02

转载

1225 人浏览过

使用 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 将在 http://localhost: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 开发服务器正在运行，您可以导航到 http://localhost:3000/about 以查看渲染的页面。

让我们仔细看看代码。 About 组件是一个 React 功能组件，它返回 JSX，它代表了 About 页面的内容。在本例中，它呈现一个包含

标题和
段落的元素。

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

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

动态服务器端渲染

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

为了演示动态服务器端渲染，让我们创建一个从模拟 API 获取数据的页面。在页面目录中，创建一个名为 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，它接收用户数据作为 prop。它使用接收到的数据呈现用户列表。 getServerSideProps 函数是一个异步函数，它从外部 API（本例中为 https://api.example.com/users）获取数据。

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

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

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

结论

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

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

以上是使用 Next.js 和 JavaScript 进行服务器端渲染 (SSR)的详细内容。更多信息请关注PHP中文网其他相关文章！