{"id":18716,"library":"react-relay-network-modern-ssr","title":"react-relay-network-modern-ssr","description":"Server-side rendering middleware for the react-relay-network-modern package, enabling data fetching and cache management for Relay Modern during SSR. Current stable version is 1.4.0 (released 2020-03-02), with infrequent releases. It provides a RelayServerSSR class that supports three modes: default fetch-based, direct schema injection with graphql-js, and asynchronous context preparation. Key differentiator: it requires two-pass rendering to populate the Relay store before final HTML output and ships TypeScript definitions. It is unmaintained since 2020 and relies on peer dependencies graphql, react-relay, and react-relay-network-modern.","status":"maintenance","version":"1.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/relay-tools/react-relay-network-modern-ssr","tags":["javascript","relay","react","network layer","ssr","server side rendering","typescript"],"install":[{"cmd":"npm install react-relay-network-modern-ssr","lang":"bash","label":"npm"},{"cmd":"yarn add react-relay-network-modern-ssr","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-relay-network-modern-ssr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for schema execution in SSR middleware","package":"graphql","optional":false},{"reason":"Required peer dependency for Relay Environment and components","package":"react-relay","optional":false},{"reason":"Required peer dependency for network layer middleware integration","package":"react-relay-network-modern","optional":false}],"imports":[{"note":"Default export from lib/server — named import does not work. Also available via require: const RelayServerSSR = require('react-relay-network-modern-ssr/lib/server').default","wrong":"import { RelayServerSSR } from 'react-relay-network-modern-ssr'","symbol":"RelayServerSSR","correct":"import RelayServerSSR from 'react-relay-network-modern-ssr/lib/server'"},{"note":"Default export from lib/client — named import does not work. For client-side hydration.","wrong":"import { RelayClientSSR } from 'react-relay-network-modern-ssr/lib/client'","symbol":"RelayClientSSR","correct":"import RelayClientSSR from 'react-relay-network-modern-ssr/lib/client'"},{"note":"SSRCacheMiddleware is an alias for RelayClientSSR; use default import from lib/client.","wrong":"import { SSRCacheMiddleware } from 'react-relay-network-modern-ssr'","symbol":"SSRCacheMiddleware","correct":"import SSRCacheMiddleware from 'react-relay-network-modern-ssr/lib/client'"}],"quickstart":{"code":"import express from 'express';\nimport ReactDOMServer from 'react-dom/server';\nimport { RelayNetworkLayer } from 'react-relay-network-modern';\nimport RelayServerSSR from 'react-relay-network-modern-ssr/lib/server';\nimport serialize from 'serialize-javascript';\nimport { Environment, Network, RecordSource, Store } from 'relay-runtime';\nimport schema from './schema';\n\nconst app = express();\n\napp.get('/*', async (req, res, next) => {\n  const relayServerSSR = new RelayServerSSR();\n\n  const network = new RelayNetworkLayer([\n    relayServerSSR.getMiddleware({\n      schema,\n      contextValue: {}\n    })\n  ]);\n\n  const source = new RecordSource();\n  const store = new Store(source);\n  const relayEnvironment = new Environment({ network, store });\n\n  // First render to kick off data fetching\n  ReactDOMServer.renderToString(<App relayEnvironment={relayEnvironment} />);\n\n  // Wait for all queries to complete\n  const relayData = await relayServerSSR.getCache();\n\n  // Second render with primed store\n  const appHtml = ReactDOMServer.renderToString(\n    <App\n      relayEnvironment={new Environment({\n        network: Network.create(() => relayData[0][1]),\n        store\n      })}\n    />\n  );\n\n  res.status(200).send(`\n    <html>\n      <body>\n        <div id=\"react-root\">${appHtml}</div>\n        <script>window.__RELAY_BOOTSTRAP_DATA__ = ${serialize(relayData)};</script>\n        <script src=\"/assets/bundle.js\"></script>\n      </body>\n    </html>\n  `);\n});\n\napp.listen(3000);","lang":"typescript","description":"Complete Express SSR setup with RelayServerSSR – two-pass rendering, schema injection, cache retrieval, and HTML serialization."},"warnings":[{"fix":"Use CommonJS require() or transpile with bundler (e.g., Webpack, Rollup).","message":"Removed .mjs support in v1.3.0 – ES modules are no longer provided.","severity":"deprecated","affected_versions":">=1.3.0"},{"fix":"Always call await relayServerSSR.getCache() before second render.","message":"Must call relayServerSSR.getCache() after initial render to collect all query payloads.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a schema object to getMiddleware() or install a fetch polyfill like node-fetch.","message":"If using middleware without schema argument, ensure fetch is available (Node 18+) or polyfill.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure react-relay (not relay-runtime) is listed in peerDependencies.","message":"Changed peer dependency from 'relay-runtime' to 'react-relay' in v1.2.1 – projects using relay-runtime directly may break.","severity":"breaking","affected_versions":">=1.2.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install react-relay: npm install react-relay","cause":"Missing peer dependency 'relay-runtime' (or 'react-relay' for older versions).","error":"Cannot find module 'relay-runtime'"},{"fix":"Use import RelayServerSSR from 'react-relay-network-modern-ssr/lib/server'","cause":"Incorrect import path – using main export instead of /lib/server.","error":"TypeError: relayServerSSR.getMiddleware is not a function"},{"fix":"Install graphql: npm install graphql","cause":"Missing peer dependency 'graphql' when using schema option.","error":"Module not found: Can't resolve 'graphql'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}