首页IT科技js首次加载执行(next.js初始化参数设置getServerSideProps应用学习)

js首次加载执行(next.js初始化参数设置getServerSideProps应用学习)

时间2025-04-30 22:36:45分类IT科技浏览3560
导读:使用 getServerSideProps 是 next.js 中的一项特色功能,可以让我们在给页面设置一些初始的 props 参数。...

使用

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 初始化参数设置的资料请关注本站其它相关文章!

声明:本站所有文章   ,如无特殊说明或标注               ,均为本站原创发布              。任何个人或组织              ,在未征得本站同意时,禁止复制   、盗用               、采集              、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益             ,可联系我们进行处理             。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
rpc教程(《RPC实战与核心原理》学习笔记Day12) windows10激活错误代码0xc004f074(为什么Win10系统激活失败会提示错误代码0xc004f074 ?)