Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: lazy load cookies #1654

Closed
wants to merge 2 commits into from
Closed

fix: lazy load cookies #1654

wants to merge 2 commits into from

Conversation

juliusmarminge
Copy link
Member

@juliusmarminge juliusmarminge commented Nov 10, 2023

Closes #1599
Closes #1639

✅ Checklist

  • I have followed every step in the contributing guide (updated 2022-10-06).
  • The PR title follows the convention we established conventional-commit
  • I performed a functional test on my final commit

Changelog

Lazy load cookies in order to not force layout to be forced dynamic


Screenshots

image

💯

Sorry, something went wrong.

Copy link

changeset-bot bot commented Nov 10, 2023

🦋 Changeset detected

Latest commit: f2ae2cf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
create-t3-app Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Nov 10, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
t3-upgrade ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 10, 2023 11:36am
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
create-t3-app ⬜️ Ignored (Inspect) Visit Preview Nov 10, 2023 11:36am

@github-actions github-actions bot added 📌 area: cli Relates to the CLI 📌 area: t3-app Relates to the generated T3 App labels Nov 10, 2023
Copy link
Contributor

github-actions bot commented Nov 10, 2023

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟢 Performance 100
🟢 Accessibility 98
🟢 Best practices 100
🟢 SEO 100
🔴 PWA 30

Lighthouse ran on https://core-9emj8cku7-ambrosia-e4d5fc28.vercel.app/

@bai
Copy link
Contributor

bai commented Nov 11, 2023

I've been playing around and I know this is WIP, but just in case wanted to mention that the error is still raised on pnpm build on this branch:

 << query  #2 post.hello  {
  input: { text: 'from tRPC' },
  result: g [TRPCClientError]: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

@juliusmarminge juliusmarminge added the 🚀 autorelease add this label to a pr to trigger a beta release label Nov 11, 2023
@juliusmarminge
Copy link
Member Author

I've been playing around and I know this is WIP, but just in case wanted to mention that the error is still raised on pnpm build on this branch:

 << query  #2 post.hello  {
  input: { text: 'from tRPC' },
  result: g [TRPCClientError]: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

What node version?

@bai
Copy link
Contributor

bai commented Nov 11, 2023

21.1.0

@inducingchaos
Copy link

inducingchaos commented Nov 11, 2023

Experiencing the same issue. Implemented the proposed changes on a brand new project and the deployments are still failing.

Here is the error on Vercel:

[97;46m << query �[1;97;46m #7 post.hello �[0m {
  input: { text: 'from tRPC' },
  result: g [TRPCClientError]: Unexpected token ; in JSON at position 4
      at g.from (/var/task/.next/server/app/page.js:1:25988)
      at /var/task/.next/server/app/page.js:1:29857
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: SyntaxError: Unexpected token ; in JSON at position 4
        at JSON.parse (<anonymous>)
        at parse (/var/task/.next/server/app/page.js:5:3478)
        at /var/task/.next/server/app/page.js:5:2767
        at o (/var/task/.next/server/app/page.js:5:2906)
        at U (/var/task/.next/server/app/page.js:5:3131)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async I (/var/task/.next/server/app/page.js:5:2987)
        at async L (/var/task/.next/server/app/page.js:5:2615)
  },
  elapsedMs: 20
}
g [TRPCClientError]: Unexpected token ; in JSON at position 4
    at g.from (/var/task/.next/server/app/page.js:1:25988)
    at /var/task/.next/server/app/page.js:1:29857
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: SyntaxError: Unexpected token ; in JSON at position 4
      at JSON.parse (<anonymous>)
      at parse (/var/task/.next/server/app/page.js:5:3478)
      at /var/task/.next/server/app/page.js:5:2767
      at o (/var/task/.next/server/app/page.js:5:2906)
      at U (/var/task/.next/server/app/page.js:5:3131)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async I (/var/task/.next/server/app/page.js:5:2987)
      at async L (/var/task/.next/server/app/page.js:5:2615)
}
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '1151950604'
}

Repo and the deployment link

Runs fine locally in dev mode and production.

Edit: deployment works when Vercel Authentication is disabled in deployment settings (thanks to @sscotth on Discord for the tip)

@eastcoasting
Copy link

I tried making these tweaks both on my existing t3-app and on a new project and these edits still do not allow static rendering via export const dynamic = "error" or export const dynamic = "force-static"

@dBianchii
Copy link

I don't know, the current cookies() being fetched from layout.tsx is making every single page dynamic.

I tried using this Promise approach but it doesn't change the fact that it is always fetching cookies() on every request. This breaks Next's default Static-First convention.

image

@danieljpgo
Copy link

danieljpgo commented Nov 14, 2023

I fix it by setting the <TRPCReactProvider/> cookie using window.document.cookie.

Also, components that need to dynamic, but cookie() is being used within tRPC (warning), I am using:

  • export const dynamic = "force-dynamic";
    or
  • noStore()

Basically Next is trying to generate the static page, but if it is using something that needs to be dynamic, it will not let it be dynamic.

@juliusmarminge
Copy link
Member Author

I fix it by setting the cookie using window.document.cookie.

no window during ssr, which is when we need the cookies if we don't wanna throw 401s

@juliusmarminge
Copy link
Member Author

Concluded this wasn't actually the fix I thought it was

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📌 area: cli Relates to the CLI 📌 area: t3-app Relates to the generated T3 App 🚀 autorelease add this label to a pr to trigger a beta release
Projects
None yet
6 participants