@aubree
Server-side rendering (SSR) в React.js можно организовать для отдельных компонентов на странице следующим образом:
Пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// AppWithSSR.js import React from 'react'; import ReactDOMServer from 'react-dom/server'; const AppWithSSR = ({ component }) => { const htmlString = ReactDOMServer.renderToString(component); return <div dangerouslySetInnerHTML={{ __html: htmlString }} />; }; export default AppWithSSR; // SSRComponent.js import React from 'react'; import AppWithSSR from './AppWithSSR' const SSRComponent = ({ component }) => { return <AppWithSSR component={component} />; }; export default SSRComponent; // App.js import React from 'react'; import SSRComponent from './SSRComponent'; import ComponentToSSR from './ComponentToSSR'; const App = () => { return ( <div> <h1>App with SSR</h1> <SSRComponent component={<ComponentToSSR />} /> {/* Other components not rendered with SSR */} </div> ); }; export default App; |
Теперь компонент ComponentToSSR
будет отрисовываться с помощью SSR, в то время как остальные компоненты будут рендериться обычным способом на клиенте.