什么是 Next.js？
Next.js 是一个 React 框架，用于构建具有服务器端渲染（SSR）能力的 Web 应用程序。它通过在服务器上预渲染页面，然后将已渲染的 HTML 发送给客户端来提供更好的性能和 SEO。
Next.js 的优势
- 优化页面加载性能：Next.js 可以在服务器端渲染页面，将已渲染的 HTML 发送给客户端，对于首次加载的页面来说，用户无需等待服务器返回完整的 HTML，从而提高了页面加载速度。
- 更好的 SEO：由于 Next.js 可以在服务器端预渲染页面，所有的页面内容都可以被爬虫抓取，从而提高了搜索引擎的可访问性。
- 简化开发和部署流程：Next.js 提供了一系列开箱即用的特性，如路由、代码拆分、样式和图片优化等，使得开发者可以专注于业务逻辑，而不用过多关注底层细节。
- 支持静态导出：Next.js 可以将页面导出为静态 HTML 文件，使得我们可以将页面部署到任意支持静态文件的服务器，无需复杂的服务器配置。
Next.js SSR 的实践
安装和配置
首先，我们要使用 npm 或 yarn 安装 Next.js：
npm install next react react-dom
# 或
yarn add next react react-dom
接下来，在项目根目录下创建一个 pages 目录，并创建一个 index.js 文件作为我们的首页：
function HomePage() {
return <div>Welcome to Next.js!</div>;
}
export default HomePage;
在项目的 package.json 中添加以下脚本：
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
然后，我们就可以运行 npm run dev 或 yarn dev 来启动开发服务器。
创建动态页面
Next.js 提供了动态路由的支持，我们可以根据不同的 URL 来渲染不同的页面。在 pages 目录下创建一个带参数的路由示例：
// pages/post/[id].js
import { useRouter } from 'next/router';
function Post() {
const router = useRouter();
const { id } = router.query;
return <div>Post ID: {id}</div>;
}
export default Post;
当用户访问 /post/1 页面时，我们将渲染显示 Post ID: 1。这样，我们就可以根据动态参数来渲染不同的页面，非常方便！
数据获取和渲染
在 SSR 中，我们可以将页面的数据获取逻辑放在 getInitialProps 方法中。这个方法会在服务器端渲染页面之前被调用，并将返回的数据作为页面的属性传递给客户端。
// pages/index.js
function HomePage({ posts }) {
return (
<div>
<h1>Latest Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
HomePage.getInitialProps = async () => {
const response = await fetch('https://api.example.com/posts');
const posts = await response.json();
return { posts };
};
export default HomePage;
上述例子中，我们从一个示例 API 获取了帖子数据，然后在页面中渲染出来。在服务器端渲染时，getInitialProps 会被执行，然后将返回的 posts 数据传递给客户端。
静态导出
如果我们希望将页面导出为静态 HTML 文件，可以使用 next export 命令。在 package.json 中添加以下脚本：
"scripts": {
"export": "next export"
}
然后运行 npm run export 或 yarn export，Next.js 会将所有的页面导出为静态 HTML 文件，并存储在 out 目录中。这样我们可以将这些文件部署到任何支持静态文件的服务器上，而无需运行 Node.js 服务器。
总结
通过 Next.js 提供的服务器端渲染和其他特性，我们可以更好地优化网页的性能、SEO，并简化开发和部署的流程。Next.js 的灵活性使得我们可以根据需求创建动态页面，并方便地获取并渲染数据。同时，还可以通过静态导出的方式，将页面导出为静态 HTML 文件，方便部署。因此，在 Web 应用程序开发中，Next.js 是一个强大而实用的工具。
参考链接：
本文来自极简博客，作者：科技前沿观察，转载请注明原文链接：Next.js 在 SSR 中的应用实践
