Next.js 是一款基于 React 的 SSR 框架，它能够让我们在服务端渲染 React 组件，实现更快的页面加载速度和更好的 SEO。但是在 Next.js 中，我们经常会遇到在服务端发送 HTTP 请求的需求，比如获取初始数据、调用 API 等。在本文中，我们将介绍如何在 Next.js 中从服务端发送 HTTP 请求的完美解决方案。
问题
在 Next.js 中，我们可以在 getInitialProps 中获取初始数据，例如：
-- -------------------- ---- ------- ------ ----- ---- --------------------- -------- ------- ----- -- - ------ ------------ --- ------- -------- - --------------------- - ----- ---------- - ----- --- - ----- -------------------------------------------------- ----- ---- - ----- ---------- ------ - ------ --------------------- - - ------ ------- -----展开代码
在上面的例子中，我们使用 isomorphic-unfetch 库发送 HTTP 请求获取 GitHub 上 Next.js 项目的信息，并将获取到的 stargazers_count 展示在页面中。
然而，如果我们在服务端发送 HTTP 请求，我们需要注意以下几点：
- Node.js 中的
fetchAPI 不支持 HTTPS，因此我们需要使用第三方库来发送 HTTPS 请求。 - 在服务端发送 HTTP 请求需要注意安全性问题，例如防止 CSRF 攻击。
- 在服务端发送 HTTP 请求需要注意性能问题，例如请求并发数的控制。
因此，我们需要寻找一种更加完美的解决方案。
解决方案
我们可以使用 axios 库来发送 HTTP 请求。axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它支持并发请求、拦截请求和响应、转换请求和响应数据等功能，非常强大。
在 Next.js 中，我们可以使用 axios 来发送 HTTP 请求，并在 getInitialProps 中使用 await 关键字等待请求完成。例如：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------- ----- -- - ------ ------------ --- ------- -------- - --------------------- - ----- ---------- - ----- --- - ----- ------------------------------------------------------- ------ - ------ ------------------------- -- -- ------ ------- ------展开代码
在上面的例子中，我们使用 axios 库发送 HTTP 请求获取 GitHub 上 Next.js 项目的信息，并将获取到的 stargazers_count 展示在页面中。
安全性
在服务端发送 HTTP 请求需要注意安全性问题，例如防止 CSRF 攻击。CSRF（Cross-site request forgery）攻击是一种利用用户在已登录网站的情况下，通过伪造请求让用户执行某些操作的攻击方式。
为了防止 CSRF 攻击，我们可以在服务端发送 HTTP 请求时添加 CSRF token。例如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- ---- ---------- -------- ------- ----- -- - ------ ------------ --- ------- -------- - --------------------- - ----- ---------- ---- --- -- - ----- ------- - --- ------------ ----- ----- --------- - ------------------------- ----- ------- - - --------------- --------- -- ----- --- - ----- ------------------------------------------------------ - ------- --- ------ - ------ ------------------------- -- -- ------ ------- ------展开代码
在上面的例子中，我们使用 cookies 库获取 CSRF token，并在 axios 请求中添加 X-CSRF-Token 头部。
性能
在服务端发送 HTTP 请求需要注意性能问题，例如请求并发数的控制。为了避免同时发送大量 HTTP 请求导致服务器负载过高，我们可以使用 axios 的并发请求功能。
例如，我们可以使用 Promise.all 方法并发发送多个 HTTP 请求：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------- ----- -- - ------ ------------ --- ------- -------- - --------------------- - ----- ---------- - ----- ---- - - -------------------------------------------- ---------------------------------------------- ----------------------------------------- -- ----- -------- - ------------ -- ---------------- ----- --------- - ----- ---------------------- ----- ----- - ----------------- -- --------------------------- ------ - ----- -- -- ------ ------- ------展开代码
在上面的例子中，我们使用 Promise.all 方法并发发送多个 HTTP 请求，等待所有请求完成后将获取到的 stargazers_count 数据返回。
结论
在 Next.js 中，我们可以使用 axios 库来发送 HTTP 请求，并使用 await 关键字等待请求完成。为了防止 CSRF 攻击，我们可以在服务端发送 HTTP 请求时添加 CSRF token。为了避免同时发送大量 HTTP 请求导致服务器负载过高，我们可以使用 axios 的并发请求功能。
综上所述，我们可以使用 axios 库来实现在 Next.js 中从服务端发送 HTTP 请求的完美解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a5f17b06ebbd267b529e8
