使用 Next.js 构建 SSR 应用

Next.js 是一个基于 React 的轻量级框架，用于构建服务器渲染应用程序。它提供了简单的配置和优化，使开发者能够快速构建高性能的 Web 应用程序。在本篇博客中，我们将探讨 Next.js 的三种主要的渲染方式：服务器渲染、预渲染和静态导出。

服务器渲染 (Server-Side Rendering)

服务器渲染是一种通过在服务器上生成 HTML 内容的方式来渲染页面。这样做的好处是，通过从服务器端返回完全渲染好的页面，可以提供更好的 SEO 支持和更快的初始加载时间。在 Next.js 中，服务器渲染是默认的渲染方式。通过创建一个基于 React 的组件，并将其导出为默认模块，可以轻松地实现服务器渲染。

下面是一个简单的示例：

// pages/index.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>Server-Side Rendering (SSR) Example</p>
    </div>
  );
};

export default Home;

在上述示例中，我们创建了一个简单的首页组件，并将其导出为默认模块。当用户访问 / 路径时，Next.js 将在服务器端渲染该组件，并返回完整的 HTML 内容。

预渲染 (Pre-rendering)

预渲染是在构建时生成 HTML 文件的过程。与服务器渲染不同，预渲染时页面内容是在构建时生成的，然后静态地提供给客户端。这种渲染方式适用于那些不需要频繁更新的静态内容，并且可以通过 CDN 进行缓存和分发。在 Next.js 中，可以通过在页面组件中使用 getStaticProps 函数来实现预渲染。

下面是一个简单的示例：

// pages/about.js

import React from 'react';

const About = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
};

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

  return {
    props: {
      data
    }
  };
}

export default About;

在上述示例中，我们定义了一个带有 getStaticProps 函数的页面组件。在该函数中，我们通过调用外部 API 来获取关于页面的数据，并将其作为属性传递给页面组件。当用户访问 /about 路径时，Next.js 会在构建时预先渲染该页面，并将从 getStaticProps 函数中获取的数据作为属性传递给页面组件。

静态导出 (Static Exporting)

静态导出是一种将 React 组件导出为静态 HTML 文件的方式。与服务器渲染和预渲染不同，静态导出的页面是在构建时生成的，并且不具有与服务器的实时连接。这种方式适用于静态内容完全不需要动态更新的场景。在 Next.js 中，可以通过创建一个名为 next.config.js 的配置文件来实现静态导出。

下面是一个简单的示例：

// next.config.js

module.exports = {
  exportPathMap: async function () {
    const paths = {
      '/': { page: '/' },
      '/about': { page: '/about' }
    };

    return paths;
  }
};

在上述示例中，我们定义了一个 exportPathMap 函数来指定要导出的页面。在这个函数中，我们可以通过返回一个对象来定义路径和页面的映射关系。当运行 next export 命令时，Next.js 将根据配置文件中定义的路由生成对应的静态 HTML 文件。

总结

在本篇博客中，我们通过使用 Next.js 构建服务器渲染、预渲染和静态导出的应用程序来了解了不同的渲染方式。无论是为了实现更好的 SEO 支持还是提供更好的性能和快速初始加载时间，Next.js 提供了简单且灵活的方式来满足不同的需求。希望通过本文的介绍，能帮助读者更好地了解和使用 Next.js。

本文来自极简博客，作者：蔷薇花开，转载请注明原文链接：使用 Next.js 构建 SSR 应用