[TOC] ## 概述 * [**靜態生成 （推薦）**](https://www.nextjs.cn/docs/basic-features/pages#static-generation-recommended)：HTML 在**構建時**生成，并在每次頁面請求（request）時重用。 * [**服務器端渲染**](https://www.nextjs.cn/docs/basic-features/pages#server-side-rendering)：在**每次頁面請求（request）時**重新生成 HTML。 ## 路由 pages 模式 ``` my-next-app/ ├── pages/ │ ├── index.js │ ├── about.js │ └── api/ │ └── hello.js ``` app 模式 ```my-next-app/ ├── app/ │ ├── layout.js │ ├── page.js │ ├── about/ │ │ └── page.js // 路由 /about │ └── dashboard/ │ ├── layout.js │ └── page.js ``` > app 模式下, 路由只會讀該模式下的 page.tsx ## 約定文件 ``` layout 用于段及其子級的共享布局 page 路由的唯一頁面，并使路由可公開訪問 loading 用于段及其子級的加載頁面 not-found 用于段及其子級的 404 頁面 error 用于段及其子級的錯誤頁面 global-error 全局錯誤頁面 route 服務器端 API 端點 template 專門的重新渲染布局的組件 default 并行路由 的回退 UI ``` ## 靜態渲染 ### 頁面內容取決與外部數據 ``` export default function Blog({ posts }: { posts: any[] }) { return ( <ul> {posts.map((post) => ( <li>{post.title}</li> ))} </ul> ) } // 此函數在構建時被調用 export async function getStaticProps() { // 調用外部 API 獲取博文列表 const res = await fetch('https://.../posts') const posts = await res.json() // 通過返回 { props: { posts } } 對象，Blog 組件 // 在構建時將接收到 `posts` 參數 return { props: { posts, }, } } ``` ### 頁面路徑取決于外部數據 如 `pages/posts/[id].js` ``` // 此函數在構建時被調用 export async function getStaticPaths() { // 調用外部 API 獲取博文列表 const res = await fetch('https://.../posts') const posts = await res.json() // 據博文列表生成所有需要預渲染的路徑 const paths = posts.map((post) => ({ params: { id: post.id }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } ``` ## 服務器端渲染 你需要`export`一個名為`getServerSideProps`的`async`函數。服務器將在每次頁面請求時調用此函數``` ``` function Page({ data }) { // Render data... } // 在運行時,而非編譯時執行 export async function getServerSideProps() { // Fetch data from external API const res = await fetch(`https://.../data`) const data = await res.json() // Pass data to the page via props return { props: { data } } } export default Page ```