介绍

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 (
    

      {data.map((item) => (
        

          
{item.title}
          
{item.content}
        
      ))}
    
  );
}

// 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 更加直观。

在应用程序路由中，您现在可以直接获取组件内部的数据，而不需要 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 (
    

      {(blogs || []).map((blog) => (
        

          
{blog.name}
          
{blog.content}
        
      ))}
    
  );
}

在此应用程序路由示例中，我们使用服务器组件通过 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 (
     alert('Button clicked!')}>Click Me
  );
}

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

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

其工作原理如下：

作为服务器组件的父组件：

父组件（通常是更高级别的组件或整个页面组件）通常是服务器组件。它们在服务器上运行并处理诸如数据获取、呈现静态 HTML 以及将该数据传递给子组件之类的事情。
由于这些是服务器渲染的，因此它们不包含客户端上的任何 JavaScript，并且它们不是交互式的。

用于交互的客户端组件：

处理交互性（如按钮、表单等）的子组件是客户端组件。这些组件可以使用 React hooks（useState、useEffect 等）并在客户端进行水合。
服务器组件通过 props 将数据传递给这些客户端组件。
一旦 HTML 加载到浏览器中，Next.js 就会合并客户端组件，附加必要的事件侦听器并使页面具有交互性。

// 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 (
    

      
This is Server-Side Rendered
      
    
  );
}

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

import { useState } from 'react';

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

  return (
    

      
Data from server: {JSON.stringify(data)}
      
Client-side counter: {count}
       setCount(count   1)}>Increment
    
  );
}

结论

Next.js 14 通过在 App Router 中引入服务器操作，使服务器端渲染 (SSR) 变得更简单、更强大。通过允许开发人员直接在组件文件内获取数据，这个新系统简化了服务器端逻辑，简化了代码库，并减少了对单独 API 路由的需求。与选择性水合相结合，Next.js 14 中的 SSR 现在更快、更高效，可帮助您轻松构建高度动态且 SEO 友好的应用程序。

通过利用这些服务器操作，您可以提高应用程序的性能，同时保持代码整洁和可维护。从页面路由到使用服务器和客户端组件的应用程序路由的转变代表了构建可扩展 Web 应用程序的重大飞跃。