reactとstyled-componentsを用いた実装

2020-11-24-advent-calendar-2020-server-react-styled-components-implementation.tsx

import React, { FC } from "react";
import { renderToString } from "react-dom/server";
import { ServerStyleSheet, createGlobalStyle, css } from "styled-components";
import { FormComponent } from "./form"; // RoRでレンダリングされるform要素をトレースしたもの
import { dummyData } from "./data"; // RoRから引き継ぎたいjsonデータをオブジェクトで

// reset css 適当に
const reset = css`
  input,
  textarea {
    padding: 0;
  }
`;

const GlobalStyle = createGlobalStyle`
${reset}
`;

const sheet = new ServerStyleSheet();

const Main: FC = () => {
  return (
    <>
      <GlobalStyle />
      <div id="app1" />
      <div
        id="app2"
        data-json-data={JSON.stringify(dummyData)}
      />
      <FormComponent />
    </>
  );
};
const reactDom = renderToString(sheet.collectStyles(<Main />));
const styleTags = sheet.getStyleTags();

res.write(
  templateHtml(
    "App",
    reactDom,
    styleTags,
    // jsファイルの読み込み（optimization特にしていない場合）
    `<script src="/bundle.js"></script>`
  )
);