Does Shopify Polaris support SSR (server side rendering)?

Does Shopify Polaris support SSR (server side rendering)?

artooras
Shopify Partner
24 0 12

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?

Replies 2 (2)

rb88
Shopify Partner
1 0 0

`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/

 

artooras
Shopify Partner
24 0 12

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?