App reviews, troubleshooting, and recommendations
I found some comments stating that Polaris should support SSR fully, however, I get errors when I try to do so.
Here's a sandbox to recreate the issue.
It's a Next.js app using their App router. Files/routes be default are server side rendered, unless a 'use client' directive is provided. So, when I provide the directive, the page renders normally. When I removing it (thus reverting back to SSR), I get an error:
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function at eval (webpack-internal:///(rsc)/./node_modules/@shopify/polaris/build/esm/utilities/use-theme.js:17:87) at (rsc)/./node_modules/@shopify/polaris/build/esm/utilities/use-theme.js (/my_path/.next/server/vendor-chunks/@shopify.js:2075:1) at __webpack_require__ (/my_path/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./node_modules/@shopify/polaris/build/esm/components/AppProvider/AppProvider.js:8:81) at (rsc)/./node_modules/@shopify/polaris/build/esm/components/AppProvider/AppProvider.js (/my_path/.next/server/vendor-chunks/@shopify.js:1767:1) at __webpack_require__ (/my_path/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///(rsc)/./app/layout.tsx:7:74) at (rsc)/./app/layout.tsx (/my_path/.next/server/app/page.js:373:1) at Function.__webpack_require__ (/my_path/.next/server/webpack-runtime.js:33:42) at runNextTicks (node:internal/process/task_queues:60:5) at listOnTimeout (node:internal/timers:540:9) at process.processTimers (node:internal/timers:514:7) at async eq (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402641) at async tt (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406205) at async tr (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406787) at async tl (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057) at async /my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2596 { digest: '2242913041' }
Any suggestions?
`use client` does not stop your component SSRing. `use client` just means that the component will additionally hydrate on the client-side (as well as being SSR'd). Most Polaris components need to hydrate on the client-side because they have client-side interactivity (e.g. buttons with callbacks). There's nothing wrong with this. (Prior to React Server Components, use client was the default for all components - it's only with RSCs that it's possible for a component to only render on the server).
Suggest re-reading the Next.js App Router documentation + this great article: https://www.joshwcomeau.com/react/server-components/
Hi @rb88. First of all, thanks a lot for the link to the article, it's a really good read!
And now, coming back to my question. Are you saying that I misunderstood what it means that "Polaris supports SSR"? Does it mean that Polaris components support SSR (pre)rendering, but they would still need to be hydrated on the client, meaning that I should use them only in components with 'use client' directive?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024