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 (<div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-6 p-6">{albums.map((album) => (<divkey={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) => (<divkey={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标签标识）