fix: lazy load cookies

[juliusmarminge]

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

💯

[changeset-bot]

🦋 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

[vercel]

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]

⚡️ 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]

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]

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]

21.1.0

[inducingchaos]

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]

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]

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.

[danieljpgo]

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]

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]

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