aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-01-09 21:46:56 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

PR-753737: Se agrega hydrate y se inyecta initial state en SRR.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos 2022-04-18 05:35:25 +00:00
parent 811898186c
commit af92072959
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/frontend/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { createRoot } from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
//Router //Router
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
//History //History
@ -10,7 +10,6 @@ import { Provider } from 'react-redux';
import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension'; import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
import { config } from '../config'; import { config } from '../config';
import reducer from './reducers'; import reducer from './reducers';
import initialState from './reducers/initialState';
import App from './components/App'; import App from './components/App';
import './styles/global.sass'; import './styles/global.sass';
@ -28,26 +27,44 @@ const composeEnhancers = composeWithDevToolsWeb({
// Specify here name, actionsBlacklist, actionsCreators and other options // Specify here name, actionsBlacklist, actionsCreators and other options
}); });
const preloadedState = window.__PRELOADED_STATE__
const store = env === 'development' ? createStore( const store = env === 'development' ? createStore(
reducer, reducer,
initialState, preloadedState,
composeEnhancers(), composeEnhancers(),
) : createStore( ) : createStore(
reducer, reducer,
initialState, preloadedState,
) )
delete window.__PRELOADED_STATE__
const container = document.getElementById('app'); const container = document.getElementById('app');
const root = createRoot(container);
const history = createBrowserHistory() const history = createBrowserHistory()
root.render( const root = hydrateRoot(container,
<Provider store={store}> <Provider store={store}>
<Router history={history}> <Router history={history}>
<App tab="home" /> <App />
</Router>
</Provider>,
//Add this comment to update later app and remove warning
/*{
onRecoverableError: (error) => {
console.error("recoverable", error);
}
}, */
);
// Use root.render to update later the app
/* root.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router> </Router>
</Provider> </Provider>
); ); */
if (module.hot) { if (module.hot) {
module.hot.accept(); module.hot.accept();

8
src/server/server.js
View File

@ -42,7 +42,7 @@ if(env === 'development'){
})); }));
} }
const setResponse = (html) => { const setResponse = (html, preloadedState) => {
return(` return(`
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
@ -55,6 +55,9 @@ const setResponse = (html) => {
</head> </head>
<body> <body>
<div id="app">${html}</div> <div id="app">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script src="assets/app.js" type="text/javascript"></script> <script src="assets/app.js" type="text/javascript"></script>
</body> </body>
</html> </html>
@ -63,6 +66,7 @@ const setResponse = (html) => {
const renderApp = (req, res) => { const renderApp = (req, res) => {
const store = createStore(reducer, initialState) const store = createStore(reducer, initialState)
const preloadedState = store.getState();
const html = renderToString( const html = renderToString(
<Provider store={store}> <Provider store={store}>
<StaticRouter location={req.url}> <StaticRouter location={req.url}>
@ -70,7 +74,7 @@ const renderApp = (req, res) => {
</StaticRouter> </StaticRouter>
</Provider> </Provider>
) )
res.send(setResponse(html)); res.send(setResponse(html, preloadedState));
}; };
app.get('*', renderApp) app.get('*', renderApp)