Matarialize中文社区-页面和路由

页面和路由

前端初学者 2024-09-26 17:46:54

281 Next.js,SSG,SSR 专栏

在 Next.js 中，页面的渲染方式有三种：静态页面生成 (SSG)、服务端渲染 (SSR) 和客户端渲染 (CSR)。这里将重点介绍如何使用静态页面生成（SSG）、动态路由及服务端渲染（SSR）来掌握 Next.js 的基础功能。

1. 静态页面生成（SSG）

Next.js 提供了 getStaticProps() 来生成静态页面。页面在构建时预渲染，生成静态 HTML 文件。这种方法非常适合内容在构建后不需要频繁更新的场景。

1.1 `getStaticProps()` 的使用

getStaticProps() 是一个异步函数，用于获取数据并在构建时生成静态页面。

步骤：

创建一个页面文件，比如 pages/posts.js。
使用 getStaticProps() 获取数据。

代码示例：

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

// 获取数据，并在构建时生成页面
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

1.2 说明：

getStaticProps() 函数会在构建时运行，获取外部数据并将其传递给页面组件。
返回值：返回的对象必须包含 props，其中包含了传递给组件的数据。

1.3 访问页面：

在浏览器中访问 http://localhost:3000/posts，你将看到构建时从 API 获取到的博客文章列表。

2. 动态路由

Next.js 通过在 pages 文件夹中使用 方括号语法 创建动态路由，常用于处理动态内容，比如博客详情页。

2.1 动态路由文件命名：`[id].js`

假设你要为博客文章创建一个详情页，URL 形式为 /posts/[id]，其中 [id] 是动态部分。

步骤：

创建一个新的页面 pages/posts/[id].js。
使用 useRouter() 来获取动态路由参数。

代码示例：

import { useRouter } from 'next/router';

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

// 获取每篇文章的数据
export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

// 定义动态路径
export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

2.2 `getStaticPaths()` 的使用

getStaticPaths() 需要与动态路由配合使用，用于告诉 Next.js 需要预渲染哪些路径。

getStaticPaths() 返回一个 paths 数组，数组中的每个对象代表一个需要生成的页面路径。
fallback: false 表示对于未定义的路径，Next.js 将显示 404 页面。

3. 服务端渲染（SSR）

Next.js 提供了 getServerSideProps() 方法，用于在每次请求时执行数据获取，适合需要动态获取数据的场景。

3.1 `getServerSideProps()` 的使用

getServerSideProps() 在每个请求时运行，因此页面不会生成静态 HTML，而是由服务器动态生成。

步骤：

创建一个页面 pages/server-rendered.js。
使用 getServerSideProps() 动态获取数据。

代码示例：

export default function ServerRenderedPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

// 每次请求时获取数据
export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}