js首次加载执行(next.js初始化参数设置getServerSideProps应用学习)
使用
getServerSideProps 是 next.js 中的一项特色功能 ,可以让我们在给页面设置一些初始的 props 参数 。
getServerSideProps 是定义在页面中的 API ,但是其执行环境是 node 端 ,而不是客户端 ,一般常见使用场景为:
页面前置权限校验 页面必备参数获取使用时需要在对应的 page 文件中 export getServerSideProps
这样便可以从页面组件中直接使用 props 来获取 getServerSideProps 注入的 props 了 。
ts 定义
如果是在 TS 中 next.js 也提供了 GetServerSideProps 接口来方便智能提示 。
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 为开发环境下地址段 ,该请求的返回值为:
从而将 getServerSideProps 返回值在页面挂载时注入进去 。
请求 API
需要注意 getServerSideProps 为 node server 端代码 ,无法在其中直接请求内部 API ,因为会找不到地址(外部 API 可以请求,认为是这段代码是独立的 node 端代码就行了) 。如果想要调用内部 API 可以将对应的 API handler 拆解 ,作为方法调用 。
问题
还有一点需要注意的是 ,虽然 getServerSideProps 为 server 端代码,但是客户端打包时好似仍然会将对应的代码打包到页面中 ,所以应当尽量避免其中有过于复杂的逻辑或引入一些较大的包 。
特殊处理 - 404 、跳转 、异常
getServerSideProps 返回值除了可以设置 props 外还可以使用 notFound 来强制页面跳转到 404 。
或者是使用 redirect 来将页面重定向 。
并且如果 getServerSideProps 报错了 ,next.js 将会直接跳转到 500 页面 ,又省下一段异常处理代码 ,可喜可贺 。
总结
通过 next.js 的 getServerSideProps ,我们在开发中可以很好的协调前后端数据 ,一些页面初始化数据 、页面鉴权可以直接在 getServerSideProps 中进行处理 ,这样可以大大简化页面逻辑 ,还保障前后端的统一性 ,更多关于next.js 初始化参数设置的资料请关注本站其它相关文章!
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!