Skip to main content

Server-Side Rendering

SSR (Server-Side Rendering) can greatly improve the first rendering time, the most popular React SSR framework is Next.js. Currently, Reactant has supported SSR based on Next.js.

Installation​

  • Build a Next.js application project using the create-next-app cli.
npx create-next-app reactant-ts-ssr --ts
cd reactant-ts-ssr
  • Install reactant-ssr.
npm install reactant-ssr
  • Install other Babel development dependencies.
npm install -D @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators babel-plugin-parameter-decorator babel-plugin-transform-typescript-metadata

Configuration​

  • Next.js with Typescript should use babel, and make sure you set:

Add .babelrc file

{
  "presets": ["next/babel"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "babel-plugin-parameter-decorator",
    "babel-plugin-transform-typescript-metadata"
  ]
}

Add this config to tsconfig.json file

+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true

Usage​

  1. Define a module file for SSR src/index.tsx:
import React from 'react';
import {
  ViewModule,
  injectable,
  useConnector,
  action,
  state,
} from 'reactant-ssr';

@injectable()
export class Counter {
  @state
  count = 0;

  @action
  increase() {
    this.count += 1;
  }

  @action
  decrease() {
    this.count -= 1;
  }
}

@injectable()
export class CounterView extends ViewModule {
  constructor(public counter: Counter) {
    super();
  }

  component() {
    const count = useConnector(() => this.counter.count);
    return (
      <>
        <button type="button" onClick={() => this.counter.decrease()}>
          -
        </button>
        <div>{count}</div>
        <button type="button" onClick={() => this.counter.increase()}>
          +
        </button>
      </>
    );
  }
}
  1. Add custom Next.js app in pages/_app.tsx file.
import { createServerApp } from "reactant-ssr";
import { CounterView } from "../src/index";

export const app = createServerApp({
  modules: [CounterView],
});

export default app.bootstrap;
  1. Add home page routing page in pages/index.tsx file.
import { CounterView } from "../src/index";
import { app } from "./_app";

export default app.container.get(CounterView).component;
  1. Start the project.
npm run dev

and visit http://localhost:3000.

Q&A​

  1. Does reactant-router support SSR?

reactant-router is based on React Router, which does not support SSR, so when you use reactant-ssr, your routing must usenext/router

  1. Does reactant-storage support SSR?

Yes, it works perfectly fine. In general, reactant-share is a different application model, so it also does not support SSR, which is supported by all other Reactant libraries.

Example​