Next.js 中为什么 App Router 可能是未来，但 Pages Router 仍然重要？
<p>Next.js 作为一个强大的 React 框架，为开发者提供了两种路由系统：App Router 和 Pages Router。这两种路由系统各有特色，适用于不同的场景。本文将深入探讨这两种路由系统的区别、优缺点和使用场景，帮助你做出最佳选择。</p><h2 id="app-router新一代的路由革命">App Router：新一代的路由革命</h2>
<p>App Router 是 Next.js 13 引入的新路由系统，它使用 <code>app</code> 目录来组织路由，带来了许多令人兴奋的新特性。</p>
<h3 id="优点">优点：</h3>
<ol>
<li>
<p><strong>React 服务器组件支持</strong>：这是一个游戏规则改变者，允许在服务器端渲染复杂组件，大大提升了性能。</p>
</li>
<li>
<p><strong>灵活的布局系统</strong>：通过嵌套布局，你可以更容易地创建复杂的页面结构。</p>
</li>
<li>
<p><strong>内置加载 UI 和错误处理</strong>：提供了更好的用户体验，无需额外配置。</p>
</li>
<li>
<p><strong>性能优化</strong>：得益于服务器组件和其他优化，App Router 通常能提供更好的性能。</p>
</li>
<li>
<p><strong>并行路由</strong>：允许在同一布局中同时渲染多个页面。</p>
</li>
</ol>
<h3 id="缺点">缺点：</h3>
<ol>
<li>
<p><strong>学习曲线较陡</strong>：对于习惯了传统 React 开发的人来说，可能需要一些时间来适应。</p>
</li>
<li>
<p><strong>第三方库兼容性</strong>：一些老旧的库可能不兼容新的服务器组件模式。</p>
</li>
<li>
<p><strong>仍在发展中</strong>：作为较新的技术，可能会有一些未知的问题或变化。</p>
</li>
</ol>
<h2 id="pages-router经典可靠的选择">Pages Router：经典可靠的选择</h2>
<p>Pages Router 是 Next.js 的传统路由系统，使用 <code>pages</code> 目录来组织路由。它仍然是许多项目的首选，特别是对于较老的 Next.js 版本。</p>
<h3 id="优点-1">优点：</h3>
<ol>
<li>
<p><strong>简单易上手</strong>：对于初学者来说，学习曲线相对平缓。</p>
</li>
<li>
<p><strong>文件系统路由直观</strong>：路由结构与文件结构一一对应，易于理解和管理。</p>
</li>
<li>
<p><strong>丰富的社区资源</strong>：由于使用时间较长，有大量的教程、示例和第三方库支持。</p>
</li>
<li>
<p><strong>稳定性高</strong>：经过多年的使用和优化，bug 较少，表现稳定。</p>
</li>
</ol>
<h3 id="缺点-1">缺点：</h3>
<ol>
<li>
<p><strong>不支持 React 服务器组件</strong>：无法利用这一新特性带来的性能提升。</p>
</li>
<li>
<p><strong>布局系统相对简单</strong>：实现复杂布局可能需要更多的代码和配置。</p>
</li>
<li>
<p><strong>数据获取方法较为固定</strong>：主要依赖 <code>getServerSideProps</code> 和 <code>getStaticProps</code>，灵活性较低。</p>
</li>
</ol>
<h2 id="实战对比博客页面实现">实战对比：博客页面实现</h2>
<p>让我们通过一个简单的博客页面来对比这两种路由系统的实现方式：</p>
<h3 id="pages-router-实现">Pages Router 实现</h3>
<pre><code class="language-jsx">// pages/posts/.js
import { useRouter } from 'next/router';
export default function Post({ post }) {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } };
}
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
const paths = posts.map(post => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: true };
}
</code></pre>
<p>在这个例子中，我们使用 <code>getStaticProps</code> 和 <code>getStaticPaths</code> 来实现静态生成。这是 Pages Router 的典型用法，适合内容不经常变化的博客文章。</p>
<h3 id="app-router-实现">App Router 实现</h3>
<pre><code class="language-jsx">// app/posts//page.js
import { notFound } from 'next/navigation';
async function getPost(id) {
const res = await fetch(`https://api.example.com/posts/${id}`);
if (!res.ok) return undefined;
return res.json();
}
export default async function Post({ params }) {
const post = await getPost(params.id);
if (!post) {
notFound();
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
</code></pre>
<p>App Router 的实现更加简洁。这里我们直接在组件中进行异步数据获取，这得益于 React 服务器组件的支持。同时，我们使用 <code>notFound</code> 函数来处理文章不存在的情况，这是 App Router 提供的内置错误处理机制之一。</p>
<h2 id="如何选择">如何选择？</h2>
<p>选择 App Router 还是 Pages Router，没有绝对的对错。以下是一些建议：</p>
<ol>
<li>
<p><strong>项目规模和复杂度</strong>：对于大型、复杂的项目，App Router 的灵活性和性能优势可能更有吸引力。</p>
</li>
<li>
<p><strong>团队熟悉度</strong>：如果团队对 Next.js 较为陌生，可能从 Pages Router 开始更容易上手。</p>
</li>
<li>
<p><strong>性能需求</strong>：如果项目对性能有较高要求，App Router 的服务器组件可能是更好的选择。</p>
</li>
<li>
<p><strong>项目时间线</strong>：对于需要快速开发的项目，Pages Router 可能更适合，因为学习成本较低。</p>
</li>
<li>
<p><strong>未来展望</strong>：考虑到 Next.js 的发展方向，长期来看，掌握 App Router 可能更有优势。</p>
</li>
</ol>
<h2 id="个人经验分享">个人经验分享</h2>
<p>作为一个初使用 Next.js 的开发者，我最初对 App Router 也感到困惑。但是，当我开始处理复杂的布局和需要优化性能的场景时，App Router 的优势就显现出来了。</p>
<p>例如，在一个需要频繁更新的数据密集型应用中，App Router 的服务器组件让我能够在服务器端处理大部分数据逻辑，显著减少了传输到客户端的 JavaScript 数量，提升了应用的整体性能。</p>
<p>然而，对于一些简单的项目或者时间紧迫的情况，我仍然会选择 Pages Router。它简单直接，能让我快速搭建原型并上线。</p>
<h2 id="结论">结论</h2>
<p>App Router 和 Pages Router 各有千秋，选择哪一个取决于你的具体需求和场景。</p>
<p>我的建议是：<code>不要害怕尝试新事物</code>。即使你现在使用的是 Pages Router，也值得花些时间了解 App Router。</p>
<p><code>毕竟，技术在不断进步，保持学习才能不被淘汰。</code></p>
<p><code>记住，技术只是工具，真正重要的是解决问题和创造价值。选择最适合你的工具，才能事半功倍。</code></p>
<h2 id="结语">结语</h2>
<p>上次写了一个用于批量清理无用仓库的工具，如果感兴趣那就去看看 😊</p>
<p>介绍文章： <code>https://mp.weixin.qq.com/s/t7lgc6b7xJiNhfm5vWo5-A</code></p>
<p>GitHub 仓库地址： <code>https://github.com/yaolifeng0629/del-repos</code></p>
<p>如果你觉得这个工具对你有所帮助，请不要忘记给我的 GitHub 仓库点个 Star！你的支持是我前进的动力！</p>
<p>感谢阅读，我们下次再见！</p>
<p><img src="https://qncdn.mopic.mozigu.net/f/o0enm5lqh2rbsqbopel/126660174a84/Snipaste_2023-09-08_10-32-47.png"></p><br><br>
来源：https://www.cnblogs.com/leadingcode/p/18336828
頁:
[1]