@indiv/ssr-renderer
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

@indiv/ssr-renderer

SSR for InDiv

中文 npm

Demo

  • npm start
  • open http://localhost:3234/indiv-doc

Environment

  • Node.js v6 or newer
  • Indiv v1.2.0+

Basic Usage

  1. Create renderer
  • Import a renderer function.
const renderToString = require('./src');
  • Import your InDiv app, only use routes: TRouter[] and InDiv instance
// in your InDiv APP
import { InDiv } from 'indiv';

import { router, routes } from './routes';

import RootModule from './modules';

const inDiv = new InDiv();
inDiv.bootstrapModule(RootModule);
inDiv.use(router);
inDiv.init();

export default {
  routes,
  inDiv,
};
  1. Render InDiv app to string with node app
  • Define your route, render template ( I use ejs template in express), and use it in function renderToString
app.use('/indiv-doc', (req, res, next) => {
  const ssrData = require('./dist/main.js');
  res.render('index.ejs', {
    // use in ejs template
    ssrContent: renderToString(req.url, ssrData.routes, ssrData.default.inDiv),
  });
});
  • In index.ejs
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>InDiv ssr renderer</title>
    <link rel="stylesheet" href="/main.css">
  </head>
  <body>
    <div id="root">
      <%- ssrContent %>
    </div>
  </body>
</html>
  1. Life cycle hooks in SSR component
  • only constructor() and nvOnInit(): void; is executable in SSR

Package Sidebar

Install

npm i @indiv/ssr-renderer

Weekly Downloads

1

Version

1.1.1

License

ISC

Unpacked Size

36.6 kB

Total Files

12

Last publish

Collaborators

  • lilongji