Merge pull request #5396 from HSLdevcom/DT-6904

DT-6904 Remove support for server-side rendering

Author: vesameskanen

Dockerfile

@@ -97,7 +97,6 @@ ENV \
   # the --title option just sets the harmless property process.title
   # https://nodejs.org/api/cli.html#cli_title_title
   NODE_OPTS='--title=digitransit-ui' \
-  RELAY_FETCH_TIMEOUT='' \
   WEBPACK_DEVTOOL=$WEBPACK_DEVTOOL \
   ASSET_URL='' \
   STATIC_MESSAGE_URL=''

app/action/CanceledLegsBarActions.js

@@ -11,7 +11,6 @@ import RealTimeInformationStore from './store/RealTimeInformationStore';
 import TimeStore from './store/TimeStore';
 import MapLayerStore from './store/MapLayerStore';
 import GeoJsonStore from './store/GeoJsonStore';
-import CanceledLegsBarStore from './store/CanceledLegsBarStore';
 import ViaPointStore from './store/ViaPointStore';
 import UserStore from './store/UserStore';
 import FavouriteStore from './store/FavouriteStore';
@@ -34,7 +33,6 @@ export default config => {
   app.registerStore(TimeStore);
   app.registerStore(MapLayerStore);
   app.registerStore(GeoJsonStore);
-  app.registerStore(CanceledLegsBarStore);
   app.registerStore(ViaPointStore);
   app.registerStore(UserStore);
   app.registerStore(FavouriteStore);
@@ -44,14 +42,11 @@ export default config => {
 
   app.plug({
     name: 'extra-context-plugin',
-    plugContext: options => {
-      let { headers } = options;
+    plugContext: () => {
       return {
         plugComponentContext: componentContext => {
           // eslint-disable-next-line no-param-reassign
           componentContext.config = config;
-          // eslint-disable-next-line no-param-reassign
-          componentContext.headers = headers;
         },
         plugActionContext: actionContext => {
           // eslint-disable-next-line no-param-reassign
@@ -61,19 +56,8 @@ export default config => {
           // eslint-disable-next-line no-param-reassign
           storeContext.config = config;
         },
-        dehydrate() {
-          return {
-            headers,
-            config,
-          };
-        },
-        rehydrate(state) {
-          ({ config, headers } = state); // eslint-disable-line no-param-reassign
-        },
       };
     },
-    dehydrate: () => ({}),
-    rehydrate: () => {},
   });
 
   return app;

app/app.js

@@ -2,10 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import BrowserProtocol from 'farce/BrowserProtocol';
-import createInitialFarceRouter from 'found/createInitialFarceRouter';
-import createFarceStore from 'found/createFarceStore';
+import createFarceRouter from 'found/createFarceRouter';
 import makeRouteConfig from 'found/makeRouteConfig';
-import getStoreRenderArgs from 'found/getStoreRenderArgs';
 import { Resolver } from 'found-relay';
 import provideContext from 'fluxible-addons-react/provideContext';
 import debug from 'debug';
@@ -16,7 +14,6 @@ import {
   errorMiddleware,
   cacheMiddleware,
 } from 'react-relay-network-modern';
-import RelayClientSSR from 'react-relay-network-modern-ssr/lib/client';
 import OfflinePlugin from 'offline-plugin/runtime';
 import { Helmet } from 'react-helmet';
 import { Environment, RecordSource, Store } from 'relay-runtime';
@@ -33,7 +30,6 @@ import ErrorBoundary from './component/ErrorBoundary';
 import oldParamParser from './util/oldParamParser';
 import { ClientProvider as ClientBreakpointProvider } from './util/withBreakpoint';
 import meta from './meta';
-import { isIOSApp } from './util/browser';
 import {
   initAnalyticsClientSide,
   addAnalyticsEvent,
@@ -49,9 +45,9 @@ import {
 
 window.debug = debug; // Allow _debug.enable('*') in browser console
 
-// TODO: this is an ugly hack, but required due to cyclical processing in app
-const { config } = window.state.context.plugins['extra-context-plugin'];
+const { config } = window;
 const app = appCreator(config);
+const context = app.createContext({ config });
 
 const getParams = query => {
   if (!query) {
@@ -86,8 +82,6 @@ async function init() {
     await Promise.all(modules);
   }
 
-  const context = await app.rehydrate(window.state);
-
   // Get additional feedIds and searchParams from localstorage
   if (config.mainMenu.countrySelection) {
     const selectedCountries = context.getStore('CountryStore').getCountries();
@@ -117,11 +111,6 @@ async function init() {
     }
   }
 
-  // eslint-disable-next-line no-underscore-dangle
-  const relaySSRMiddleware = new RelayClientSSR(window.__RELAY_PAYLOADS__);
-
-  relaySSRMiddleware.debug = false;
-
   // Query parameter is used instead of header because browsers send
   // OPTIONS queries where you can't define headers
   const queryParameters = config.hasAPISubscriptionQueryParameter
@@ -134,7 +123,6 @@ async function init() {
     .getLanguage();
 
   const network = new RelayNetworkLayer([
-    relaySSRMiddleware.getMiddleware(),
     cacheMiddleware({
       size: 200,
       ttl: 60 * 60 * 1000,
@@ -159,8 +147,6 @@ async function init() {
     store: new Store(new RecordSource()),
   });
 
-  environment.relaySSRMiddleware = relaySSRMiddleware;
-
   setRelayEnvironment(environment);
 
   const resolver = new Resolver(environment);
@@ -169,18 +155,7 @@ async function init() {
 
   const historyProtocol = new BrowserProtocol();
 
-  const store = createFarceStore({
-    historyProtocol,
-    historyMiddlewares,
-    routeConfig,
-  });
-
-  await getStoreRenderArgs({
-    store,
-    resolver,
-  });
-
-  const Router = await createInitialFarceRouter({
+  const Router = await createFarceRouter({
     historyProtocol,
     historyMiddlewares,
     routeConfig,
@@ -237,17 +212,8 @@ async function init() {
     headers: PropTypes.objectOf(PropTypes.string),
   });
 
-  const root = document.getElementById('app');
-  const { initialBreakpoint } = root.dataset;
-
-  // KLUDGE: SSR and CSR mismatch breaks the UI in iOS PWA mode
-  // see: https://github.com/facebook/react/issues/11336
-  if (isIOSApp) {
-    root.innerHTML = '';
-  }
-
   const content = (
-    <ClientBreakpointProvider serverGuessedBreakpoint={initialBreakpoint}>
+    <ClientBreakpointProvider>
       <ContextProvider
         translations={translations}
         context={context.getComponentContext()}
@@ -271,8 +237,8 @@ async function init() {
     </ClientBreakpointProvider>
   );
 
-  ReactDOM.hydrate(content, root, () => {
-    // Run only in production mode and when built in a docker container
+  const rootNode = document.getElementById('app');
+  ReactDOM.render(content, rootNode, () => {
     if (process.env.NODE_ENV === 'production' && BUILD_TIME !== 'unset') {
       OfflinePlugin.install({
         onUpdateReady: () => OfflinePlugin.applyUpdate(),

app/client.js

@@ -9,7 +9,6 @@ import DisruptionInfo from './DisruptionInfo';
 import MainMenuContainer from './MainMenuContainer';
 import MessageBar from './MessageBar';
 import LogoSmall from './LogoSmall';
-import CanceledLegsBar from './CanceledLegsBar';
 import LoginButton from './LoginButton';
 import UserMenu from './UserMenu';
 
@@ -45,7 +44,6 @@ export default function AppBar(
     <>
       {disruptionInfoOpen && <DisruptionInfo setOpen={toggleDisruptionInfo} />}
       {config.NODE_ENV !== 'test' && <MessageBar breakpoint={breakpoint} />}
-      <CanceledLegsBar />
       <nav className={`top-bar ${breakpoint !== 'large' ? 'mobile' : ''}`}>
         <section className="title">
           <button

app/component/AppBar.js

@@ -1,15 +1,14 @@
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, Suspense, lazy } from 'react';
+import React from 'react';
 import { matchShape, routerShape } from 'found';
 import { FormattedMessage } from 'react-intl';
 import getContext from 'recompose/getContext';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import withBreakpoint from '../util/withBreakpoint';
 import { favouriteShape, userShape } from '../util/shapes';
-
-const AppBar = lazy(() => import('./AppBar'));
-const AppBarHsl = lazy(() => import('./AppBarHsl'));
-const MessageBar = lazy(() => import('./MessageBar'));
+import AppBar from './AppBar';
+import AppBarHsl from './AppBarHsl';
+import MessageBar from './MessageBar';
 
 const AppBarContainer = ({
   router,
@@ -23,16 +22,6 @@ const AppBarContainer = ({
   breakpoint,
   ...args
 }) => {
-  const [isClient, setClient] = useState(false);
-
-  useEffect(() => {
-    // To prevent SSR from rendering something https://reactjs.org/docs/react-dom.html#hydrate
-    setClient(true);
-  });
-
-  if (!isClient) {
-    return null;
-  }
   return (
     <>
       <a
@@ -47,36 +36,31 @@ const AppBarContainer = ({
       </a>
       {style === 'hsl' ? (
         <div className="hsl-header-container" style={{ display: 'block' }}>
-          <Suspense fallback="">
-            <AppBarHsl user={user} lang={lang} favourites={favourites} />
-            <MessageBar breakpoint={breakpoint} />
-          </Suspense>
+          <AppBarHsl user={user} lang={lang} favourites={favourites} />
+          <MessageBar breakpoint={breakpoint} />
         </div>
       ) : (
-        <Suspense fallback="">
-          <AppBar
-            {...args}
-            showLogo
-            logo={logo}
-            homeUrl={homeUrl}
-            user={user}
-            breakpoint={breakpoint}
-            titleClicked={() =>
-              router.push({
-                ...match.location,
-                pathname: homeUrl,
-                state: {
-                  ...match.location.state,
-                  errorBoundaryKey:
-                    match.location.state &&
-                    match.location.state.errorBoundaryKey
-                      ? match.location.state.errorBoundaryKey + 1
-                      : 1,
-                },
-              })
-            }
-          />
-        </Suspense>
+        <AppBar
+          {...args}
+          showLogo
+          logo={logo}
+          homeUrl={homeUrl}
+          user={user}
+          breakpoint={breakpoint}
+          titleClicked={() =>
+            router.push({
+              ...match.location,
+              pathname: homeUrl,
+              state: {
+                ...match.location.state,
+                errorBoundaryKey:
+                  match.location.state && match.location.state.errorBoundaryKey
+                    ? match.location.state.errorBoundaryKey + 1
+                    : 1,
+              },
+            })
+          }
+        />
       )}
     </>
   );

app/component/AppBarContainer.js

@@ -1,15 +1,14 @@
 /* eslint-disable camelcase */
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { intlShape } from 'react-intl';
 import { matchShape } from 'found';
 import { Helmet } from 'react-helmet';
+import SiteHeader from '@hsl-fi/site-header';
 import { favouriteShape, configShape } from '../util/shapes';
 import { clearOldSearches, clearFutureRoutes } from '../util/storeUtils';
 import { getJson } from '../util/xhrPromise';
 
-const SiteHeader = lazy(() => import('@hsl-fi/site-header'));
-
 const clearStorages = context => {
   clearOldSearches(context);
   clearFutureRoutes(context);
@@ -127,20 +126,18 @@ const AppBarHsl = ({ lang, user, favourites }, context) => {
         </Helmet>
       )}
 
-      <Suspense fallback="">
-        {!config.hideHeader && (
-          <SiteHeader
-            ref={siteHeaderRef}
-            hslFiUrl={config.URL.ROOTLINK}
-            lang={lang}
-            {...userMenu}
-            languageMenu={languages}
-            banners={banners}
-            suggestionsApiUrl={config.URL.HSL_FI_SUGGESTIONS}
-            notificationApiUrls={notificationApiUrls}
-          />
-        )}
-      </Suspense>
+      {!config.hideHeader && (
+        <SiteHeader
+          ref={siteHeaderRef}
+          hslFiUrl={config.URL.ROOTLINK}
+          lang={lang}
+          {...userMenu}
+          languageMenu={languages}
+          banners={banners}
+          suggestionsApiUrl={config.URL.HSL_FI_SUGGESTIONS}
+          notificationApiUrls={notificationApiUrls}
+        />
+      )}
     </>
   );
 };

app/component/AppBarHsl.js

@@ -7,11 +7,7 @@ import { matchShape, routerShape } from 'found';
 
 import Icon from './Icon';
 import { getDialogState, setDialogState } from '../store/localStorage';
-import {
-  getIsBrowser,
-  isBrowser,
-  isKeyboardSelectionEvent,
-} from '../util/browser';
+import { isKeyboardSelectionEvent } from '../util/browser';
 import withBreakpoint from '../util/withBreakpoint';
 
 class BubbleDialog extends React.Component {
@@ -141,9 +137,6 @@ class BubbleDialog extends React.Component {
   }
 
   render() {
-    if (!isBrowser && !getIsBrowser()) {
-      return null;
-    }
     const { breakpoint, isFullscreenOnMobile } = this.props;
     const isFullscreen = breakpoint !== 'large' && isFullscreenOnMobile;
     return this.renderContainer(isFullscreen);