diff options
-rw-r--r-- | vnext/server/middleware/renderer.js | 13 | ||||
-rw-r--r-- | vnext/src/index.js | 25 |
2 files changed, 16 insertions, 22 deletions
diff --git a/vnext/server/middleware/renderer.js b/vnext/server/middleware/renderer.js index 8edb5f57..11272f8b 100644 --- a/vnext/server/middleware/renderer.js +++ b/vnext/server/middleware/renderer.js @@ -1,11 +1,11 @@ -import ReactDOMServer from 'react-dom/server'; +import * as ReactDOMServer from 'react-dom/server'; import cookie from 'cookie'; // import our main App component import App from '../../src/App'; import { getLinks } from '../sape'; -import { StaticRouter } from 'react-router-dom'; +import { StaticRouter } from 'react-router-dom/server'; const path = require('path'); const fs = require('fs'); @@ -19,7 +19,6 @@ const serverRenderer = async (req, res, next) => { const cookies = cookie.parse(req.headers.cookie || ''); const links = await getLinks(req.originalUrl, cookies['sape_cookie']); - console.log(`URL: ${req.originalUrl} LINKS: ${links.join(' ')}`); fs.readFile(filePath, 'utf8', (err, htmlData) => { if (err) { console.error('err', err); @@ -28,10 +27,14 @@ const serverRenderer = async (req, res, next) => { const routerContext = {}; + const props = { + footer: links.join(' ') + }; + // render the app as a string const html = ReactDOMServer.renderToString( <StaticRouter location={req.baseUrl} context={routerContext}> - <App footer={links.join(' ')}/> + <App {...props} /> </StaticRouter> ); @@ -39,7 +42,7 @@ const serverRenderer = async (req, res, next) => { return res.send( htmlData.replace( '<div id="app"></div>', - `<div id="app">${html}</div>` + `<script>window.__PROPS__="${Buffer.from(JSON.stringify(props)).toString('base64')}";</script><div id="app">${html}</div>` ) ); }); diff --git a/vnext/src/index.js b/vnext/src/index.js index 9f9fa4a3..59365d37 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -1,29 +1,20 @@ -import { StrictMode, lazy, Suspense } from 'react'; +import { StrictMode } from 'react'; import { hydrateRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; import './index.css'; +import Juick from './App'; -function LoadingView() { - return ( - <div id="content"> - <div className="lds-ripple"><div></div><div></div></div> - </div> - ); -} - -const Juick = lazy(() => import('./App')); +const props = window.__PROPS__ ? JSON.parse(window.atob(window.__PROPS__)) : {}; const JuickApp = () => ( <StrictMode> - <Suspense fallback={LoadingView()}> - <CookiesProvider> - <BrowserRouter> - <Juick /> - </BrowserRouter> - </CookiesProvider> - </Suspense> + <CookiesProvider> + <BrowserRouter> + <Juick {...props} /> + </BrowserRouter> + </CookiesProvider> </StrictMode> ); |