服务端渲染-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中文文档


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
10天前
|
开发框架 JavaScript 前端开发
服务端渲染框架
服务端渲染框架
|
24天前
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下,为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念,并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例,并以一个效果演示结束,总结SSE在Nest.js中的应用。
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
|
4月前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
449 1
前端JS发起的请求能暂停吗?
|
4月前
|
JSON JavaScript 数据格式
postman如何模拟浏览器发送post请求,意思是替代Vue向后端发送一个请求
postman如何模拟浏览器发送post请求,意思是替代Vue向后端发送一个请求
|
5月前
|
前端开发 JavaScript 网络协议
前端中 JS 发起的请求可以暂停吗?
前端中 JS 发起的请求可以暂停吗?
|
5月前
|
开发框架 .NET Java
服务端渲染 VS 客户端渲染
服务端渲染 VS 客户端渲染
50 0
|
5月前
|
测试技术 API
使用 jMeter 给 Spartacus SSR 发送 100 个并发的 SSR 请求,全部被 SSR 响应了
使用 jMeter 给 Spartacus SSR 发送 100 个并发的 SSR 请求,全部被 SSR 响应了
|
12月前
|
JSON 小程序 API
【uniapp小程序】request发起请求
【uniapp小程序】request发起请求
157 0
|
缓存 JavaScript 前端开发
客户端渲染
什么是客户端渲染页面呢?
63 2
axios请求后台数据并渲染
axios请求后台数据并渲染
161 0