1. 前言

1. next.js中文文档
2. 服务端渲染SSR 现在用的比较多了
3. 这篇来说说 基于 react的 SSR 框架Nextjs如何发起请求

---

2. Next.js 发起请求 --使用内置的fetch函数

1. 它与浏览器中的fetch函数类似。
2. 代码示例

import React from 'react';

function MyPage({ data }) {
  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

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

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

export default MyPage;

1. getServerSideProps函数在服务器端发起HTTP请求，获取数据，并将数据作为props传递给页面组件MyPage。
2. 这样在页面组件中就可以使用data来展示数据了

---

3. 扩展

1. 在Next.js中，服务器端渲染是默认启用的，因此在页面加载时就会在服务器端执行getServerSideProps函数，并将获取的数据传递给页面组件。
2. 这样可以确保页面在初始加载时就具有所需的数据，并进行服务器端渲染

---

3. 使用第三方库：除了内置的fetch函数，你还可以使用第三方库来发起请求，例如axios、isomorphic-fetch等。
4. 使用这些库的方法与普通的React应用中相同。你可以在页面组件或API路由中导入并使用这些库来发起请求。

---

---

参考资料

next.js中文文档

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