SSRを試してみた
参考にしたサイト→https://medium.com/@feloy/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5
SSRとは
チラシの裏程度に。間違ってるかも。
まず、今までの動的WebとSPAの違いに関して
今までの動的WebはPHP、Java(Servlet)、.net?などを利用して、サーバーでHTMLを動的に作成してクライアントに送信する形を取っている。
一方AngularのSPAではロジック部分のみをクライアントに渡し、データは非同期で通信することになっている。モダンWebとかも言うらしい。
wgetやcurlコマンドでサイトにアクセスした場合、今までの動的Webの場合、綺麗なHTMLコードが帰ってくるのに対しAngularのSPAサイトではロジック部分しか取れない。つまり記事の無い空ブログ(実際にはjsを読んでるだけのHTML)みたいな感じになってしまう。そのためSEOに不向きなためSSRを実現しSEOにも対応していこうと言う考えがあった。
angular-universalはSSRを実現するプロジェクトでありAngular4.0では統合された。
Angular2の時からSSRを適用したサイトもあるようだが、やり方は人それぞれで統一はされていない印象。
それで
angular-universalはAngular 4.0にて統合され環境が整ったと思ったけどangular-cli@1.2.3でははまだサポートされていないっぽい。
angular-cli@v1.3.0-rc.0ではplatformと言う項目ができserverが指定できるようになっている。おそらくSSR対応するのだろう。
1.2と1.3のスキーマを見ればなんとなく移行するのだろうなーと感じる。
https://github.com/angular/angular-cli/blob/1.2.x/packages/@angular/cli/lib/config/schema.json
https://github.com/angular/angular-cli/blob/1.3.x/packages/%40angular/cli/lib/config/schema.json
angular-cliのリリーススケジュールみたいなのがどこにあるのか分からない。そのうちrcが外れて正式版になるのだろうな。
Releases · angular/angular-cli
作ってみたけど
同じ事だけど→https://medium.com/@feloy/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5を参考にして作ってみた。
作成方法も全く同じにしたつもりだったが、「ng build -aot」がエラーで動かない。
1 2 3 4 5 6 |
ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\20_Development\00_git\angular-cli-universal\src' resolve './$$_gendir/app/app.module.ngfactory' in 'D:\20_Development\00_git\angular-cli-universal\src' using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src) after using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src) using description file: D:\20_Development\00_git\angular-cli-universal\package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory) |
angularのissueに乗ってたけど、まだだめっぽい??
aotは事前コンパイルなので、妥協しても良いかなと考えてる。ちなみに「ng build」は動く
build後、node index.jsを実行しdistディレクトリのindex.htmlを確認してみるときちんとSSRされたソースが出力されていた。apache上で動かしてみたが問題ないようだった。
ちょっと辞めておこうと
angular-cli標準ではng serveコマンドを実行しておけばソースの変更後、ビルド、再表示してくれる。便利。
しかしSSRの場合はソースの修正、build、WEBにアップ、確認と作業が増える。これを自動化しないと作業効率が悪い。
ちなみにbuild時間は約2秒。プログラムはng new した1ページのサイトだがコンポーネントが増えた場合、どうなるのかしら。
また、debugできない事が辛い。angularを使っていて楽だなと思った一つにdebugが容易。
SSRにしてしまうと開発環境の外で実行するためdebugができないのではないかと。
やり方が間違っているのか知識が足りないのか。とりあえず、まだSSRは適用しないかなーと思う今日このごろ。
rc版だしね