next.js初始化参数设置getServerSideProps应用学习

目录
  • 使用
  • ts 定义
  • context
  • 实现
  • 请求 API
  • 问题
  • 特殊处理 - 404、跳转、异常
  • 总结

使用

getServerSideProps 是 next.js 中的一项特色功能，可以让我们在给页面设置一些初始的 props 参数。

getServerSideProps 是定义在页面中的 API，但是其执行环境是 node 端，而不是客户端，一般常见使用场景为：

  • 页面前置权限校验
  • 页面必备参数获取

使用时需要在对应的 page 文件中 export getServerSideProps

const Page = props => {
    return <div>page</div>;
};
export async function getServerSideProps(context) {
    return {
        props: {}
    };
}
export default Page;

这样便可以从页面组件中直接使用 props 来获取 getServerSideProps 注入的 props 了。

ts 定义

如果是在 TS 中 next.js 也提供了 GetServerSideProps 接口来方便智能提示。

import { GetServerSideProps } from 'next';
export const getServerSideProps: GetServerSideProps = async context => {
    return {
        props: {}
    };
};

context

getServerSideProps 中的 context 参数包含了常用的请求的 req、res、params、query 等参数，还包含了 preview、previewData、resolvedUrl、locale 等参数

实现

当 getServerSideProps 所在页面为 SSR 服务端渲染时，getServerSideProps 中的数据将会被放到全局的 _NEXT_DATA 中，用于 hydrate。

而非 SSR 情况下，进入该页面 next.js 将会自动发请求到： _next/data/development/{url}.json?{query}，其中 development 为开发环境下地址段，该请求的返回值为：

{
    "pageProps": "返回的 props 数据内容",
    "__N_SSP": true
}

从而将 getServerSideProps 返回值在页面挂载时注入进去。

请求 API

需要注意 getServerSideProps 为 node server 端代码，无法在其中直接请求内部 API，因为会找不到地址（外部 API 可以请求，认为是这段代码是独立的 node 端代码就行了）。如果想要调用内部 API 可以将对应的 API handler 拆解，作为方法调用。

// api/test.ts
export const getContent = async () => {
    return content;
};
export default async function handler(req: NextApiRequest, res: NextApiResponse<Response<T[]>>) {
    res.status(200).json({
        code: 0,
        data: await getContent()
    });
}

// pages/page.tsx
import { getContent } from './api/test.ts';
export const getServerSideProps: GetServerSideProps = async context => {
    return {
        props: await getContent()
    };
};

问题

还有一点需要注意的是，虽然 getServerSideProps 为 server 端代码，但是客户端打包时好似仍然会将对应的代码打包到页面中，所以应当尽量避免其中有过于复杂的逻辑或引入一些较大的包。

特殊处理 - 404、跳转、异常

getServerSideProps 返回值除了可以设置 props 外还可以使用 notFound 来强制页面跳转到 404。

