AtCoderProblems
AtCoderProblems copied to clipboard
kenkoooo
Twitterのコンテントカードが常に同じ
Twitterで人に自分のつくったバーチャルコンテストを勧めたかったのですが、タイトルが常に"AtCoder Problems"に固定されていてバチャを勧めているように見えなかったので、ちゃんとコンテストの名前になるとうれしいと思いました 他のページについても同じようなことが言えるかもしれないです。
これは server-side rendering しなければ解決できなさそうです… Twitter や Facebook はクライアントサイドの JavaScript を実行しないので、react-helmet の meta tag はカードに反映しません。
https://github.com/geelen/react-snapshot このようなライブラリーもあるけどバーチャルコンテストのページには使えないでしょう。
サーバーサイドレンダリングをスマートにするとなると、HTMLのテンプレートエンジンが欲しいところですが、現状だとあまりいいものがないっぽいですね。 一番有力なのはrenderっぽいんですけど、nightlyを要求してくるのが厳しいところです。
最近Teraというライブラリを見つけました。actixのexampleにも使われているので、テンプレートエンジンを使うならばこれですかね
https://github.com/Keats/tera/
最近Next.jsというフレームワークを触って、かなりいい感じだと思うのでこれを使うのもありな気がしてきました。 Reactで書かれたコンポーネントをサーバーサイドレンダリング（SSR）して提供できるので、全体的なユーザーエクスペリエンスの向上にもつながると思われます。Static Generationにも対応しているので、トップのダッシュボードなんかは都度SSRするのではなくキャッシュしたものを提供することもできます。
ただし、これをするとRouterコンポーネントを置き換えることになるので、URLが変更される破壊的変更になってしまう、という副作用はあります。その他の変更量もそれなりになるかも。 また、どこでホストするの？という問題もあります。AWSでもサポートしているようですが、VercelというこのNext.jsを開発しているところの無料枠でホストするのも選択肢になりうるかなあと思います。
