服务端渲染-nextjs如何发起请求

简介: 服务端渲染-nextjs如何发起请求

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. 这样可以确保页面在初始加载时就具有所需的数据,并进行服务器端渲染

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


参考资料

next.js中文文档


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
4天前
|
JavaScript 前端开发 API
【第42期】一文了解服务端渲染框架NextJS
【第42期】一文了解服务端渲染框架NextJS
212 0
|
4天前
|
前端开发 JavaScript UED
服务器端渲染(SSR)与客户端渲染(CSR):选择哪个更适合你的应用程序?
在现代Web应用程序开发中,前端技术已经变得非常重要。在构建Web应用程序时,开发人员需要考虑两种不同的渲染方式:服务器端渲染(SSR)和客户端渲染(CSR)。本文将比较这两种渲染方式并探讨如何选择最适合你的应用程序。
34 0
|
4天前
|
前端开发 JavaScript 网络协议
前端中 JS 发起的请求可以暂停吗?
前端中 JS 发起的请求可以暂停吗?
|
4天前
|
前端开发 JavaScript 网络协议
【面试题】前端中 JS 发起的请求可以暂停吗?
【面试题】前端中 JS 发起的请求可以暂停吗?
|
4天前
|
开发框架 .NET Java
服务端渲染 VS 客户端渲染
服务端渲染 VS 客户端渲染
33 0
|
4天前
|
测试技术 API
使用 jMeter 给 Spartacus SSR 发送 100 个并发的 SSR 请求,全部被 SSR 响应了
使用 jMeter 给 Spartacus SSR 发送 100 个并发的 SSR 请求,全部被 SSR 响应了
35 0
|
7月前
|
JSON 小程序 API
【uniapp小程序】request发起请求
【uniapp小程序】request发起请求
108 0
|
9月前
|
缓存 JavaScript 前端开发
客户端渲染
什么是客户端渲染页面呢?
49 2
|
9月前
axios请求后台数据并渲染
axios请求后台数据并渲染
122 0
|
9月前
|
缓存 JSON 前端开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)