Server Rendering

Introduction

The API for server components is the same as the client API detailed above, so that the same component definitions can be used on both the server and client.

A server component extends the WaferServer class:

import WaferServer from "@lamplightdev/wafer/lib/server/wafer.js";

class MyExample extends WaferServer {
  static get template() {
    return '<div id="firstname"></div>';
  }

  static get props() {
    return {
      firstname: {
        type: String,
        targets: [
          {
            selector: "$#firstname",
            text: true,
          },
        ],
      },
    };
  }
}

Components can be then rendered on the server by either:

• parsing an HTML string
• constructing a component on the server and rendering it to a string
• or a combination of these methods

Components can be either:

• Hybrid - where the component is 'rehydrated' on the client from the server rendered code
• Server only - where the server is used to serve static code