正文

揭秘Next.js SSR框架：实战实例带你轻松上手全站渲染

/0 浏览量
0127

Next.js 是一个基于 React 的框架，专为服务器端渲染（SSR）而设计。它简化了 React 应用的部署和开发流程，使得开发者可以轻松实现全站渲染。本文将详细介绍 Next.js 的 SSR 框架，并通过实战实例带你轻松上手。

Next.js 简介

Next.js 是一个开源的 React 框架，由 Vercel（前 GitLab）维护。它提供了许多开箱即用的功能，如静态站点生成、服务器端渲染、数据获取等，使得开发者可以更加高效地开发 React 应用。

Next.js SSR 原理

服务器端渲染（SSR）是指将 React 组件在服务器上渲染成 HTML 字符串，然后发送到客户端。客户端使用这些 HTML 字符串进行挂载，从而实现页面渲染。Next.js 通过以下步骤实现 SSR：

  1. 服务器接收到请求。
  2. Next.js 服务器渲染器将 React 组件渲染成 HTML 字符串。
  3. 将渲染好的 HTML 字符串发送到客户端。
  4. 客户端使用 React 将 HTML 字符串转换为 React 组件，完成页面渲染。

Next.js SSR 实战实例

下面通过一个简单的 Next.js 应用实例，带你轻松上手全站渲染。

1. 创建 Next.js 应用

首先，你需要安装 Node.js 和 npm。然后，使用以下命令创建一个新的 Next.js 应用：

npx create-next-app my-nextjs-app
cd my-nextjs-app

2. 编写 React 组件

在 pages 文件夹下创建一个名为 index.js 的文件，并编写以下 React 组件：

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>欢迎来到 Next.js 应用</h1>
      <p>这是首页内容</p>
    </div>
  );
};

export default Home;

3. 配置服务器端渲染

Next.js 默认开启 SSR。在 pages/_app.js 文件中，你可以自定义服务器端渲染的逻辑：

// pages/_app.js
import React from 'react';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

4. 启动 Next.js 应用

在终端中运行以下命令启动 Next.js 应用：

npm run dev

打开浏览器访问 http://localhost:3000，即可看到渲染好的页面。

5. 获取数据

Next.js 提供了 getServerSideProps 方法，用于在服务器端获取数据。以下是一个获取服务器数据的示例：

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>欢迎来到 Next.js 应用</h1>
      <p>当前日期：{data.date}</p>
    </div>
  );
};

export async function getServerSideProps() {
  const res = await fetch('https://date.nager.at/Api/v2/Today');
  const data = await res.json();

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

export default Home;

6. 静态站点生成

Next.js 还支持静态站点生成（SSG）。在 pages/index.js 文件中，将 getServerSideProps 替换为 getStaticProps：

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>欢迎来到 Next.js 应用</h1>
      <p>当前日期：{data.date}</p>
    </div>
  );
};

export async function getStaticProps() {
  const res = await fetch('https://date.nager.at/Api/v2/Today');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // 在 10 秒内缓存数据
  };
}

export default Home;

总结

通过本文的介绍，相信你已经对 Next.js 的 SSR 框架有了深入的了解。通过实战实例，你学会了如何创建 Next.js 应用、编写 React 组件、配置服务器端渲染以及获取数据。希望这些知识能帮助你轻松上手 Next.js 全站渲染。

-- 展开阅读全文 --