Next.js 启用 SSR

服务器端渲染（Server Side Rendering, SSR）是现代前端框架中的一种重要技术。它允许在服务器上生成完整的 HTML 文档，并将其发送到客户端，从而提高了首屏加载速度和搜索引擎优化（SEO）。Next.js 是一个流行的 React 框架，内置了对 SSR 的支持，使得开发者能够轻松实现这一功能。

启用 SSR

默认启用 SSR

在 Next.js 中，SSR 是默认开启的。这意味着，当你创建一个新的页面时，该页面将自动采用 SSR 模式。例如，如果你在 pages 文件夹下创建了一个名为 index.js 的文件，那么这个页面将默认使用 SSR 渲染。

// pages/index.js
export default function Home() {
  return <div>Hello World</div>;
}

在这个例子中，Home 组件将被服务器渲染为完整的 HTML 字符串，然后发送给客户端。

手动启用 SSR

尽管 SSR 在 Next.js 中是默认启用的，但有时你可能需要手动控制某些组件或页面的渲染模式。为了手动启用 SSR，你可以使用 getInitialProps 方法或者更现代的 getServerSideProps 方法。

使用 getInitialProps

getInitialProps 是一个生命周期方法，可以让你在页面加载之前获取数据。这种方法主要用于从外部 API 获取数据并将其传递给页面。

// www.javascriptcn.com code example
// pages/index.js
import axios from 'axios';

export default function Home(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

Home.getInitialProps = async () => {
  const response = await axios.get('https://api.example.com/data');
  return {
    title: response.data.title,
    content: response.data.content,
  };
};

在这个例子中，getInitialProps 方法会在页面加载之前调用，从 API 获取数据并将其作为属性传递给 Home 组件。

使用 getServerSideProps

getServerSideProps 是一个更现代的方法，用于在每次请求时从服务器获取数据。与 getInitialProps 不同的是，getServerSideProps 只能在页面级别使用，并且它返回的数据会被自动注入到页面组件的 props 中。

// www.javascriptcn.com code example
// pages/index.js
export default function Home({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

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

  return {
    props: {
      title: data.title,
      content: data.content,
    },
  };
}

在这个例子中，getServerSideProps 方法会在每次请求时执行，并将获取到的数据作为 props 传递给 Home 组件。

静态站点生成（SSG）

除了 SSR，Next.js 还支持静态站点生成（Static Site Generation, SSG），这是一种预渲染所有页面的技术。虽然 SSG 和 SSR 都涉及服务器端的操作，但它们的工作方式不同。

使用 getStaticProps

getStaticProps 是一种用于 SSG 的方法，它允许你在构建时预渲染页面。这使得你的应用可以在部署时生成静态 HTML 文件，从而提高性能。

// www.javascriptcn.com code example
// pages/index.js
export default function Home({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

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

  return {
    props: {
      title: data.title,
      content: data.content,
    },
  };
}

在这个例子中，getStaticProps 方法会在构建时执行，并将获取到的数据作为 props 传递给 Home 组件。这些数据会被用来生成静态 HTML 文件，从而实现快速加载。

总结

Next.js 提供了多种方法来实现 SSR 和 SSG，使得开发者可以根据具体需求选择最合适的技术。通过使用 getInitialProps、getServerSideProps 或 getStaticProps，你可以灵活地控制页面的渲染方式，从而优化应用的性能和用户体验。