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

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

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

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

1a679952cdf455ecd6a15cbde7ae80d5?s=128

Tomohiko Himura

September 15, 2018
Tweet

Transcript

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

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

  3. react-static Gatsby Next.js

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

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

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

  7. 仕組み

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

  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 }; };
  10. ReactDOMServer.renderToStaticMarkup

  11. 簡単

  12. つらいこと

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

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

  15. CSS Moduleの 仕組みを雑に

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

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

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

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

  20. 使うとき

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

    <div className={article} >Goro</div> Javascript
  22. <div class="_article_xkpkl_10">Goro</div> 出力

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

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

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

    main.js Webpackの導入
  26. { "scripts": { "build": "webpack && node dist/main.js" } }

    package.json
  27. 他につらいこと

  28. 解析用のJavaScriptの挿入

  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;
  30. ·ͱΊ

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

  32. やりこむとつらい