Next.js 面试掌握：基本问题（第 8 部分）

Next.js 面试指南：成功的 100 个问题和答案（免费）

通过 Next.js 面试指南：成功的 100 个问题和答案，释放您掌握 Next.js 的全部潜力？。无论您是刚开始作为开发人员，还是希望将自己的技能提升到新水平的经验丰富的专业人士，这本综合电子书都旨在帮助您在 Next.js 面试中取得好成绩，并成为一名自信的、做好工作准备的人开发商。该指南涵盖了广泛的 Next.js 主题，确保您为可能遇到的任何问题做好充分准备。这本电子书探讨了服务器端渲染 (SSR)、静态站点生成 (SSG) 等关键概念) ?、增量静态再生 (ISR) ⏳、应用程序路由器 ?️、数据获取 ? 等等。每个主题都得到了透彻的解释，提供了真实的例子和最常见面试问题的详细答案。除了回答问题之外，该指南还重点介绍了优化 Next.js 应用程序、提高性能并确保可扩展性的最佳实践。随着 Next.js 的不断发展，我们还深入研究了 React 18、并发渲染和 Suspense 等尖端功能。这可以确保您始终了解最新进展，为您提供面试官正在寻找的知识。本指南的与众不同之处在于它的实用方法。它不仅涵盖理论，还提供可直接应用于您的项目的可行见解。还详细探讨了安全性、SEO 优化和部署实践，以确保您为完整的开发生命周期做好准备。无论您是在准备顶级科技公司的技术面试还是寻求构建更高效的系统，可扩展的应用程序，本指南将帮助您提高 Next.js 技能并在竞争中脱颖而出。读完本书后，您将准备好自信地解决任何 Next.js 面试问题，从基本概念到专家级挑战。为自己配备知识，成为一名出色的 Next.js 开发人员？并自信地踏入下一个职业机会！

cyroscript.gumroad.com

71. 如何控制 Next.js 中的缓存标头？

Next.js 允许您通过 next.config.js 以及 getServerSideProps 或 API 路由中的自定义标头控制静态资源、动态路由和 API 路由的缓存标头。

1. 静态资源：Next.js 自动处理 public/ 文件夹中静态资源的缓存，但您可以使用 next.config.js 中的 headers() 自定义缓存标头。
   

   module.exports = {
     async headers() {
       return [
         {
           source: '/(.*)',
           headers: [
             {
               key: 'Cache-Control',
               value: 'public, max-age=31536000, immutable',
             },
           ],
         },
       ];
     },
   };
   
   

2. 动态页面：对于运行时生成的动态页面，可以在 getServerSideProps 函数中设置缓存头。
   

   export async function getServerSideProps() {
     const res = await fetch('<https:>');
     const data = await res.json();
   
     return {
       props: { data },
       headers: {
         'Cache-Control': 'public, max-age=60, stale-while-revalidate=30',
       },
     };
   }
   
   </https:>

3. API 路由：您可以在 API 路由中设置缓存标头来控制响应的缓存方式。
   

   export default function handler(req, res) {
     res.setHeader('Cache-Control', 'public, max-age=3600, s-maxage=3600');
     res.json({ data: 'example' });
   }
   
   

72. 如何测试 Next.js 应用程序？

测试 Next.js 应用程序涉及使用 Jest、React 测试库和 Cypress 等工具进行端到端测试。

1. 单元测试：使用Jest和React测试库来测试组件和钩子。
   

   npm install --save-dev jest @testing-library/react @testing-library/jest-dom
   
   

2. API 路由测试：要测试 API 路由，您可以使用 supertest。
   

   npm install --save-dev supertest
   
   

   示例：
   

   import request from 'supertest';
   import app from './pages/api/hello';
   
   describe('GET /api/hello', () => {
     it('should return a 200 status code', async () => {
       const response = await request(app).get('/api/hello');
       expect(response.status).toBe(200);
     });
   });
   
   

3. 端到端测试：使用Cypress测试完整的用户交互。
   

   npm install --save-dev cypress
   
   

   示例：
   

   describe('Home Page', () => {
     it('should load correctly', () => {
       cy.visit('/');
       cy.contains('Welcome');
     });
   });
   
   

73. 单页应用程序 (SPA) 和 Next.js 应用程序有什么区别？

