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中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。
