reactやvueなどSPAでWebアプリを作ると、サーバサイドレンダリング(SSR)をすべきか悩みます。Googleのクローラはjavascriptを割ときちんとレンダリングしてくれるため、あまり意識なくてもいいようになりました。titleやogpなどのmetaタグをjavascriptで書き換えている場合、twitterやslackで共有した際にカードが正しく表示されない問題は依然残されています。使い、クローラに向けてだけレンダリング済みのHTMLを返すようにしたいと思います。javascriptをレンダリングし、javascriptタグを除いた素のHTMLをキャッシュしてくれるサービスです。方に転送することで、レンダリング済みのHTMLをクローラに渡すことができます。このサイトのトップページをprerenderした結果は以下のようになります。https://service.prerender.io/https://at-sushi.work/proxyの設定がされていないので、相対パスで設定されている画像やstyleが表示されていませんが、実際に使用する際は設定するので画像等も正しくクローラに渡せます。クローラを判別して転送する方法は、以下のようにNginxやApacheで行う方法に、ExpressJS、Rails、Spring等にミドルウェアを導入する方法などがあります。}今回はAWSのS3に置いたjavascriptをCloudFrontで配信しているケースを想定して行います。(このサイトはそのように構築されています。登録を行ってください。tokenをメモっておきます。全体像は以下のようになります。複雑な仕組みですが、簡単に構築できるスクリプトが公開されています。開き、スタックの作成を開始します。このときに、日本regionではなく、バージニア北部を選択するように気をつけてください。(Edgeが起動できなくてエラーが出ます。ダウンロードしてきて、アップロードします。先程prerender.ioで発行したtokenを入力します。あとは作成を押すだけで、CloudFront、S3、Edge全てが作成されます。S3に自分のindex.htmlと、js、css、画像等をアップロードすれば、すぐにWebページが公開されます。実際にprerenderされているか、コマンドで確かめることができます。どのページがキャッシュされているのか確認することができます。まとめAWSでも簡単にprerender.ioを設定して、botにレンダリング済みのHTMLを渡すことができました。SPAに関してはいろいろな意見がありますが、僕個人としてはクローラーがjavascriptエンジンを持ち、今後SSRしなくてもよくなると思っています。それまでの間、このような応急処置もありなのではないでしょうか。AtsushiTopWorksPhotosBlogContact。