视图层升级：从 PHP 到 Next.js

作为博客站点，从 SEO 等角度，HTML 代码预生成的能力是必须的。由于成本考虑，博客一直使用 PHP 虚拟主机，所以一直使用了 PHP 的服务端渲染。

但是 PHP 视图层的开发体验，与现有的前端生态较难接轨，开发效率不佳。在了解 Next.js 时，看到了静态页面生成 SSG (Static Site Generation) 的方案，这让我眼前一亮。

用了几个小时的试验，成功将视图层从 PHP 升级到了 Next.js。

实现博客列表页、详情页

使用 npx create-next-app@latest 快速创建了 ts 的项目模板，结合 Pre-rendering and Data Fetching官方文档教程，很快的将博客列表页、详情页渲染了出来。

比如，对于博客的列表页，创建 /posts/${page} 规则的路由。这里为了减少 DOM 渲染，还是保留了分页逻辑。

在 getStaticPaths 中，计算一共需要生成多少个“列表页”。先拉去总共的文章数量，每 20 篇文章生成一个列表页。

interface Params extends ParsedUrlQuery {
  page: string;
}
export const getStaticPaths: GetStaticPaths<Params> = async () => {
  let { totalPage } = await getPostList({ page: 1, count: 20 });
  return {
    paths: Array.from({ length: totalPage }).map((_, index) => {
      return {
        params: { page: (index + 1).toString() },
      };
    }),
    fallback: false,
  };
};

在 getStaticProps 中，为每个页面拉取数据，比如第 5 页，就会去接口拿第五页的 20 篇文章进行渲染。

export const getStaticProps: GetStaticProps<PostListProps, Params> = async (context) => {
  const { page } = context.params! as Params;
  let { posts, current, pageSize, totalCount } = await getPostList({
    page: Number(page) || 1,
    count: 20,
  });
  return {
    props: {posts, current, pageSize, totalCount,},
  };
};

通过这样的数据获取，在构建时，页面组件会接受入参，进行渲染和处理即可。

export default function PostDataListPage({ posts, current, pageSize, totalCount }: PostListProps) {
  return <div> ... </div>;
}

实现搜索页面

对于动态搜索，也是必不可少的。 SSG 方案的妙处在于，它会将入参数据生成为 json 文件，能作为动态数据处理。

在文章列表页的基础上，提取了文章列表、分页等样式作为文章列表样式组件，在原有的 pages 下只做数据处理，并创建 /pages/search 页面用于处理搜索：

• 入参 posts 代表全部文章数据，这个会在构建时存储到页面中。
• 使用 data 表示过滤后的数据，使用 page 表示当前的页码，通过 slice 计算出当前页应当渲染的 20 篇文章。
• 使用 qeury.v 来表示用户输入的过滤文本，结合路由 query 参数的改变，更新过滤页面应该展示的 data 数据。

const router = useRouter();
const [data, setData] = useState<Post[]>([]);
const [page, setPage] = useState(1);

const getData = () => {
  let val = router.query.v.toLocaleLowerCase();
  setData(
    posts.filter((item) => {
      return (
        item.title.toLocaleLowerCase().includes(val) ||
        item.remark.toLocaleLowerCase().includes(val) ||
        item.content.includes(val)
      );
    }),
  );
  setPage(1);
};

useEffect(() => {
  getData();
}, [router.query.v, posts]);

const limitNum = (page - 1) * 20;
const viewPosts = data.slice(limitNum, limitNum + 20);

在文章数据不多的情况下，这个搜索方案也可以获得较快的速度。

升级效果

本次视图层的升级，开发体验和站点性能都得到了较大提升。

开发体验：

• 甩开视图层的 PHP ，接口服务变得更加纯粹，只需专注于后端业务逻辑。
• Next.js 让廉价的虚拟主机能够保持 SEO 能力的同时，轻易的用上 React、TypeScript 等主流的前端技术。
• 纯静态一直以来是 PHP 站点的重要优化方案，但会增加了较大复杂度，而在 Next.js 中使用很简单的前端代码，就能够完成这一切。

站点性能：

• 比起传统的纯静态方案，Next.js 的 SSG 更具备了预渲染的能力。
• 并且，它在进入下一个路由时，不是直接跳转页面，而是作为单页应用，去加载 json 数据，直接渲染。
• 这使得页面之间的切换变得极快，无需访问数据库，也无需加载额外的前端页面及静态资源。

由于构建是在本地进行，所以本地始终会保留一份最新的静态站点和 JSON 数据，也算是一种数据备份。

Next.js 升级到 app 路由

在 博客升级到 Next.js 14 ，迁移到 app 路由，升级 SSG 模式 文章 SSG 升级 中说明。