WebApps 2

Server side rendering

WebApps offer the possibility to render the app completely server side. If the WebApp does not require any client side functionality e.g. click events or user input you can opt for this possibility.

Since the WebApp will be completely executed server side you can access the Sitevision Public API and server side SDK in any component.

main.js (the client side entry point for the WebApp) can be left empty, but the file is still required.

Example

In the WebApp's it is possible to specify a name. This name will be fetched in the App component to be printed.

// index.js
import * as React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import router from '@sitevision/api/common/router';
import appData from '@sitevision/api/server/appData';
import App from './components/App';

router.get('/', (req, res) => {
   const message = 'Hello, world!';
   const name = appData.get('name');

   res.send(renderToStaticMarkup(<App message={message} name={name} />), {
      message,
      name,
   });
});

// components/App.js
import * as React from 'react';
import PropTypes from 'prop-types';
import styles from './App.scss';

const App = ({ message, name }) => {
   return (
      <div className={styles.container}>
         <p className={styles.text}>
            {message} {name}
         </p>
      </div>
   );
};

App.propTypes = {
   message: PropTypes.string,
   name: PropTypes.string,
};

export default App;