316 - 《Full Stack React 笔记（1）》
1、解释下 CSR、SSR、SSG、ISR、RSC。
CSR
SSR
CSR 是客户端渲染，流程是用户下载脚本，然后加载服务端数据，然后渲染；SSR 是服务端渲染，流程是服务端加载数据，渲染 HTML，然后客户端下载 JS，然后注水加交互；SSG、ISR 和 RSC 都是基于 SSR 的不同形式。
SSG 是 SSR 的预处理版本，他会在编译时运行 SSR，产出 HTML，这样就不需要等用户请求过来之后再渲染 HTML 了。有个比喻是热菜和预制菜的区别。SSR 像热菜，比如你点了红烧肉，厨师会切肉开始烧，20 分钟后，一盆红烧肉出现在你的面前；SSG 则像预制菜，当你点了红烧肉，厨师会拿出提前制作好的红烧肉预制菜，这是通用的，不能定制，优点是快，过 2 分钟热好你就能吃了。
ISR 全称 Incremental Static Regeneration，翻译成增量静态增生，是 SSR 与 SSG 的结合体。当用户第一次请求一个特定的页面时，服务器将生成 HTML 并将其发送给用户，这与 SSR 相同。不同的是，它把生成的 HTML 存起来。下一次有人请求同一个页面时，会自动提供预先生成的HTML，这与 SSG 相同。为了防止文件过期，通常会设置一个过期时间让 HTML 重新生成。
RSC（比 SSR 稍微短一点）
RSC 在 308 - 《RSC 初印象》 写过，是在 SSR 的基础上提供 Server Component 的能力，用 Component 的方式写 Server 逻辑，有点类似 PHP 。除了功能上提供的能力之外，RSC 额外的好处是让 Server 需要传递给 Client 的 JS 尺寸更小，从而提升产品性能。一个极端的例子是 Bright，这是 RSC 版的高亮库，通过在 Server 侧实现高亮代码的转化，客户端所需要做的事就少了，可以少下载几 M 的 JS 文件。
2、最简 Next.js Template。
一键初始化一个最简 Next.js 项目。
cat <<EOF >package.json
{
"name": "hello-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "13.4.0",
"react": "18.2.0",
"react-dom": "18.2.0"
}
}
EOF
mkdir src && mkdir src/app
cat <<EOF > src/app/layout.js
import React from 'react';
import './styles.css';
function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
export default RootLayout;
EOF
cat <<EOF > src/app/page.js
import React from 'react';
function Home() {
return (
<main>
<h1>Hello Next!</h1>
</main>
);
}
export default Home;
EOF
cat <<EOF > src/app/styles.css
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 16px;
min-height: 100%;
font-family: sans-serif;
background: hsl(0deg 0%