菜鸟教程
教程 react tutorial

Next.js 入门（服务端渲染、静态生成）

Next.js 是一个开源的 React 框架，它使得 React 应用能够在服务端渲染（SSR）和静态生成（SSG）之间进行灵活的选择。通过 Next.js，开发者能够创建既能在客户端执行的应用，又能在服务器上预渲染的页面，从而提升性能和 SEO。

服务端渲染（SSR）

服务端渲染（SSR）是指应用的 HTML 页面在服务器上预先生成，然后发送给客户端。这意味着用户在访问页面时，可以立即看到页面内容，而不是等待 JavaScript 加载后再渲染。

在 Next.js 中，启用 SSR 很简单，只需在页面组件中使用 getServerSideProps 方法即可。

使用 getServerSideProps 实现 SSR

getServerSideProps 是 Next.js 提供的一个异步函数，它会在每次请求时运行，获取数据并将数据传递给页面组件。

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

const Home = ({ data }) => {
  return (
    <div>
      <h1>服务端渲染页面</h1>
      <p>{data}</p>
    </div>
  );
};

// getServerSideProps 会在每次请求时运行
export async function getServerSideProps() {
  const data = '这是从服务端获取的数据';
  return {
    props: { data }, // 传递给页面组件的属性
  };
}

export default Home;

`

在上面的代码中，getServerSideProps 会在页面加载之前执行，并将数据传递给页面组件。

静态生成（SSG）

静态生成（SSG）是指在构建时（而不是每次请求时）生成 HTML 文件，这些文件可以直接部署到 CDN 上，从而提供更快的加载速度。

在 Next.js 中，启用 SSG 只需在页面组件中使用 getStaticProps 方法。getStaticProps 会在构建时执行一次，生成静态内容。

使用 getStaticProps 实现 SSG

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

const Home = ({ data }) => {
  return (
    <div>
      <h1>静态生成页面</h1>
      <p>{data}</p>
    </div>
  );
};

// getStaticProps 会在构建时执行一次
export async function getStaticProps() {
  const data = '这是静态生成的数据';
  return {
    props: { data }, // 传递给页面组件的属性
  };
}

export default Home;

在上面的代码中，getStaticProps 会在构建时执行并将数据传递给页面组件。这个方法适用于静态内容和无需频繁更新的页面。

SSR 和 SSG 的区别

特性 服务端渲染（SSR） 静态生成（SSG）
渲染时机 每次请求时都会在服务器上渲染页面 页面只在构建时渲染一次，生成静态 HTML 文件
性能 请求时需要等待服务器处理，因此加载速度稍慢 静态页面加载非常快，通常通过 CDN 提供
SEO 适合 SEO，因为 HTML 在服务器渲染时已经生成 适合 SEO，页面在构建时生成并直接部署到服务器
数据更新 页面每次请求时都会获取最新的数据 页面数据只能在构建时获取，如果数据变化，需要重新构建应用

如何选择 SSR 或 SSG？

  • 使用 SSR：适合那些需要动态更新的数据，或者需要在每次请求时获取最新内容的页面。
  • 使用 SSG：适合那些不常变化的数据，或静态内容，例如博客文章、新闻页面等。

Next.js 允许你在同一个应用中同时使用 SSR 和 SSG，给你提供最大的灵活性。

总结

Next.js 通过提供 getServerSideProps 和 getStaticProps，让你能够轻松地在 React 应用中实现服务端渲染（SSR）和静态生成（SSG）。根据不同的业务需求，你可以选择适合的渲染方式，提升用户体验和性能。

  • getServerSideProps 用于服务端渲染，适合动态页面。
  • getStaticProps 用于静态生成，适合静态页面。
  • Next.js 允许你灵活选择渲染方式，并在项目中结合使用。

相关内容