WIDE_DISPLAY_CUTOFF,
- } ) }
- />
- );
const streamSidebar = () => {
if ( selectedTab === FIRST_POSTS_TAB && recommendedSites?.length ) {
@@ -127,16 +135,14 @@ const DiscoverStream = ( props ) => {
};
return (
- <>
-
- { DiscoverHeader() }
-
-
-
+
+
+
+
);
};
diff --git a/client/reader/discover/index.js b/client/reader/discover/index.js
deleted file mode 100644
index 885fb48cbd131..0000000000000
--- a/client/reader/discover/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import page from '@automattic/calypso-router';
-import { getLanguageRouteParam, getAnyLanguageRouteParam } from '@automattic/i18n-utils';
-import {
- makeLayout,
- redirectInvalidLanguage,
- redirectWithoutLocaleParamInFrontIfLoggedIn,
- render as clientRender,
-} from 'calypso/controller';
-import { setLocaleMiddleware } from 'calypso/controller/shared';
-import { sidebar, updateLastRoute } from 'calypso/reader/controller';
-import { discover } from './controller';
-
-export default function () {
- const langParam = getLanguageRouteParam();
- const anyLangParam = getAnyLanguageRouteParam();
- page( `/${ anyLangParam }/discover`, redirectInvalidLanguage );
-
- page(
- [ '/discover', `/${ langParam }/discover` ],
- redirectWithoutLocaleParamInFrontIfLoggedIn,
- setLocaleMiddleware(),
- updateLastRoute,
- sidebar,
- discover,
- makeLayout,
- clientRender
- );
-}
diff --git a/client/reader/discover/index.node.js b/client/reader/discover/index.node.js
new file mode 100644
index 0000000000000..db9e25be894bf
--- /dev/null
+++ b/client/reader/discover/index.node.js
@@ -0,0 +1,28 @@
+import { getAnyLanguageRouteParam } from '@automattic/i18n-utils';
+import { makeLayout, ssrSetupLocale } from 'calypso/controller';
+import PostPlaceholder from 'calypso/reader/stream/post-placeholder';
+import renderHeaderSection from '../lib/header-section';
+import { DiscoverDocumentHead } from './discover-document-head';
+import { DiscoverHeader } from './discover-stream';
+import { getSelectedTabTitle, DEFAULT_TAB } from './helper';
+
+const discoverSsr = ( context, next ) => {
+ context.renderHeaderSection = renderHeaderSection;
+
+ const selectedTab = context.query.selectedTab || DEFAULT_TAB;
+ const tabTitle = getSelectedTabTitle( selectedTab );
+ context.primary = (
+ <>
+
+
+
+
+ );
+ next();
+};
+
+export default function ( router ) {
+ const anyLangParam = getAnyLanguageRouteParam();
+
+ router( [ '/discover', `/${ anyLangParam }/discover` ], ssrSetupLocale, discoverSsr, makeLayout );
+}
diff --git a/client/reader/discover/index.web.js b/client/reader/discover/index.web.js
new file mode 100644
index 0000000000000..c81bc485876e9
--- /dev/null
+++ b/client/reader/discover/index.web.js
@@ -0,0 +1,91 @@
+import { getAnyLanguageRouteParam } from '@automattic/i18n-utils';
+import AsyncLoad from 'calypso/components/async-load';
+import {
+ makeLayout,
+ redirectInvalidLanguage,
+ redirectWithoutLocaleParamInFrontIfLoggedIn,
+ render as clientRender,
+} from 'calypso/controller';
+import { setLocaleMiddleware } from 'calypso/controller/shared';
+import { sectionify } from 'calypso/lib/route';
+import { sidebar, updateLastRoute } from 'calypso/reader/controller';
+import {
+ trackPageLoad,
+ trackUpdatesLoaded,
+ trackScrollPage,
+} from 'calypso/reader/controller-helper';
+import { recordTrack } from 'calypso/reader/stats';
+import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
+import renderHeaderSection from '../lib/header-section';
+import { DiscoverDocumentHead } from './discover-document-head';
+import { getSelectedTabTitle, DEFAULT_TAB } from './helper';
+
+const ANALYTICS_PAGE_TITLE = 'Reader';
+
+const discover = ( context, next ) => {
+ const basePath = sectionify( context.path );
+ const fullAnalyticsPageTitle = ANALYTICS_PAGE_TITLE + ' > Discover';
+ const streamKey = 'discover:recommended';
+ const mcKey = 'discover';
+ const state = context.store.getState();
+
+ const currentRoute = getCurrentRoute( state );
+ const currentQueryArgs = new URLSearchParams( getCurrentQueryArguments( state ) ).toString();
+
+ trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey );
+ recordTrack(
+ 'calypso_reader_discover_viewed',
+ {},
+ { pathnameOverride: `${ currentRoute }?${ currentQueryArgs }` }
+ );
+
+ if ( ! isUserLoggedIn( state ) ) {
+ context.renderHeaderSection = renderHeaderSection;
+ }
+ const selectedTab = context.query.selectedTab || DEFAULT_TAB;
+ const tabTitle = getSelectedTabTitle( selectedTab );
+ context.primary = (
+ <>
+
+
+
+ );
+ next();
+};
+
+export default function ( router ) {
+ const anyLangParam = getAnyLanguageRouteParam();
+
+ router(
+ [ '/discover', `/${ anyLangParam }/discover` ],
+ redirectInvalidLanguage,
+ redirectWithoutLocaleParamInFrontIfLoggedIn,
+ setLocaleMiddleware(),
+ updateLastRoute,
+ sidebar,
+ discover,
+ makeLayout,
+ clientRender
+ );
+}
diff --git a/client/reader/discover/package.json b/client/reader/discover/package.json
new file mode 100644
index 0000000000000..a53931f3a6407
--- /dev/null
+++ b/client/reader/discover/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "index.node.js",
+ "browser": "index.web.js"
+}
diff --git a/client/reader/lib/header-section/index.tsx b/client/reader/lib/header-section/index.tsx
index 4c0d4134fd95f..159ee7bb319b6 100644
--- a/client/reader/lib/header-section/index.tsx
+++ b/client/reader/lib/header-section/index.tsx
@@ -1,16 +1,22 @@
-import { translate } from 'i18n-calypso';
+import { useTranslate } from 'i18n-calypso';
import React from 'react';
-const renderHeaderSection = () => (
-
-
- {
- // translators: The title of the reader tag page
- translate( 'WordPress Reader' )
- }
-
- { translate( 'Enjoy millions of blogs at your fingertips.' ) }
-
-);
+const ReaderHeader = () => {
+ const translate = useTranslate();
+
+ return (
+
+
+ {
+ // translators: The title of the reader tag page
+ translate( 'WordPress Reader' )
+ }
+
+ { translate( 'Enjoy millions of blogs at your fingertips.' ) }
+
+ );
+};
+
+const renderHeaderSection = () => ;
export default renderHeaderSection;
diff --git a/client/sections.js b/client/sections.js
index 8ae3b1bf811db..272928257c57e 100644
--- a/client/sections.js
+++ b/client/sections.js
@@ -416,6 +416,7 @@ const sections = [
group: 'reader',
enableLoggedOut: true,
trackLoadPerformance: true,
+ isomorphic: true,
},
{
name: 'reader',