commands

yarn start now starts webpack-dev-server + ssr server
yarn start:web legacy mode to run only webpack-dev-server (useful for slow machines)
yarn ssr use this to run SSR node server on the production
yarn ssr:dev dev mode for ssr server, allow to test SSR without webpack

misc notes

• WriteFilePlugin was removed (webpack-dev-server supports this functionality out of the box: Support Webpack 4.29.0 breaking change gajus/write-file-webpack-plugin#74 (comment))
• CleanWebpackPlugin currently is disabled for SSR builds due to incompatible issues (you need to periodically manually clear dist folder)
• CSS Modules are now enabled for all modes and can't be disabled
• @ds-frontend/resource still has no SSR support (need separate PR)
• smoothscroll-polyfill was removed as outdated
• react-helmet is now in dependencies and is supported in SSR out of the box
• i18n is partially support (need separate PR for i18n)
• you can use yarn start:web to disable SSR in development mode on slow computers. but this is not recommended. you need to check SSR build on pre-commit hook in this case
• there is a hidden feature for QA that allow to easy testing SSR localStorage.setItem('_SSR_DEBUG_', true) (do not forgot to remove it localStorage.removeItem('_SSR_DEBUG_'))

code restrictions

• no globals (window, navigator, etc). use context where possible, or check the environment (e.g. process.env.SSR ? (mock) : window.navigator)
• all data that is necessary for SSR should be stored in redux.
• @ds-frontend resource (not yet) and apollo-client has SSR support, but for custom queries you need additional code
• use componentDidMount in browser but constructor for SSR env (see examples below)
• for functional container you can use useSSREffect hook

TODO before merge

• remove custom ssr api module. it seems we can use interceptors instead
• use context for initial StaticRouter props (staticUrl, origin, routerContext)
• sentry support for server-side code
• add posibility to change API uri for server-side rendering (https://github.com/django-stars/frontend-skeleton/pull/258/files#diff-f586856b98edff63cb612ebc8b609bfbdf30e35b9af69b87a9ab95c0b7a3a730R16)
• move server configuration to ENV (host:port)
• research should we use worker for every req on server-side
• update CleanWebpackPlugin and configure it for SSR

TODO non-critical

• make separate App.js to avoid a lot of extra conditions in code
• add example for pages with API requests (via resource or API)
• use template processor for index.html on server-side
• add "disable js" mode to simplification SSR testing (disable rendering in index.js)

CI notes

• yarn build - no changes
• yarn ssr - run nodejs server that build and serves static.
• all urls that was previously redirected to dist folder should be proxied to the node.js server (usually all site urls except django static and client/assets)
• it's strongly recommended to add yarn build to CI tests (to prevent developers use browser-specific features in shared code)

examples

class CategoriesListContainer extends Component {
  constructor(props) {
    super(props)

    if(process.env.SSR) {
      // this.props.categories - is not-prefetched resource
      // fetch data on the server
      this.props.categories.data || this.fetchData()
    }
  }

  componentDidMount() {
    // fetch data on the client side
    // componentDidMount has no effect on server-side
    this.fetchData()
  }

  fetchData() {
    const { staticUrl, acceptLanguage } = this.props

    this.props.categories.fetch()
  }

  render() {
    if(!this.props.categories.data) {
      return null
    }

    return (
      <CategoriesListView items={this.props.categories.data} />
    )
  }
}

the same thing, but using hooks:

function CategoriesListContainer({ categories }) {
  useSSREffect(categories.fetch)

  if(!categories.data) {
    return null
  }

  return (
    <CategoriesListView items={categories.data} />
  )
}

in case if you need custom request you can use resource custom requests or use api module. you need to set data to redux store manually in last case. use own requests via fetch/xhr or other modules doesn't supported and need a lot of custom code.

function CategoriesListContainer({ setData }) {
  useSSREffect(function() {
    api.request({ endpoint: 'categories' }).then(categories.setData)
  })

  if(!categories.data) {
    return null
  }

  return (
    <CategoriesListView items={categories.data} />
  )
}