• SPA（单页应用程序）：在 SPA 中，整个应用程序作为单个 HTML 页面加载，JavaScript 处理路由和渲染。在路线之间导航时，页面不会重新加载，使用户体验更快，但初始加载速度较慢。
• Next.js 应用程序：Next.js 结合了 SSR 和 CSR 的优点。它允许混合渲染，其中页面可以根据用例静态生成（SSG）、服务器端渲染（SSR）或客户端渲染（CSR）。这意味着与 SPA 相比，Next.js 应用程序可以提供更快的初始页面加载。

74. Next.js 为什么引入 App Router？

引入App Router是为了增强灵活性并简化路由。借助 App Router，Next.js 可以在大型应用程序中实现更好的结构和自定义。 App Router 为布局、嵌套路由等高级路由功能提供更好的支持。

75. App Router 与 Pages Router 中的路由如何工作？

• App Router：App Router 引入了一种新方法，您可以在 app/ 目录中定义路由，从而允许使用布局和基于文件的 API 路由进行动态和嵌套路由。这种方法简化了应用程序不同级别的路由处理，包括嵌套和并行路由。
• 页面路由器：页面路由器使用pages/目录，其中每个文件对应一个路由。它遵循扁平结构，不支持像 App Router 那样灵活的路由。

76. 新的app目录是什么，它与pages目录有何不同？

app/ 目录与 Next.js 13 及更高版本中的 App Router 一起使用。它允许更灵活的路由，包括对布局、嵌套路由和并行路由的支持。 pages/ 目录用于较旧的 Pages Router，其中路由直接由文件结构定义。

77. App Router 中基于文件的路由如何增强 Next.js 的功能？

App Router 中基于文件的路由允许：

1. 动态路由：使用文件夹和文件进行路由定义，Next.js 可以根据目录结构自动处理动态路由。
2. 嵌套路由：app/目录中的嵌套文件和文件夹启用高级路由模式，例如嵌套布局和子路由。
3. 布局：您可以为应用程序的特定部分创建共享布局，从而提高可重用性和模块化性。

78. 您什么时候会选择使用服务器组件而不是客户端组件，反之亦然？

在 Next.js 中，服务器组件 和 客户端组件 有不同的用途，在它们之间进行选择取决于用例：

• 在以下情况下使用服务器组件：
  1. 静态渲染：您想要对组件执行服务器端渲染（SSR），允许其在服务器上渲染并以 HTML 形式发送到客户端。这有利于 SEO 和更快的初始加载时间。
  2. 繁重逻辑：该组件需要访问数据库、进行API调用或执行其他应在服务器上完成的资源密集型操作，以避免给客户端带来负担。
  3. 性能：您可以将渲染和数据获取卸载到服务器，减少发送到客户端的 JavaScript 包大小，从而提高性能。
• 在以下情况下使用客户端组件：
  1. 交互性：组件需要交互性，例如处理用户输入、管理状态或触发需要在浏览器中运行的副作用（如动画或事件侦听器）。
  2. 浏览器特定的API：您需要使用浏览器特定的API（例如，window、localStorage、document），这些API在服务器环境中不可用。
  3. 动态更新：组件需要对动态变化的状态变化或属性做出反应，例如交互式表单或数据可视化。

79. 如何在 Next.js 中将组件声明为客户端组件？

在 Next.js 的 App Router 中，可以使用 'use client' 指令将组件声明为 客户端组件。该指令必须放置在文件顶部、任何导入或代码之前，以指示该组件应被视为客户端组件。

示例：

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

80. 使用服务器组件在性能和可扩展性方面有哪些好处？

服务器组件提供了与性能和可扩展性相关的多项优势：

1. 减少 JavaScript 包大小：由于服务器组件在服务器上渲染，因此它们不需要将 JavaScript 发送到客户端进行渲染。这会减少 JavaScript 包的大小并加快页面加载速度。
2. 更快的初始页面加载：通过将渲染卸载到服务器，HTML 被直接发送到客户端，从而实现更快的首字节时间 (TTFB) 和更快的初始渲染，尤其是在较慢的网络或设备。
3. 改进的 SEO：服务器组件在服务器端呈现，因此搜索引擎可以抓取完全呈现的 HTML，与客户端呈现的内容相比，改进了 SEO。
4. 从客户端卸载工作：复杂的计算、API 调用或数据库查询在服务器上处理，减少客户端的工作负载和资源消耗，特别是对于手机等资源受限的设备。
5. 可扩展性：由于服务器处理渲染，具有许多用户的应用程序可以通过优化服务器端资源而不是客户端处理来更好地扩展。即使用户流量增加，服务器端渲染也有助于保持快速加载时间。

以上是Next.js 面试掌握：基本问题（第 8 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！