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


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
JavaScript 前端开发 API
【第42期】一文了解服务端渲染框架NextJS
【第42期】一文了解服务端渲染框架NextJS
767 0
|
前端开发 JavaScript 程序员
基于React Hooks封装的验证码组件
基于React Hooks封装的验证码组件
1525 1
|
前端开发 应用服务中间件 nginx
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
1449 0
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
308 0
|
9月前
|
前端开发 API 数据库
Next 编写接口api
Next 编写接口api
468 3
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
532 0
Next.js 实战 (四):i18n 国际化的最优方案实践
|
前端开发 JavaScript 编译器
Vite中预处理器(如less)的配置
【8月更文挑战第2天】Vite中预处理器(如less)的配置
1176 4
|
搜索推荐 网络架构 开发者
Next.js静态出口生成策略深度解析
【7月更文挑战第18天】Next.js凭借其强大的静态生成、静态出口生成以及服务器端渲染功能,为开发者提供了构建高性能、高SEO友好Web应用的强大工具。
最通俗易懂的 JAVA slf4j,log4j,log4j2,logback 关系与区别以及完整集成案例
最通俗易懂的 JAVA slf4j,log4j,log4j2,logback 关系与区别以及完整集成案例
最通俗易懂的 JAVA slf4j,log4j,log4j2,logback 关系与区别以及完整集成案例