Does Shopify Polaris support SSR (server side rendering)?

Shopify Apps

Topic summary

A developer encountered errors when attempting to use Shopify Polaris components with server-side rendering (SSR) in a Next.js App Router application. They provided a CodeSandbox demonstrating the issue, where removing the use client directive causes a TypeError.

Key clarification provided:

  • The use client directive doesn’t prevent SSR—it indicates the component will be both server-rendered AND hydrated on the client-side
  • Most Polaris components require client-side hydration due to interactive features (buttons, callbacks, etc.)
  • This is standard behavior and not problematic

Current understanding:
The original poster is seeking confirmation that “Polaris supports SSR” means:

  • Components can be pre-rendered on the server
  • They still require client-side hydration
  • They should only be used within components marked with use client

The discussion remains open as the developer works to clarify the distinction between SSR, client-side hydration, and React Server Components.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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?

2

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/

3

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?