Netlify＆next.js

Cassidy Williams最近在Netlify博客上進行了一個為期一個月的每日博客創作活動（Blogvent）。許多博客文章都關於Next.js。 Next.js有很多值得稱道的地方。我出於興趣嘗試了Cassidy的一個入門項目。它內置了React Fast-Refresh，這一點非常好。我喜歡它在任何“頁面”上都可以導入和使用getStaticProps或getServerSideProps來控制原本在.js文件中的內容。這是我第一次嘗試Next.js，所以請原諒我的基礎操作。但對我來說，Next.js最引人注目的是它輕鬆支持完整的渲染流程。它默認鼓勵你進行靜態文件渲染（很聰明），然後如果你需要進行服務器端渲染（SSR），你只需要更新任何給定的頁面組件，使其包含以下內容：

 export async function getServerSideProps() {
  // 從外部API獲取數據const res = await fetch(`https://.../data`);
  const data = await res.json();

  // 通過props將數據傳遞到頁面return { props: { data } };
}

假設你進行SSR是因為你需要訪問服務器獲取數據才能渲染頁面，但更傾向於在服務器端進行渲染，以便頁面能夠快速渲染，並在需要時無需JavaScript（這對SEO非常有利）。這假設有一個Node服務器隨時準備執行這項工作。在Netlify上，這意味著一個函數（Node Lambda），但你幾乎不必考慮它，因為你只需要在你的netlify.toml文件中添加以下內容：

 [[plugins]]
  package = "@netlify/plugin-nextjs"

現在，你可以在需要的地方進行靜態渲染，在需要的地方進行服務器端渲染，但你也沒有放棄客戶端渲染，這在網站啟動後非常快速。我認為它在內部進行了一些JSON傳輸或其他框架級別的魔法操作。

我從我的主頁設置了一個快速的SSR路由進行測試，我清楚地看到我的主頁（靜態）和/cool路由（SSR）在加載時都返回靜態HTML。

我承認我喜歡使用React，而Next.js是一個非常不錯的框架，因為它兼具簡單性和強大功能。它能夠輕鬆地在Netlify上運行，這一點很棒。

以上是Netlify＆next.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！