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

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

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

Transcript

1. ReactͰ
   ੩తαΠτδΣωϨʔτ
   2018-09-15
   

   View Slide

2. ReactͷͨΊͷ
   ੩తαΠτδΣωϨʔτ
   Ͱ͸ͳ͍
   

   View Slide

3. react-static
   Gatsby
   Next.js
   

   View Slide

4. クライアントで処理しない
   

   View Slide

5. メリット
   Reactコンポーネントが再利用できる
   軽量・高速
   

   View Slide

6. デメリット
   Reactが活きてない
   やってる人が別にいない
   

   View Slide

7. 仕組み
   

   View Slide

8. サーバーサイドレンダリング
   するだけ
   

   View Slide

9. const writeFilePage = async ({
   filename,
   Page
   }: {
   filename: string,
   Page: Component
   }): Promise<{ path: string, html: string }> => {
   const content = ReactDOMServer.renderToStaticMarkup();
   const html = `${content}`;
   const path = `public/${filename}`;
   await fs.mkdirp(dirname(path));
   await fs.writeFile(path, html);
   return { path, html };
   };
   

   View Slide

10. ReactDOMServer.renderToStaticMarkup
    

    View Slide

11. 簡単
    

    View Slide

12. つらいこと
    

    View Slide

13. CSS Module
    採用したらつらかった
    

    View Slide

14. CSS Module
    雑に言うと
    • CSSセレクタ用のクラス名が被らない
    • JS上でimportできる
    

    View Slide

15. CSS Moduleの
    仕組みを雑に
    

    View Slide

16. .article {
    font-size: 16px;
    }
    goro.css
    

    View Slide

17. CSS Moduleとして処理すると
    

    View Slide

18. ._article_xkpkl_10 {
    font-size: 16px;
    }
    goro.css
    

    View Slide

19. {
    "article": "_article_xkpkl_10",
    }
    一緒にこんなjsonができる感じ
    

    View Slide

20. 使うとき
    

    View Slide

21. import { article } from ‘./goro.css'
    # 実質生成された.jsonを読み込む感じ
    () => Goro
    Javascript
    

    View Slide

22. Goro
    出力
    

    View Slide

23. Import するのは css であって jsonではない
    CSSとJSを事前処理しないといけない
    困る点
    

    View Slide

24. 解決策
    Webpackのloaderが対応している
    

    View Slide

25. • nodejs向けのコードを生成するようにする
    • target: 'node' (webpack.config.js)
    • 生成されたコードを実行する
    • node main.js
    Webpackの導入
    

    View Slide

26. {
    "scripts": {
    "build": "webpack && node dist/main.js"
    }
    }
    package.json
    

    View Slide

27. 他につらいこと
    

    View Slide

28. 解析用のJavaScriptの挿入
    

    View Slide

29. // @flow
    import React from 'react';
    export const GTMInit = ({ id }: { id: string }) => (
    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;
    

    View Slide

30. ·ͱΊ
    

    View Slide

31. Reactで静的サイト
    そんなに難しくない
    

    View Slide

32. やりこむとつらい
    

    View Slide