Next.js 中的 SSR 应用程序路由与页面路由相比有何新变化

简介

Next.js 长期以来一直是构建服务器渲染 React 应用程序的流行选择。凭借其对服务器端渲染 (SSR) 的内置支持，开发人员可以创建动态、SEO 友好的应用程序。然而，Next.js 13 中 App Router 的引入以及 Next.js 14 中的改进显着简化和增强了 SSR。

在这篇博文中，我们将探讨传统页面路由系统和较新的应用程序路由系统之间 SSR 的差异，重点介绍 SSR 的工作原理以及新路由范例如何对其进行更改。

页面路由中的 SSR (Pre-Next.js 13)

在引入 App Router 之前，SSR 是在页面路由系统中使用 getServerSideProps 等特定函数来处理的。每个请求都会调用此函数，允许开发人员在渲染页面之前从服务器端获取数据。

使用 getServerSideProps 的页面路由中的 SSR 示例：

export default function Blogs({ data }) {
  // Render the fetched data
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
}

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/blogs');
  const data = await res.json();

  // Pass the data as props to the page component
  return { props: { data } };
}

这里，getServerSideProps是Page Routing系统中SSR的关键。它允许您在每次请求时从 API（或任何其他数据源）获取数据，并将其作为 props 传递给页面组件。这种模式虽然功能强大，但在处理大量服务器端逻辑和不同的路由时可能会导致复杂的代码库。

Next.js 中的应用程序路由和 SSR 14

在 Next.js 14 中，SSR 变得更加简化并集成到应用程序路由系统中。这个新系统引入了服务器组件和客户端组件，其中 SSR 更加直观。

在App Routing中，您现在可以直接获取组件内部的数据，而不需要像getServerSideProps这样的特殊函数。您可以通过使用服务器操作来实现此目的，这使得代码更简单且更易于维护。

使用服务器组件的应用程序路由中的 SSR 示例：

"use server";

export async function getBlogs() {
  try {
    const response = await fetch('https://api.example.com/posts');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
}

// This component runs on the server and fetches data
export default async function Blog() {
  const blogs = await getBlogs();

  return (
    <div>
      {(blogs || []).map((blog) => (
        <div key={blog._id}>
          <h3>{blog.name}</h3>
          <p>{blog.content}</p>
        </div>
      ))}
    </div>
  );
}

在此应用程序路由示例中，我们使用服务器组件通过 use server 直接在组件文件内获取数据。这样就不再需要单独的 API 路由或函数，例如 getServerSideProps.

服务器操作的力量
Next.js 14 通过引入服务器操作简化了流程。这些操作允许您直接获取和处理组件文件中的数据，从而降低复杂性并使您的代码库更易于维护。

服务器操作的主要优点：

更简洁的代码：您可以将所有内容保留在一个地方，而不是将服务器端逻辑分散在单独的文件或函数中。
提高可维护性：移动部件更少意味着需要管理的代码更少，从而使您的应用程序更易于维护。
更好的性能：借助智能缓存机制，您可以微调服务器端逻辑以获得最佳性能。

Next.js 中的水合作用

在 Next.js 和服务器端渲染 (SSR) 的上下文中，水化是指将静态渲染的 HTML 页面（从服务器发送）转换为浏览器中完全交互式 React 应用程序的过程。它使用 React 的客户端 JavaScript “水合”静态 HTML，使页面具有交互性。

应用程序路由与页面路由中的水合

在页面路由中，页面上的每个组件都需要水合作用，使其在客户端具有交互性。这意味着交互所需的所有 JavaScript 都会发送到客户端，这可能会随着应用程序的扩展而导致性能瓶颈。

在应用程序路由中，对于服务器组件，只有客户端组件（处理交互性的组件）被水化。这种选择性水合作用减少了发送到客户端的 JavaScript 量，从而提高了性能。

应用路由中的客户端组件示例：

'use client';  // Mark this as a client component

export default function Button() {
  return (
    <button onClick={() => alert('Button clicked!')}>Click Me</button>
  );
}

这里，按钮组件被标记为带有“use client”的客户端组件。它允许交互并在客户端运行，而其他非交互组件仍保留为服务器组件，从而提高性能。

有关 App Routing 中水合作用的更多信息

其工作原理如下：

Parent Components as Server Components:

The parent components (usually the higher-level components or entire page components) are typically Server Components. They run on the server and handle things like data fetching, rendering static HTML, and passing that data down to child components.
Since these are server-rendered, they do not include any JavaScript on the client-side, and they are not interactive.

Client Components for Interactivity:

Child components, which handle interactivity (like buttons, forms, etc.), are Client Components. These components can use React hooks (useState, useEffect, etc.) and are hydrated on the client-side.
Server Components pass data to these Client Components via props.
Once the HTML is loaded in the browser, Next.js hydrates the Client Components, attaching the necessary event listeners and making the page interactive.

// Server Component (Parent Component)
export default async function ParentComponent() {
  // Fetch data on the server
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>This is Server-Side Rendered</h1>
      <ClientComponent data={data} />
    </div>
  );
}

// Client Component (Child Component)
'use client';

import { useState } from 'react';

function ClientComponent({ data }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Data from server: {JSON.stringify(data)}</p>
      <p>Client-side counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Conclusion

Next.js 14 makes Server-Side Rendering (SSR) easier and more powerful with the introduction of server actions in the App Router. By allowing developers to fetch data directly inside component files, this new system streamlines server-side logic, simplifies codebases, and reduces the need for separate API routes. Coupled with selective hydration, SSR in Next.js 14 is now faster and more efficient, helping you build highly dynamic and SEO-friendly applications with ease.

By leveraging these server actions, you can improve your app’s performance while keeping your code clean and maintainable. The shift from Page Routing to App Routing with Server and Client Components represents a major leap forward in building scalable web applications.

以上是Next.js 中的 SSR 应用程序路由与页面路由相比有何新变化的详细内容。更多信息请关注PHP中文网其他相关文章！