走进Next.js的内部机制，掌握首屏渲染秘诀

2023-09-21 19:30:29

Next.js：下一代前端框架，构建现代化应用程序

Next.js 已成为现代化应用程序开发的领先前端框架。其出色的性能、强大的功能和简便的开发体验吸引了众多开发者。借助服务端渲染、静态生成和增量静态生成等技术，Next.js 为用户提供了无与伦比的访问体验。

服务端渲染：即时响应，无缝衔接

服务端渲染是 Next.js 的核心功能。它允许应用程序在服务器端渲染 HTML，并将其发送给浏览器。这样，用户可以立即访问交互式内容，无需等待客户端加载并执行 JavaScript。服务端渲染对 SEO 也非常有利，因为它允许搜索引擎在应用程序启动之前抓取和索引内容。

export async function getServerSideProps(context) {
  const { id } = context.params;
  const post = await getPostById(id);
  return {
    props: {
      post,
    },
  };
}

静态生成：快速加载，优化性能

静态生成是 Next.js 的另一个亮点。它允许应用程序在构建时预先渲染 HTML，并将其保存为静态文件。这样，可以显著提高应用程序的加载速度，并且不需要服务端渲染的开销。静态生成非常适合那些不需要频繁更新内容的应用程序，例如博客和文档网站。

export async function getStaticProps() {
  const posts = await getAllPosts();
  return {
    props: {
      posts,
    },
    revalidate: 10, // 重新验证间隔（秒）
  };
}

增量静态生成：动态内容，即时更新

增量静态生成介于服务端渲染和静态生成之间。它允许应用程序在构建时预先渲染 HTML，但在运行时更新数据。这样，可以兼顾服务端渲染的即时响应和静态生成的快速加载。增量静态生成非常适合那些需要频繁更新内容但又希望保持高性能的应用程序，例如新闻网站和电商网站。

export async function getStaticProps(context) {
  const { id } = context.params;
  const post = await getPostById(id);
  return {
    props: {
      post,
    },
    revalidate: 300, // 重新验证间隔（秒）
  };
}

路由：灵活高效，无缝跳转

Next.js 的路由系统非常灵活高效，允许开发者轻松创建和管理应用程序的 URL。Next.js 的路由系统还支持动态路由，使得开发者可以轻松创建动态 URL，例如 /posts/:id。

import Link from 'next/link';

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/posts/${post.id}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const posts = await getAllPosts();
  return {
    props: {
      posts,
    },
  };
}