V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Juppiter
V2EX  ›  前端开发

Next.js 求助

  •  
  •   Juppiter · 2023-08-07 14:04:44 +08:00 · 1115 次点击
    这是一个创建于 508 天前的主题,其中的信息可能已经有所发展或是发生改变。

    RT. 有没有什么办法可以让浏览器在请求页面的时候 SSR 服务端拿到浏览器的数据(比如说浏览器的默认语言)。除了使用 cookie 和 queryString 的方式。

    9 条回复    2023-08-09 13:24:58 +08:00
    USDT
        1
    USDT  
       2023-08-07 14:20:07 +08:00   ❤️ 1
    看你用的是 pages router 还是 app router ,本质上从请求的 headers 里面判断

    // 比方说拿 user agent
    pages router:

    export async function getServerSideProps({ req }: { req: NextRequest }) {
    const headers = req.headers;
    console.log('!!!', headers);
    return { props: { ua: headers.get('user-agent') } };
    }


    app router:
    // 注意不能在'use client'的文件里面用
    import { headers } from 'next/headers';

    export default function Home() {
    const hs = headers();
    console.log('>>>>>>>>>>>', hs.get('user-agent'))
    return (
    <main>
    Your agent is: {hs.get('user-agent')}
    </main>
    )
    }
    mdn
        2
    mdn  
       2023-08-07 14:21:29 +08:00
    js: navigator.languages
    服务器: request headers - Accept-Language
    Juppiter
        3
    Juppiter  
    OP
       2023-08-07 14:25:56 +08:00
    @USDT #1 可能我的描述不清楚。 目前的问题不是拿的问题,可能有自定义数据需要从浏览器取到服务端,这样的话用户从浏览器发送请求到服务端,在我的认知是没办法去加一个 custom header 让服务端拿到的吧
    Juppiter
        4
    Juppiter  
    OP
       2023-08-07 14:26:46 +08:00
    @mdn #2 如果不单是语言还有自定义数据怎么在服务端拿到呢
    mdn
        5
    mdn  
       2023-08-07 14:32:21 +08:00
    @Juppiter #4 如果是浏览器特定字段,可以从请求头中获取,比如语言等
    如果需要自定义,那就只能 cookie 和 url query string
    USDT
        6
    USDT  
       2023-08-07 14:36:05 +08:00
    @Juppiter 弱问一句浏览器是否是你们自己可控的呢,比方说微信在点开链接的时候是自己的 web view 套了一层,那么这个时候他就可以有办法加自定义字段……如果就是普通的 Chrome 之类的应该是没办法的
    fenglirookie
        7
    fenglirookie  
       2023-08-08 14:54:26 +08:00
    @USDT 他应该就是这个意思,就是在自己研发的 app webview 里面打开 nextjs 项目,在 nextjs 项目中拿到 webview 注入的自定义字段,再把这个字段传到 数据接口后台,这套我也没跑通(主要是没办法做得很通用)
    USDT
        8
    USDT  
       2023-08-08 16:57:23 +08:00
    @fenglirookie 嗯。。那我好奇问下做不到很通用的原因是啥呢,我理解最不济就是加几个自定义 header 的事情。是因为自定义数据比较复杂,嵌套层数可能比较多,想用类似 json 格式来做吗
    fenglirookie
        9
    fenglirookie  
       2023-08-09 13:24:58 +08:00
    @USDT 我之前的做法是在_app.tsx 里面 使用某个钩子函数,在这个钩子函数中获取 cookie 里面的内容,复制到 axios 的原型上,但是后来发现服务端客户端不互通,我已经搞了几个月了都没成功 ,我建议你还是换一种方案。就是使用官网推荐的方式在 page/api 下面定义一次接口,在这里面就可以随便获取,而且客户端无感,倒是安全系数蛮高
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   947 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 21:30 · PVG 05:30 · LAX 13:30 · JFK 16:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.