next.js初始化参数设置getServerSideProps应用学习
使用
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 初始化参数设置的资料请关注脚本之家其它相关文章！
相关文章
JavaScript使用Broadcast Channel实现前端跨标签页通信
这篇文章主要为大家详细介绍了JavaScript如何使用Broadcast Channel实现前端跨标签页通信,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
用Aptana软件来调试javascript的方法，一般情况下大家都使用firefox浏览器+firebug来调试的。2009-11-11
这篇文章主要介绍了JS实现的全排列组合算法,简单描述了全排列组合算法的原理并结合实例形式给出了全排列组合算法的具体实现技巧,需要的朋友可以参考下2017-10-10
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
marquee无缝滚动想必大家都有见过，本文利用div+css+javascript也实现下类似的滚动且兼容firefox，喜欢的朋友可以参考下2013-08-08
下面小编就为大家带来一篇深入理解Ajax的get和post请求。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
el-table el-table-column表头嵌套循环数据的示例代码
本文介绍了使用两个数组来实现el-table中表头的嵌套循环,一个数组用于循环表格数据,另一个用于循环表头,帮助读者更好地理解和应用表头嵌套功能,感兴趣的朋友跟随小编一起看看吧2024-09-09
这篇文章主要介绍了微信小程序开发实现的IP地址查询功能,可实现基于第三方接口的IP地址查询功能,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了基于JavaScript实现年月日三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家详细介绍了JS实现简单的表格增删，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要为大家详细介绍了基于JavaScript实现幸运抽奖页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
最新评论