Does Shopify Polaris support Server Side Rendering (SSR)?

artooras commented 7 months ago

Summary

Answers in this issue by @ry5n seem to suggest that Polaris should be fully SSR compatible. However, I get an error when I try to do so.

Expected behavior

Polaris to be rendered on the server without errors.

Actual behavior

I'm using Shopify Polaris in a Next.js (v14) app using their App router, allowing for easy switching between SSR and CSR by removing or adding the 'use client' directive in the file. So, when I render the layout.tsx of my app using 'use client', it works. However, when I remove it thus forcing the route to render on the server, I get the following error (it seems that Polaris uses React Context internally...):

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'
}

The code in my layout.tsx is quite simple:

import {AppProvider} from '@shopify/polaris'
import translations from '@shopify/polaris/locales/en.json'
import '@shopify/polaris/build/esm/styles.css'

export default function RootLayout({children}: {children: React.ReactNode}) {

  return (
    <html lang='en'>
      <head>
        <meta name='shopify-api-key' content={process.env.NEXT_PUBLIC_SHOPIFY_API_KEY} />
        <script src='https://cdn.shopify.com/shopifycloud/app-bridge.js' />
      </head>
      <body>
        <AppProvider i18n={translations}>
          {children}
        </AppProvider>
      </body>
    </html>
  )
}

Steps to reproduce

Sandbox

Are you using React components?

Yes

Polaris version number

12.21.0

Browser

Firefox 124.0.2

Device

Macbook Air

ibrahimcaj commented 6 months ago

I'm getting the same error, did you manage to find a solution?

github-actions[bot] commented 3 weeks ago

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

Shopify / polaris