文系プログラマによるTIPSブログスマートフォン用の表示で見る文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。Environment版のランタイムは存在しますね。Accessであることが解りました。雑感GAE/Node.jsのデモサイトGAEでnext.js動かす方法あるかな〜?と調べていると、以下のgitリポジトリを発見しました。Program.とと書かれているではありませんか!更に、こちらのgitリポジトリのリンク先の資料を見ると、GAE/Node.jsはPre-Betaであると書かれています。Next.jsのデモが公開されているではありませんか!!ChromeのアドオンWappalyzerで技術要素をチェックして見ると、バッチリ以下である事が確認できます。スピンアップ〜フレームワーク初期化〜画面表示速度は?GAEといえばスピンアップが真っ先に心配になりますね。以前GAE/Golangについてのスピンアップについては以下にまとめたので合わせてご覧下さい。www.bunkei-programmer.netGAE/Java8のスピンアップについては以下をご覧下さい。Javaよりは速いが、Golangには負ける、というくらいです。いえ結構速いのでは?と思われます。betaの段階ですが、私がJava8のbeta時にスピンアップ速度を確認し、その後GAになった後にも計測しましたが、違いは見受けられなかったので、今現在のスピンアップ速度がそのままGA後にも適用されると考えていいかもしれません。Environment上のSPAサイトのSSR化は鬼門でした。理由は簡単で、ほとんどのフレームワークが実質node.jsが必須になっているためです。coreをサポートしていません。EnvironmentでGolangランタイムを使ったSSRを動かしている例があるのですが、通常の方法ではなく、goja等のjavascriptパーサを利用して実現していたり、ちょっと特殊な運用が必要のようでした。EnvironmentがNode.jsをサポートしていないためです。universal、VueならNuxt.js。所謂Isomophicが可能になり、Golangとjsでそれぞれバリデーションロジックを書かなくてよくなったり、定数の共通化が可能になったり、嬉しいことが一杯ですね。SSRは難しいqiita.comサーバ側ではbrowserのwindowオブジェクトが無くてヌルポったり、労力に見合わないし、そもそもいらないんじゃない?という論です。先日以下の記事を書きました。www.bunkei-programmer.netReactとAngularのSSR無しのSPAサイトがGooglebotにどれくらい認識されるのか(レンダリングできるのか)?という記事です。ここではGolang+Reatは認識率高い、Angular+Java8はボロッボロ、という結果に終わりました。後日AngularサイトをGolang化したところ、何とGooglebotの認識率が上がりました。Java8の時はサイトマップxmlもほとんどインデキシングしてくれなかったのに、Golang化した途端にインデキシングされはじめました。GolangとJava8の違いは何でしょうか?考えられる一つの答えは「スピンアップからレンダリングが完了するまでの時間」です。Golang化した事で数倍レンダリング完了速度が上がった事で、Googlebotの認識率が上がったようなのです。いう事は、GAEでSSR無しのSPAサイトを運用してGoogleに認識して貰うにはGolangが最適だが、SSRしていないので認識されるかは運次第。Golangの場合はサーバとクライアント側でコードが全く異なるので、コードの共通化は難しい。いうジレンマが生じます。私が開発しているReactサイトの場合、以下の問題を抱えています。前提条件として、Reactサイトはtitle・description・ogpのみSSRし、ReactのSSRは行っていません。ogp)の定数群をGoとReactで別々に定義しています。定数をGo側で定義してSEOのAPIを作ってReactから非同期で参照してもいいのですが、それだと都度HTTPリクエストが発生してしまいます。通信が遅延するとjsonが返るのが遅れ、React側のtitleタグの変更処理が遅延し、GAに送信されるtitleタグが1画面古くなったり、ブックマークタイトル名が古くなったりする弊害が発生してしまいます。これが嫌なので、現状サーバとクライアント側で違う実装で定数を2重管理しています。サーバ側の定数は画面の初回表示時のみ使用し、初回表示後はReactがjsの定数を使ってtitleタグ等を変更しています。Reactは解釈できないため、Goが返すhtmlとReactで返すhtmlが共用できず、無駄に2重管理が発生しています。React用のhtmlを削除してwebpack-dev-serverにindex.htmlを自動生成させてもいいのですが、それだとviewportやogpタグを出力するコードが別途必要だったりして、結局別の2重管理が発生しているだけで、あまりよろしくありません。サーバとクライアントのhtdocsやURLを合わせる手間webpack-dev-serverとGoのhtdocsのパスをあわせるのが面倒です。webpack-dev-server側のパスの解釈がちょっと癖があって、publicPathを/にするとwatch対象が/になってしまい、全ファイルがライブリロード対象になってしまったり、publicPathを/assets/等とするとトップページが/assets/になってしまったり。現状はwebpack-dev-server側でproxyを使用する事でGo側と同様のパスを実現していますが、これは毎回唸る問題なので回避したいです。templateのjs読み込みURLを/bundle.jsにできない問題ローカルでは開発速度を重視したいので、通常はwebpack-dev-serverのport4200で開発(SEO等、SSRできる部分は確認不能)し、SEOを確認する際はGoを通す8080で開発しています。Goを通した開発の場合はwebpack-dev-serverも起動しないとそもそもjsが存在しないので画面が参照できません。webpack-dev-serverをオンメモリで開発しようとすると、jsの実体が生成されません(生成すると重い)。ような<script>を書かないといけません。productionの場合は/bundle.jsに、といった分岐処理が無駄に発生します。template側になるので、この時点でGoのhtmlとwebpack-dev-serverのhtmlを共用できません。考えただけでこれくらいでてきます。一応なんとか全て解決はできていますが、あまり良い状況ではないですね。面倒だし2重管理は危険だし、何とかしたいです。雑感SSRがまるで銀の弾丸のような書き方をしましたが、勿論そんな事はありません。GAE上での話に限定すると、やる価値は十分にあるのでは?と思います。検索エンジンの事を無視していい場合はSSRなんて不要なのですけどね。週間)昔は業務系SIer、今はベンチャー企業でプログラムを書いています。INFILEを実行できるようにするmacのAutomatorでhomebrewのコマンドをFinderのサービスから実行できるようにするReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。単行本(ソフトカバー)この商品を含むブログを見るAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。大型本この商品を含むブログを見るSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。