vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.66k stars 26.93k forks source link

SSR Function Works in Mozilla but Not in Chrome #51814

Open younes-ahmadian opened 1 year ago

younes-ahmadian commented 1 year ago

Verify canary release

Provide environment information

Operating System:        
      Platform: win32        
      Arch: x64              
      Version: Windows 10 Pro
    Binaries:                
      Node: 18.12.1          
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8-canary.2
      eslint-config-next: 13.4.5
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: standalone

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue or a replay of the bug

hope the description be enough.

To Reproduce

To Reproduce:

Navigate to the payment page in my Next.js application. Initiate a payment and get redirected to the bank page. Complete the payment process on the bank page. After the payment is completed, you should be redirected back to my Next.js application's destination page. On the destination page, the SSR function should retrieve and display certain information.

Describe the Bug

Hello there

I'm facing an issue with my Next.js project involving server-side rendering (SSR). In my application, I have a payment flow where the user is redirected to a bank page for payment. Upon returning to my page, I rely on an SSR function to retrieve and display some information.

The problem is that the SSR function works as expected in Mozilla, but it doesn't seem to work properly in Chrome and gets no data in SSR. if i reload the page in returning page data is present and everything is ok. I have tried clearing the cache and checking network requests, but the issue persists. I'm wondering if there might be any browser-specific behavior or compatibility issues causing this discrepancy.

Could anyone provide guidance on how to troubleshoot and fix this issue? I would greatly appreciate any insights or suggestions.

SSR request in returning page is as follow:

export async function getServerSideProps(context: any) { const { transactionId } = context.params; const { token } = context.req.cookies;

return await GETSSR( bankTransaction(transactionId, ServiceType), token ).then((e) => { return { props: { result: e.result } }; }); }

after reloading the returning page the data is present and everything is ok.

Expected Behavior

Expected behavior: The SSR function retrieves and displays the expected information on the destination page consistently across different browsers.

Actual behavior: The SSR function works as expected in Mozilla, but doesn't work correctly in Chrome. When returning to the destination page in Chrome, the SSR function fails to retrieve and display the expected information. If reload the page in the destination page the expected data is present.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

icyJoseph commented 1 year ago

Are you using PWA? like next-pwa?

ebo-bpi commented 1 year ago

Check cookie settings. Chrome is more strict in rejecting cookies then Firefox.

younes-ahmadian commented 1 year ago

Are you using PWA? like next-pwa?

yeah, i'm using next-pwa. but the issue was related to the attribute of cookie settings, as mentioned by @ebo-bpi.

younes-ahmadian commented 1 year ago

Check cookie settings. Chrome is more strict in rejecting cookies then Firefox.

That's right. thanks for your hint.