1.NextJS基础

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 (
    

      {albums.map((album) => (
        

          
{album.title}
          
Album ID: {album.id}
        
      ))}
    
  );
}

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 (
    

      {albums.map((album) => (
        

          
{album.title}
          
ID: {album.id}
        
      ))}
    
  );
}

export default Home;

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