export async function getServerSideProps(context) {
    const data = await getData();
    if (!data) {
        return {
            notFound: true
        };
    }
    return {
        props: { data }
}

或者是使用 redirect 来将页面重定向。

export async function getServerSideProps(context) {
    const data = await getData();
    if (!data) {
        return {
            redirect: {
                destination: '/',
                permanent: false
            }
        };
    }
    return {
        props: { data }
    };
}

并且如果 getServerSideProps 报错了，next.js 将会直接跳转到 500 页面，又省下一段异常处理代码，可喜可贺。

总结

通过 next.js 的 getServerSideProps，我们在开发中可以很好的协调前后端数据，一些页面初始化数据、页面鉴权可以直接在 getServerSideProps 中进行处理，这样可以大大简化页面逻辑，还保障前后端的统一性，更多关于next.js 初始化参数设置的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • react框架next.js学习之API 路由篇详解

    目录 正文 使用方式 API 路由匹配 API 处理 API 配置 边缘计算支持 自定义 API 注意点 总结 正文 next.js 作为最热门的 react 框架,不过这么久了好像国内使用率一直不太高.最近在研究做个小项目正好做下笔记,有兴趣的可以一起来学习. next.js 首页标榜的 12 个特性之一就是 API routes,简单的说就是可以 next.js 直接写 node 代码作为后端服务来运行.因此我们可以直接使用 next.js 直接维护一个全栈项目,听起来很香的样子. 使用方式

  • next.js getServerSideProps源码解析

    目录 SSR 处理 动态加载处理 总结 SSR 处理 老规矩,昨天写了关于 getServerSideProps 的内容,今天趁热写一下 getServerSideProps 相应的源码,看看 next.js getServerSideProps 是怎么实现的,还有什么从文档无法知晓的细节. 我们先从 SSR 时相关的 getServerSideProps 处理看起,源码排查步骤上一步已经有所介绍,本篇不再多说,在 SSR 时,next.js 会调用 doRender 来进行渲染,其中会再次调用

  • Next.js脚手架完整搭建封装的方法步骤

    Next.js脚手架完整搭建封装的方法步骤

    针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用; 内容包括:(1)sass样式配置;(2)axios拦截封装;(3)action模块化;(4)reducer模块化;(5)redux搭建;(6)dispatch示范;(7)saga中间件配置;(8)saga拦截示范;(9)useEffect异步请求示范;(10)getServerSideProps/getStaticPr

  • 基于Next.js实现在线Excel的详细代码

    基于Next.js实现在线Excel的详细代码

    目录 认识 Next.js 实战之旅 如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤?这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好. 我们需要考虑细节有很多,比如: 必须使用打包程序(例如 webpack)打包代码,并使用 Babel 等编译器进行代码转换. 需要针对生产环境进行优化,例如代码拆分.需要对一些页面进行预先渲染以提高页面性能和 SEO,可能还希望使用服务器端渲染或客户端渲染. 必须编写一些服务器端代码才能将 Re

  • Next.js入门使用教程

    目录 简介 创建Next.js项目 手动创建Next.js项目 creact-next-app快速创建项目 Pages 路由 Link Router 参数传递与接收 动态路由 钩子事件 获取数据 getStaticProps 构建时请求数据 getServerSideProps 每次访问时请求数据 CSS支持 添加全局样式表 添加组件级CSS 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架. 官网链接:www.nextjs.cn/ 优点: 零配置 自动编译并打包.从一开始就

  • 使用next.js开发网址缩短服务的方法

    一.网址缩短服务的原理 网址缩短服务,并不是压缩算法.而是把原网址存储在数据库中,用短的参数做key,届时取出原始url,并跳转. 因此,短网址最适合用key/value数据库. 那么,短网址的唯一参数,如何生成呢?其实用的就是10进制转62进制. function string10to62(number) { var chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split(''), radix

  • next.js初始化参数设置getServerSideProps应用学习

    目录 使用 ts 定义 context 实现 请求 API 问题 特殊处理 - 404.跳转.异常 总结 使用 getServerSideProps 是 next.js 中的一项特色功能,可以让我们在给页面设置一些初始的 props 参数. getServerSideProps 是定义在页面中的 API,但是其执行环境是 node 端,而不是客户端,一般常见使用场景为: 页面前置权限校验 页面必备参数获取 使用时需要在对应的 page 文件中 export getServerSideProps

  • oracle初始化参数设置

    正在看的ORACLE教程是:oracle初始化参数设置.ALTER DATABASE DATAFILE'd:ORANTDATABASEUSER1ORCL.ORA' RESIZE 1000M;CREATE TABLESPACE INDEX_DATA DATAFILE'd:ORANTDATABASEINDEX_DATA' SIZE 500M;ALTER DATABASE DATAFILE'd:ORANTDATABASERBS1ORCL.ORA' RESIZE 300M;ALTER DATABASE

  • js函数参数设置默认值的一种变通实现方法

    php有个很方便的用法是在定义函数时可以直接给参数设默认值,如: 复制代码 代码如下: function simue ($a=1,$b=2){ return $a+$b; } echo simue(); //输出3 echo simue(10); //输出12 echo simue(10,20); //输出30 但js却不能这么定义,如果写function simue(a=1,b=2){}会提示缺少对象. js函数中有个储存参数的数组arguments ,所有函数获得的参数会被编译器挨个保存到这

  • Python新手学习函数默认参数设置

    在某些情况下,程序需要在定义函数时为一个或多个形参指定默认值,这样在调用函数时就可以省略为该形参传入参数值,而是直接使用该形参的默认值. 为形参指定默认值的语法格式如下: 形参名 = 默认值 从上面的语法格式可以看出,形参的默认值紧跟在形参之后,中间以英文"="隔开. 例如,如下程序为 name.message 形参指定了默认值: # 为两个参数指定默认值 def say_hi(name = "孙悟空", message = "欢迎来到C语言中文网&quo

  • Keras SGD 随机梯度下降优化器参数设置方式

    SGD 随机梯度下降 Keras 中包含了各式优化器供我们使用,但通常我会倾向于使用 SGD 验证模型能否快速收敛,然后调整不同的学习速率看看模型最后的性能,然后再尝试使用其他优化器. Keras 中文文档中对 SGD 的描述如下: keras.optimizers.SGD(lr=0.01, momentum=0.0, decay=0.0, nesterov=False) 随机梯度下降法,支持动量参数,支持学习衰减率,支持Nesterov动量 参数: lr:大或等于0的浮点数,学习率 momen

  • Oracle参数设置教程之set和reset的实用案例

    Oracle参数设置教程之set和reset的实用案例

    前言 本文主要给大家介绍了关于Oracle参数设置之set和reset的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 环境:Oracle 10.2.0.5 RAC 需求:节点1的aq_tm_processes要求恢复默认,节点2设置要求保持不变 背景介绍: 从10.2官档可以查到aq_tm_processes参数,看到该参数的默认值是0,我们姑且叫做它为默认0. 然后,在实际上发现,这个默认0和我们手工将其SET设置成0,效果是完全不一样的. 与同事交流此事,最终得

  • Angular.js初始化之ng-app的自动绑定与手动绑定详解

    前言 众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co

  • Oracle数据库中的控制文件管理以及常用参数设置

    一.控制文件 作用: 二进制文件 记录了数据库当前实例的结构和行为,数据文件日志文件的信息,维护数据库一致性 参数文件中定义了控制文件的位置和大小 很小的二进制文件,一般不超过100m mount阶段open以后,一直在用 一套控制文件只能连接一个database 分散放置,至少一份,至多八份 相关视图: v$controlfile ---- 列出实例的所有控制文件的名字和状态 v$parameter ---- 列出所有参数的位置和状态(where name='control_files') v

  • js使用DOM设置单选按钮、复选框及下拉菜单的方法

    本文实例讲述了js使用DOM设置单选按钮.复选框及下拉菜单的方法.分享给大家供大家参考.具体实现方法如下: 1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴上一个例子: 复制代码 代码如下: <script type="text/javascript">     function ge

  • 基于vue.js路由参数的实例讲解——简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

随机推荐