NextJS注意要点

1. 文件用来定义路由，folder name becomes the route name
2. 注意区分客户端渲染和服务器渲染
   • html渲染完成后给到客户端（此时网页内容已经全部提供），有利于crawler和优化seo
   • 逻辑更简单
   • request deduplication减少API请求
     可以对比如下两份代码

// 客户端渲染
import React, { useEffect, useState } from "react";

function Home() {
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/albums"
        );
        const data = await response.json();
        setAlbums(data);
      } catch (error) {
        console.error("Error fetching albums:", error);
      }
    };
    fetchAlbums();
  }, []);

  return (
    <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
      {albums.map((album) => (
        <div
          key={album.id}
          className="bg-white shadow-md rounded-lg p-4 transition transform hover:scale-105 hover:shadow-lg"
        >
          <h3 className="text-lg font-bold mb-2">{album.title}</h3>
          <p className="text-gray-600">Album ID: {album.id}</p>
        </div>
      ))}
    </div>
  );
}

export default Home;

// 服务器渲染
async function Home() {
  const response = await fetch("https://jsonplaceholder.typicode.com/albums");
  if (!response.ok) throw new Error("Failed to fetch data");
  const albums = await response.json();

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {albums.map((album) => (
        <div
          key={album.id}
          className="bg-white shadow-md rounded-lg p-4 transition-transform duration-200"
        >
          <h3 className="text-lg font-bold mb-2">{album.title}</h3>
          <p className="text-gray-600">ID: {album.id}</p>
        </div>
      ))}
    </div>
  );
}

export default Home;

关键名词解释：
SSG（Static Site Generation）：
在构建时生成html页面，而不是用户请求的时候，用户从CDN请求页面，所以并不适用于页面需要频繁修改的场景。
ISR（Incremental Static Regeneration）
SSG的扩展，基于时间来更新网页，适用于频繁改动但又不需要实时更新的网页。
SSR (Server Side Rendering)
Html在请求时由服务器生成，适合内容实时更新的场景
PPR （Partial PreRendering）
nextjs会生成一个壳来承载动态组件（用suspense标签标识）