序言
在当今前端开发中，Next.js 已成为构建高性能、SEO 友好应用的必备框架。今天我将带大家从零开始创建一个 Next.js 项目，并深入解析其服务器端渲染（SSR）机制的优势。
创建 Next.js 项目
Next.js 提供了便捷的脚手架工具，让我们可以快速初始化项目：
npx create-next-app@latest my-todo
这里使用 npx 命令的优势在于：
- 无痕使用：无需全局安装依赖，避免污染全局环境
- 即用即走：非常适合快速尝试新技术
- 版本控制：始终使用最新版本的 create-next-app
当然，你也可以选择全局安装：
npm i -g create-next-app@latest
Next.js 与传统 React 应用的区别
| 特性 | React (CSR) | Next.js (SSR) |
|---|---|---|
| 渲染位置 | 客户端浏览器 | 服务器端 |
| 初始加载速度 | 较慢（需下载所有JS） | 较快（服务器返回完整HTML） |
| SEO 友好度 | 较差（爬虫难以解析） | 优秀（直接返回完整内容） |
| 适用场景 | 后台管理系统 | 内容型网站、企业站 |
理解 SSR 的核心优势
1. SEO 优化
传统 React 应用（CSR）在浏览器端渲染时，初始 HTML 只有一个空容器：
<div id="root"></div>
搜索引擎爬虫抓取时，只能看到一个空页面，严重影响 SEO。而 Next.js 的 SSR 在服务器端就完成了渲染，返回的是完整的 HTML 内容：
<h1>首页</h1>
<div>我在秋招，我去字节</div>
2. 性能提升
用户无需等待所有 JavaScript 加载完成就能看到内容，大大提升了首屏加载速度。
实战：创建你的第一个页面
在 Next.js 项目中，页面组件位于 app 目录下。我们创建一个简单的首页：
// app/page.tsx
import Image from "next/image";
export default function Home() {
return (
<>
<h1>首页</h1>
<div>我在秋招，我去字节</div>
</>
);
}
这个组件会在服务器端被渲染成 HTML，然后发送到客户端。注意我们使用了 Next.js 内置的 Image 组件，它可以自动优化图片性能。
运行你的 Next.js 应用
在项目目录下执行：
npm run dev
访问 http://localhost:3000，你将看到服务器渲染的页面。
如何验证 SSR 效果？
- 在浏览器中右键点击"查看页面源代码"
- 你将看到完整的 HTML 内容，而非空容器
- 这意味着搜索引擎爬虫可以直接抓取到页面内容
使用场景推荐
Next.js 特别适合以下场景：
- 内容型网站：博客、新闻站点（SEO 关键）
- 电商平台：商品列表页需要被搜索引擎收录
- 企业官网：需要良好的搜索引擎排名
- 掘金等技术社区：内容需要被广泛传播和搜索
总结
Next.js 通过 SSR 解决了传统 React 应用的两大痛点：
- SEO 不友好：服务器直接返回完整 HTML
- 首屏加载慢：用户立即看到内容而非空白页
