首頁 >web前端 >js教程 >Next.js 面試掌握：基本問題（第 8 部分）

Next.js 面試掌握：基本問題（第 8 部分）

DDD原創: 2024-11-20 18:10:13471瀏覽

Next.js Interview Mastery: Essential Questions (Part 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 路由的快取標頭。

靜態資源：Next.js 自動處理 public/ 資料夾中靜態資源的緩存，但您可以使用 next.config.js 中的 headers() 自訂快取標頭。

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

動態頁面：對於執行階段產生的動態頁面，可以在 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:>

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 等工具進行端到端測試。

單元測試：使用Jest和React測試庫測試元件和鉤子。

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

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);
  });
});

端到端測試：使用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 中基於檔案的路由允許：

動態路由：使用資料夾和檔案進行路由定義，Next.js 可以根據目錄結構自動處理動態路由。
巢狀路由：app/目錄中的巢狀檔案和資料夾啟用進階路由模式，例如巢狀佈局和子路由。
佈局：您可以為應用程式的特定部分建立共用佈局，從而提高可重複使用性和模組化性。

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. 使用伺服器元件在效能和可擴充性方面有哪些好處？

伺服器元件提供了與效能和可擴充性相關的多項優勢：

減少 JavaScript 套件大小：由於伺服器元件在伺服器上渲染，因此它們不需要將 JavaScript 傳送到客戶端進行渲染。這會減少 JavaScript 套件的大小並加快頁面載入速度。
更快的初始頁面載入：透過將渲染卸載到伺服器，HTML 直接傳送到客戶端，從而實現更快的首字節時間(TTFB) 和更快的初始渲染，尤其是在較慢的網路或設備。
改進的 SEO：伺服器元件在伺服器端呈現，因此搜尋引擎可以抓取完全呈現的 HTML，與客戶端呈現的內容相比，改進了 SEO。
從客戶端卸載工作：複雜的運算、API 呼叫或資料庫查詢在伺服器上處理，減少客戶端的工作負載和資源消耗，特別是對於手機等資源受限的裝置。
可擴展性：由於伺服器處理渲染，因此具有許多用戶的應用程式可以透過最佳化伺服器端資源而不是客戶端處理來更好地擴展。即使用戶流量增加，伺服器端渲染也有助於保持快速載入時間。

以上是Next.js 面試掌握：基本問題（第 8 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html edge Static Resource define for date require Directory using public Event JS function this input database SEO excel router

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：為什麼 JavaScript 在 `===` 比較中將 0 和 -0 視為相等，但在 `Object.is` 中卻不然？下一篇：為什麼 JavaScript 在 `===` 比較中將 0 和 -0 視為相等，但在 `Object.is` 中卻不然？

看更多