Next.js 入门指南：玩转 React 服务端渲染框架

2024-01-17 13:25:21

Next.js 是一个基于 React 的服务端渲染框架，它可以通过预渲染提高页面加载速度并简化开发流程。

Next.js 的核心特点在于服务端渲染 (SSR)，这项技术可以将 React 组件渲染成 HTML，然后将其发送给客户端。

服务端渲染的优势

更快地加载速度： SSR 可加快初始页面加载速度，因为它在服务器端预先渲染页面，从而减少了客户端需要加载和呈现的内容数量。
更好的 SEO： SSR 有助于提高搜索引擎优化 (SEO)，因为它允许搜索引擎抓取和索引整个页面，而不是仅仅抓取客户端渲染的 JavaScript 代码。
更少的客户端逻辑： SSR 可以减少客户端需要执行的 JavaScript 代码数量，从而提高性能并降低延迟。

使用 Next.js 入门

要开始使用 Next.js，您需要安装 Node.js 和 npm。安装好后，您可以使用以下命令创建一个新的 Next.js 项目：

npx create-next-app my-app

这将在您的当前目录中创建一个名为 my-app 的新目录。要启动项目，只需运行以下命令：

cd my-app
npm run dev

这将在端口 3000 上启动一个开发服务器。您现在可以在浏览器中访问 http://localhost:3000 来查看您的应用程序。

在 Next.js 中使用 SSR

要使用 Next.js 中的 SSR，您需要在页面组件中使用 getServerSideProps 函数。该函数将在服务器端执行，并允许您获取数据或执行其他操作，然后将结果传递给页面组件。

例如，以下代码片段演示了如何使用 getServerSideProps 函数从 API 中获取数据：

import { getServerSideProps } from "next";

export async function getServerSideProps() {
  const res = await fetch("https://example.com/api/data");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}