Reactで静的サイトジェネレート

 Reactで静的サイトジェネレート

某所でLTした内容の抜粋。
Reactを使って静的ウェブサイトを生成してみました。
技術的にはサーバーサイドレンダリングを利用するだけです。
ウェブサイトとしてReactを利用しないため、軽量なウェブサイトを構築でき、Reactのコンポーネントを再利用することがメリットです。

ところがCSS ModuleやGTMのタグを入れようとするとちょっと面倒でした。

1a679952cdf455ecd6a15cbde7ae80d5?s=128

Tomohiko Himura

September 15, 2018
Tweet

Transcript

  1. 9.

    const writeFilePage = async ({ filename, Page }: { filename:

    string, Page: Component }): Promise<{ path: string, html: string }> => { const content = ReactDOMServer.renderToStaticMarkup(<Page />); const html = `<!DOCTYPE html>${content}`; const path = `public/${filename}`; await fs.mkdirp(dirname(path)); await fs.writeFile(path, html); return { path, html }; };
  2. 11.
  3. 29.

    // @flow import React from 'react'; export const GTMInit =

    ({ id }: { id: string }) => ( <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){ w[l]=w[l]|| [];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l! ='dataLayer'?'&l='+l:'';j.async=true;j.src='https:// www.googletagmanager.com/gtm.js? id='+i+dl;f.parentNode.insertBefore(j,f); }) (window,document,'script','dataLayer', "${id}");` }} /> ); export default GTMInit;
  4. 30.