Next.js 系列 04：在服务器组件之前

• Next.js 系列 01：为什么使用 Next.js
• Next.js 系列 02：客户端渲染与服务端渲染
• Next.js 系列 03：渲染策略
• Next.js 系列 04：在服务器组件之前
• Next.js 系列 05：什么是服务器组件
• Next.js 系列 06：服务器组件的好处

过去，在 Next 中为了 SSR，需要使用 getStaticProps、getServerSideProps 函数请求数据并渲染到页面。 不幸的是，它们只能用于页面（位于 pages 目录下的组件）。在现实中，页面往往被分成若干模块，每个模块可能对应不同的 API，所以很容易写出如下所示代码：

// pages/index.jsx

export const getServerSideProps = async () => {
  const module1 = await fetch('/api/module1').then((resp) => resp.json());
  const module2 = await fetch('/api/module2').then((resp) => resp.json());

  return { props: { module1, module2 } };
};

export default function Home({ module1, module2 }) {
  return (
    <main>
      <Module1 data={module1} />
      <Module2 data={module2} />
    </main>
  );
}

我打赌你也不想写上面这样的代码，模块越多，开发体验越糟糕。

况且，不同框架有不同的做法，在 Remix 中，使用 loader， 在 Astro 中，使用 fetch。 服务器组件，是 React 为社区制定的标准，它可以避免 getServerSideProps 的糟糕体验，具体用法我想放到下一篇。

至于以获取数据开头的理由，于我而言，除了打造令用户满意的产品之外，开发体验也相当重要。但凡是让我写代码幸福感提升的技术，就是好技术。

今天先到这，后面的篇幅我需要时间规划，更新可能会变慢，感谢你阅读。