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

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

react-static Gatsby Next.js

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

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

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

仕組み

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

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 }; };

ReactDOMServer.renderToStaticMarkup

簡単

つらいこと

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

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

CSS Moduleの 仕組みを雑に

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

CSS Moduleとして処理すると

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

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

使うとき

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

出力

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

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

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

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

他につらいこと

解析用のJavaScriptの挿入

// @flow import React from 'react'; export const GTMInit = ({ id }: { id: string }) => ( ); export default GTMInit;

·ͱΊ

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

やりこむとつらい