aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-01-09 05:26:58 -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 { createRoot } from 'react-dom/client';
import { hydrateRoot } from 'react-dom/client';
//Router
import { BrowserRouter as Router } from 'react-router-dom';
//History
@ -10,7 +10,6 @@ import { Provider } from 'react-redux';
import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
import { config } from '../config';
import reducer from './reducers';
import initialState from './reducers/initialState';
import App from './components/App';
import './styles/global.sass';
@ -28,26 +27,44 @@ const composeEnhancers = composeWithDevToolsWeb({
// Specify here name, actionsBlacklist, actionsCreators and other options
});
const preloadedState = window.__PRELOADED_STATE__
const store = env === 'development' ? createStore(
reducer,
initialState,
preloadedState,
composeEnhancers(),
) : createStore(
reducer,
initialState,
preloadedState,
)
delete window.__PRELOADED_STATE__
const container = document.getElementById('app');
const root = createRoot(container);
const history = createBrowserHistory()
root.render(
const root = hydrateRoot(container,
<Provider store={store}>
<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>
</Provider>
);
); */
if (module.hot) {
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(`
<!DOCTYPE html>
<html lang="es">
@ -55,6 +55,9 @@ const setResponse = (html) => {
</head>
<body>
<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>
</body>
</html>
@ -63,6 +66,7 @@ const setResponse = (html) => {
const renderApp = (req, res) => {
const store = createStore(reducer, initialState)
const preloadedState = store.getState();
const html = renderToString(
<Provider store={store}>
<StaticRouter location={req.url}>
@ -70,7 +74,7 @@ const renderApp = (req, res) => {
</StaticRouter>
</Provider>
)
res.send(setResponse(html));
res.send(setResponse(html, preloadedState));
};
app.get('*', renderApp)